0

PHP/JavaScript で開発されたこの小さなタブ付きシステムがあります。

フォーム送信の場合は、JQuery 関数を「submit」イベントにバインドして、Ajax クエリをサーバーに送信し、ページのリロードを回避します (そして他のタブが失われます)。すべてのフォームに対して 1 つの関数をコーディングしましたが、それらが同じであることに気付きました (入力を受け取り、Ajax クエリを送信し、返されたメッセージを表示します)。そのため、各フォームを定義する引数を持つ一般的な jquery 関数を作成することにしました)。

私はこの機能を持っています:

function submit_search(entity){
        $('#'+entity.name+'_searchform').submit(function(){
            var url = public_path+entity.name+'/search';
            var key = $('#'+entity.name+'_search_key').val();

            $.ajax({
                type: 'POST',
                url: url,
                data: {search_key: key},
                success: entity.submit_search(result)
            }); 

            return false;
    });
}

entityエンティティの名前と実行したい成功関数を持つ JS オブジェクトはどこにありますか。この関数は、メイン ページが読み込まれるときに 1 回読み込まれるスクリプトで記述されています。タブが読み込まれたらsubmit_search()、実際のエンティティを呼び出すだけです。

これは私には論理的に思えます。しかし、うまくいきません。そして問題は、jquery が要素を認識しないことです。たとえば、 after var key = $('#'+entity.name+'_search_key').val();、キーが null です。

私は何を間違っていますか？

4

3 に答える 3

1

成功関数はリクエストの前に実行されます

  $.ajax({
            type: 'POST',
            url: url,
            data: {search_key: key},
            success: *entity.submit_search(result)*
        })

submit_searchは関数へのポインターを返さないと思うので、submit_searchにポインターを渡す必要があります

  $.ajax({
            type: 'POST',
            url: url,
            data: {search_key: key},
            success: *entity.submit_search*
        })

そして、要素の再認識については、正しいセレクターを作成したことを確認してください。ブラウザのデバッグ/監視ツールで予想されるエクスプレッションをハードコーディングして、問題がないかどうかを確認してください。

$('#EntityNameValue_search_key').length > 0
于 2012-09-28T13:32:58.393 に答える
1

これらすべてを再利用可能な方法で本当に抽象化したい場合は、次のようなものを使用できます。

$(function() {
    $("body").on("submit", "form.ajax", function(event) {
        event.preventDefault();
        var $target = $(event.target);
        var successFunk = $target.attr("data-success") || "success";
        var url = $target.attr("action");
        $.post(url, $target.serializeObject(), {
            success: function(data) {
                window[successFunk](data);
            }
        });
    });
});

serializeObject はこちらから入手できます: http://benalman.com/projects/jquery-misc-plugins/#serializeobject

次に、次のようなフォームを作成します。

<form class="ajax" action="url_i_want_to_post_to" data-success="successCallabck">
  <input type="text" name="search_key"/>
</form>

JSONオブジェクトを{search_key: ${value_of_search_key}}フォームの宛先に投稿し、関数successCallbackまたは戻り時に指定したものを呼び出します。理想的には、にラッチするのではなく、コールバックをより適切にスコープする必要がありますwindow。レジストリを使用することもできますが、それ以外の場合は、FORM_CALLBACKS のような名前のオブジェクトを使用すると、物事が整理されます。

于 2012-09-28T13:40:45.400 に答える
0

このようなものはうまくいくべきではありませんか？

$(document).ready(function() {
    $('#search_form').live("submit", function(event) {
        event.preventDefault();
        // do some magic
    });
});

その場合、いくつかの手動関数を jquery コードと組み合わせる必要があります。

于 2012-09-28T13:24:35.667 に答える