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

Question

我想使用 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 中获取 post link 表单，因为它在主表单之外并且不在 [= 附近35=]链接 ?

到目前为止（例如，当我不需要使用选项 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 表单？

Answer 1

我刚刚找到了解决方案。

我在 link 的 '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;
    });