Как передать данные в jquery done()?

Question

У меня есть страница с несколькими записями, и я пытаюсь написать обработчик кликов, чтобы позаботиться о внесении изменений в отдельные записи через пост ajax. Я использую done(), fail() и always() для управления результатами.

Когда возвращается вызов ajax, я хочу внести некоторые обновления в запись, которая была отправлена ​​- например. поместить сохраненное сообщение, снова включить кнопку отправки для этой записи и т. д. - но я не могу этого сделать, если не знаю идентификатор конкретной записи, которая была отправлена.

То, что я хотел бы сделать, это передать идентификатор целевой записи в done(), чтобы код внутри done() мог внести необходимые изменения в запись, которая изначально называлась.

Это мой код, который показывает, что я делаю, но который не будет работать, потому что переменная target_id не имеет значения в этих функциях. Как передать эту переменную вместе с этими функциями?

$("#container").on("click", ".save-button", function(e) { 

    if ($(this).hasClass('disabled')) {return;} 

    var button_html = $(this).html(); 
    $(this).html('Please wait...'); 
    $(this).addClass('disabled'); 

    var target_id = $(this).parents(".record-form").find("#record-id").val(); 

    var form_poster = $.post("user_form_submit.php", target_form.serialize()); 

    form_poster.done(function(response_object) { 

    var result = response_object['result']; 

    if (result=='success') { 
     var alert_area = $("#" + target_id + " .alert-area").html("Record Updated"); 
    } else { 
     var alert_area = $("#" + target_id + " .alert-area").html("Record Not Found"); 
    } 

    }); 

    form_poster.fail(function() { 
    var alert_area = $("#" + target_id + " .alert-area").html("An Error Occurred"); 
    }); 

    form_poster.always(function() { 
    $("#" + target_id + " .save-button").removeClass('disabled'); 
    $("#" + target_id + " .save-button").html(button_html); 
    }); 

}); 

Answer 1

Это должно работать, я думаю, что проблема с id атрибутами, они должны быть уникальными. Вся эта линия:

var target_id = $(this).parents(".record-form").find("#record-id").val(); 

Может быть просто:

var target_id = $("#record-id").val(); 

Но я думаю, у вас есть несколько элементов с идентификатором record-id, вы должны использовать класс вместо этого.

Answer 2

Это выстрел в темноте, как у меня нет никаких средств, чтобы проверить

Просто установите переменную var context в this

$("#container").on("click", ".save-button", function(e) { 
    var context = this; 

    if ($(this).hasClass('disabled')) {return;} 

    this.button_html = $(this).html(); 
    $(this).html('Please wait...'); 
    $(this).addClass('disabled'); 

    this.target_id = $("#record-id").val(); 

    this.form_poster = $.post("user_form_submit.php", target_form.serialize()); 


    this.form_poster.done(function(response_object) { 

    var result = response_object['result']; 

    if (result=='success') { 
     var alert_area = $("#" + context.target_id + " .alert-area").html("Record Updated"); 
    } else { 
     var alert_area = $("#" + context.target_id + " .alert-area").html("Record Not Found"); 
    } 

    }); 

    this.form_poster.fail(function() { 
    var alert_area = $("#" + context.target_id + " .alert-area").html("An Error Occurred"); 
    }); 

    this.form_poster.always(function() { 
    $("#" + context.target_id + " .save-button").removeClass('disabled'); 
    $("#" + context.target_id + " .save-button").html(button_html); 
    }); 

Вот доказательство концепции: jsFiddle

Этот метод вероятно, быстрее, так как вам нужно только позвонить jQuery один раз, чтобы получить target_id

Answer 3

упрощенная версия вашего кода. Вы делаете слишком много бесполезного шаблона.

$("#container").on("click", ".save-button", function(e) { 
    var $saveButton = $(this), 
     $recordForm = $saveButton.closest(".record-form"), 
     $alertArea = $recordForm.find(".alert-area"); 

    $saveButton.addClass('disabled').html('Please wait...'); 

    e.preventDefault(); 

    $.post("user_form_submit.php", $recordForm.serialize()) 
    .done(function(response_object) { 
    var result = response_object['result']; 
    if (result == "success") { 
     $alertArea.html("Record Updated"); 
    } else { 
     $alertArea.html("Record Not Found"); 
    } 
    }) 
    .fail(function() { 
    $alertArea.html("An Error Occurred"); 
    }) 
    .always(function() { 
    $saveButon.removeClass('disabled').html(button_html); 
    }); 
}); 

отмечают, что

• Переменные заданные вами сохранились в муфтах, так что ваши функции обратного вызова может получить доступ к ним (сравните использование $alertArea и $saveButon). В первую очередь вам не нужно «передавать что-либо».
• .record-id класс CSS теперь, вы не можете иметь несколько элементов с одинаковым HMTL ID в документе
• Вы не должны строить селекторы из идентификаторов в любом случае, всегда есть структурный контекст можно использовать (через closest() и find()).
• Используйте preventDefault(), чтобы форма не была отправлена ​​дважды случайно.