Изменение DOM на основе результата AJAX с помощью jQuery

Question

Я не уверен в лучшей практике для изменения DOM на основе ответа ajax. Я постараюсь позволить коду говорить, потому что это трудно объяснить.

// 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 получает Эвальд и это означает, что «Си-Би» выходит за рамки.

Что я сделал до сих пор создать несколько вспомогательных функций:

var target = undefined; 

function setTarget(val) { 
    target = val; 
} 

function getTarget() { 
    return target; 
} 

И что превращает первый фрагмент кода в этом:

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

Затем на ответ сервера I вызовите getTarget, где мне нужно. Это кажется хакерским ... Любые предложения?

Answer 1

Непонятно, что вы на самом деле пытаетесь сделать do, но я чувствую, что вы хотите посмотреть на параметр успеха для этого вызова AJAX. Функция обратного вызова успеха должна выполняться в родительской области и делать то, что вы ищете.

См. «Успех» на this page in the jQuery docs.

Answer 2

Итак, что вы пытаетесь сделать, это получить форму для отправки контента через ajax всякий раз, когда пользователь проверяет/снимает флажок? И поскольку есть несколько флажков, вам нужно выяснить, какой из них вызвал отправку, так что вы можете изменить его значение на все, что хранится на сервере?

Если вы отправляете всю форму каждый раз, почему бы вам не ответить со всеми значениями флажков, а затем изменить каждый из них? Если нет, попросите сервер ответить с идентификатором и значением флажка, а затем используйте jquery, чтобы установить флажок с этим идентификатором, а затем изменить его значение.

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

});