如何在 jquery 中获取 FormHelper::postLink() 在 Cakephp4 中使用选项 'block' => true 生成的表单？

Posted 2023-02-19

【中文标题】如何在 jquery 中获取 FormHelper::postLink() 在 Cakephp4 中使用选项 \'block\' => true 生成的表单？

【英文标题】：How in jquery to get the form generated by FormHelper::postLink() with option 'block' => true in Cakephp4?如何在 jquery 中获取 FormHelper::postLink() 在 Cakephp4 中使用选项 'block' => true 生成的表单？

【发布时间】：2022-01-17 03:37:41

【问题描述】：

我想用 FormHelper::postLink() 管理 ajax 中的删除。

复杂之处在于我使用了'block' => true 选项：

<div class="item-box">
<!-- [...] -->
<?php
$this->Form->postLink('<i class="fas fa-trash-alt fa-fw"></i>',
                                                [
                                                    'plugin' => 'FileManager',
                                                    'controller' => 'Fichiers',
                                                    'action' => 'delete',
                                                    $file->id
                                                ],
                                                [
                                                    'block' => true, // The postLink form is outside the main form, How can I get the form in jquery when I click on this postLink ?
                                                    'confirm' => 'Confirmer la suppression ?',
                                                    'class' => 'delete secondary button',
                                                    'title' => 'Supprimer le fichier',
                                                    'escapeTitle' => false
                                                ]);
?>
</div>

我不知道如何在 ajax 中获取帖子链接表单，因为它不在主表单中并且不在 postLink 附近？

到目前为止（例如，当我不需要使用选项 block 时）我能够得到这样的表单：

$('.item-box .delete')
    .removeAttr('onclick')
    .click(function(e)
        e.preventDefault();
        var form = $(this).prev(); // The form was just before the postLink
        var url = $(form).attr("action");

        if($(this).data('confirm-message'))
            message_confirmation = $(this).data('confirm-message');
        else
            message_confirmation = 'Confirm ?';

        if(confirm(message_confirmation)) 

            parent = $(this).parents('.item-box');

            $.ajax(
                type: 'POST',
                cache: false,
                url: url,
                data: $(form).serialize()
            )
            .done(function(response) 
                                parent.slideUp(
                                    'fast',
                                    function()
                                        parent.remove();
            
                                    
                                );
                            )
            .fail(function(error) 
                                alert("Delete Error (" + error.statusText + ")");
                                location.reload();
                            );
        
            
        return false;
    );

既然我在 postLink() 中使用了 'block' => true 选项，有没有办法在 jquery 中获取 postLink 表单？

【参考方案1】：

我刚刚找到了解决方案。

我在链接的 'data-form-name' 属性中添加与 postLink 关联的表单名称，然后使用此属性获取表单：

$('.item-box .delete')
    .each(function(index)
        var formName = $(this).attr("onclick").match(/post_[A-Za-z0-9]+/);
        console.log(formName);
        $(this).attr('data-form-name', formName); // Add the name of the form associated to the postLink() in data-form-name attribute
    )
    .removeAttr('onclick')
    .click(function(e)
        e.preventDefault();
        var form = $('form[name="' + $(this).data('form-name') + '"]'); // get the form depending on data-form-name attribute
        var url = $(form).attr("action");
        if($(this).data('confirm-message'))
            message_confirmation = $(this).data('confirm-message');
        else
            message_confirmation = 'Confirm ?';

        if(confirm(message_confirmation)) 

            parent = $(this).parents('.item-box');

            $.ajax(
                type: 'POST',
                cache: false,
                url: url,
                data: $(form).serialize()
            )
            .done(function(response) 
                                parent.slideUp(
                                    'fast',
                                    function() // fonction de callback quand le fadeOut est fini 
                                        parent.remove(); // remove enlève l'élément du DOM (fadeout le masque!) 
            
                                    
                                );
                            )
            .fail(function(error) 
                                alert("Delete error (" + error.statusText + ")");
                                location.reload();
                            );
        
            
        return false;
    );