5

有没有人找到用 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是内联的。因此，即使我尝试拦截点击事件（或发布事件 - 也尝试过），也总是会触发：

<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 调用（捕获点击事件）。

我想通过 AJAX 删除这条记录，如果成功的话，只需从 DOM 中删除该表行。不过，如果不必为此修改应用程序中的所有 300 多个“删除按钮”，那就太好了。

如果一切都失败了，我可能仍然可以覆盖 FormHelper（扩展它并为其命名）。但我希望这里有一个侵入性较小的解决方案。

4

6 回答 6

8

我知道这是旧的，但对于任何搜索的人：

  • 您需要首先删除添加到删除链接的“onclick”属性。
  • 然后，将 .click 函数添加到删除链接
  • 您需要 url（可以硬编码或从表单中检索，它始终是 cakephp Form->postLink 中的 prev 元素

这是代码：


$(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;
    });

});
于 2012-05-16T15:24:38.880 回答
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;
    });
});

这仅供将来参考。我仍然会接受您的回答，因为您给了我正确的想法。

于 2012-05-20T18:12:24.327 回答
1

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;
    });

});
于 2013-10-23T01:36:20.163 回答
0

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

//我们从foreach开始，选择页面上所有的ajax按钮 $$('.ajaxbutton').each(function(item,index){

        //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;
        });

    })
于 2014-09-12T18:56:59.470 回答
0

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

首先，postLink 方法需要启用 Javascript。来自Cake 的 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 处理该提交。

于 2013-06-04T08:58:24.520 回答
0

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

<?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'])); ?>
于 2012-03-20T12:50:57.087 回答