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が必要です（ハードコーディングするか、フォームから取得できます。これは、常にcakephpForm->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

ただのアイデア、それをテストしていません：

<?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 に答える
0

現在の解決策に関するいくつかの問題...

何よりもまず、postLinkメソッドではJavascriptを有効にする必要があります。Cakeのドコから：「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

以前の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 に答える