Question

有没有人找到过使用Jquery拦截默认Form :: postLink（）表单的方法？我希望表单在没有JS的情况下工作（因此postLink）。但是启用JS后我想截取帖子并通过AJAX调用它。

<?php echo $this->Form->postLink('Delete', array('action'=>'delete', $prospect['Prospect']['id']), array('class'=>'postLink', 'escape'=>false), __('Sure you want to delete # %s?', $prospect['Prospect']['id'])); ?>

产生

<form action="/admin/prospects/delete/4f61ce95-2b6c-4009-9b89-07e852b0caef" name="post_4f648f773923b" id="post_4f648f773923b" style="display:none;" method="post">
    <input type="hidden" name="_method" value="POST"/>
</form>
<a href="#" class="postLink" onclick="if (confirm('Sure you want to delete # 4f61ce95-2b6c-4009-9b89-07e852b0caef?')) { document.post_4f648f773923b.submit(); } event.returnValue = false; return false;">
    Delete
</a>

主要问题是js在这里放置了内联。因此，即使我试图拦截click事件（或post事件 - 也尝试过），它总是会触发：

<script>
$(document).ready(function() {
    $('table.list a.postLink').click(function(e) {
        e.preventDefault();
      alert('Handler for .submit() called.');
      // TODO: do ajax request here and return false
      return false;
    });
});
</script>

所以最后表单总是正常提交并重定向 - 忽略任何ajax调用（捕获表单提交）或发布/重定向，而不管刚刚发出的ajax调用（捕获click事件）。

我想通过AJAX删除此记录，如果成功，只需从DOM中删除该表行。如果不必修改应用程序中的所有300多个“删除按钮”，那将会很棒。

如果一切都失败了，我可能仍会覆盖FormHelper（扩展它并将其别名）。但我希望在这里采用侵入性较小的解决方案。

Answer 1

我知道这是旧的，但对于那些寻找的人来说：

您需要先删除添加到删除的“onclick”属性链接。
然后，您将.click功能添加到删除链接
你需要url（可以从表单中硬编码或检索，这总是cakephp Form中的prev元素 - ＆gt; postLink

以下是代码：


$(function(){

    $('a:contains("Delete")').removeAttr('onclick');

    $('a:contains("Delete")').click(function(e){
        e.preventDefault();
        var form = $(this).prev();
        url = $(form).attr("action");
        $.post(url);
        return false;
    });

});

Answer 2

jymboche - 多么天才为什么我自己没有想到它？

嗯，这是您的修改后的答案：

$(document).ready(function() {
    $('table.list a.postLink').removeAttr('onclick');

    $('table.list a.postLink').click(function(e) {
        e.preventDefault();
        if (!confirm('<?php echo __('Sure?')?>')) { 
            return false;
        }
        var form = $(this).prev();
        var url = $(form).attr("action");
        var tr = $(this).closest('tr');
        url = url + '.json';
        $.post(url).success(function(res) {
            if (res.error) {
                alert(res.error);
                return false;
            }
            tr.fadeOut(200);
        }).error(function() {
            alert("Error"); 
        })
        return false;
    });
});

这仅供将来参考。当你给我正确的想法时，我仍会接受你的回答。

Answer 3

jymboche的解决方案帮助我找到了一个可行的答案，但由于我安装了一些安全蛋糕插件，因此对我来说无法完全发挥作用。

这对我有用：

    $(function(){

    $('a:contains("Delete")').removeAttr('onclick');

    $('a:contains("Delete")').click(function(e){

        e.preventDefault();
        var form = $(this).prev();
        var url = $(form).attr("action");

        $.ajax({
            type: 'POST',
            cache: false,
            url: url,
            data: $(form).serialize(),
            success: function(msg) {
                // do any extra calls you need to refresh the page
            }
        });
        return false;
    });

});

Answer 4

只是一个想法，没有测试过：

<?php echo $this->Form->postLink('Delete', array('action'=>'delete', $prospect['Prospect']['id']), array('class'=>'postLink', 'onclick' => false, 'escape'=>false), __('Sure you want to delete # %s?', $prospect['Prospect']['id'])); ?>

Answer 5

当前解决方案的几个问题......

首先，postLink方法需要启用Javascript。来自Cake's doco： “创建一个HTML链接，但使用POST方法访问url。需要在浏览器中启用javascript。”

如果禁用了javascript，您只需获得完全相同的输出 - 隐藏的表单，以及尝试使用Javascript提交该表单的链接（但由于JS已关闭而失败）。

其次，尽管它会起作用，但使用postLink方法似乎很奇怪，然后使用Javacript精确地撤消postLink方法创建的所有魔法。

如果你想要一个非JavaScript友好的解决方案，你所要做的就是创建一个指向delete方法的常规表单，并在其下面放一个链接：

<?php echo $this->Form->create('DefaultAvailability', array('url' array('action' => 'delete', $myRecord['ModelName']['id'])));?>
<?php echo $this->Form->end('Delete (no JS)');?>
<a href='#'>Delete (With JS, use AJAX)</a>

然后，对于没有javascript的情况，隐藏下面的链接，表格将正常工作。

对于存在javascript的情况，隐藏表单，并使用javascript使您的删除链接触发删除表单上的提交，并使用ajax处理该提交。

Answer 6

我已将之前的jQuery版本翻译为Mootools

//我们从foreach开始，选择页面上的所有ajax按钮 $$（ 'ajaxbutton'）。每个（函数（项目，索引）{

        //remove onClick
        item.removeProperty('onclick');

        //attach click event
        item.addEvent('click', function(e){
            //stop click (in my case the form is inside another link)
            e.stop();
            var form = item.getPrevious();
            url = form.get('action');

            new Request({
                url: url,//url
                method: 'post',//method
                onSuccess: function(responseText){
                    //This is not required, we are dimming the button on success
                    item.getParents()[0].tween('opacity',0.5)
                }
            }).send();
            return false;
        });

    })

使用jQuery拦截cake2 postLink（）表单帖子

6 个答案: