jQueryでAJAX結果に基づいてDOMを変更する

Question

ajaxレスポンスに基づいてDOMを変更するためのベストプラクティスは不明です。説明するのは難しいので、コードで話してみましょう。

// page has multiple checkboxes 
$("input[type='checkbox']").live('click', function { 
    var cb = $(this); // for the sake of discussion i need this variable to be in scope 
    $("form").ajaxSubmit({ dataType: "script" }); 
} 

サーバーはバック応答を送信し、jsはeval'dますと、それは「CB」は適用範囲外であることを意味します。私はこれまで何をやったか

は、ヘルパー関数をいくつ作成することです：

var target = undefined; 

function setTarget(val) { 
    target = val; 
} 

function getTarget() { 
    return target; 
} 

をそして、それは、このにコードの最初のスニペットをオン：

サーバの応答Iに続いて

// page has multiple checkboxes 
$("input[type='checkbox']").live('click', function { 
    setTarget($(this)); 
    $("form").ajaxSubmit({ dataType: "script" }); 
} 

私が必要とするgetTargetを呼び出します。これはハッキーなようだ...どんな提案？

Answer 1

は実際に何をしようとしているのかはっきりしていませんが、を実行していますが、そのAJAX呼び出しのsuccessパラメータを調べたいと思っているようです。成功コールバック関数は親スコープで実行し、探しているものを実行する必要があります。

this page in the jQuery docsの「成功」を参照してください。

Answer 2

あなたがしようとしているのは、ユーザーがチェックボックスをオンまたはオフにするたびに、ajax経由でコンテンツを送信するフォームを取得することです。いくつかのチェックボックスがあるので、どのサブミットが送信をトリガーしたかを調べる必要があります。その値をサーバーに保存されているものに変更できますか？

毎回フォーム全体を送信する場合は、すべてのチェックボックスの値を返信してから、それぞれを変更してください。そうでない場合は、サーバーにIDとチェックボックスの値を返信させ、jqueryを使用してそのIDのチェックボックスを探し、値を変更します。

Answer 3

について方法：データ型のオプションは、スクリプトの場合

jQuery(function($) { 

    // give it scope here so that the callback can modify it 
    var cb, 
     cbs = $('input[type="checkbox"]'); 

    cbs.live('click', function { 
     // taking away var uses the most recent scope 
     cb = $(this); 

     // disable checkboxes until response comes back so other ones can't be made 
     cbs.attr('disabled', 'true'); // 'true' (html5) or 'disabled' (xhtml) 

     // unless you are using 'script' for something else, it's best to use 
     // a callback instead 
     $('form').ajaxSubmit({ 
      success : function(response) { 
       // now you can modify cb here 
       cb.remove(); // or whatever you want 

       // and re-enable the checkboxes 
       cbs.removeAttr('disabled'); 
      } 
     }); 
    } 

});