Блог

Поэтому, когда кто-то нажимает кнопку Ответить, я пытаюсь открыть всплывающую форму для ввода вашего ответа. Как только форма отправлена, она исчезает до следующего нажатия кнопки Ответить.

Это работает, за исключением того, что после 1-го раза я отправляю информацию дважды. Если я делаю это в третий раз, форма отправляется три раза. По сути, происходит то, что предыдущая форма, похоже, не сбрасывается после того, как я снова ее скрою.

Я проверил этот веб-сайт / Google и попытался использовать reset(), но это не сработало. Ниже приведен код:

 $(document).on('click', '.secretfeed button', function () {
    var message_id = $(this).attr('name');

    $(".comment_box").show();

    $("#m_id").val(message_id);
    var value = document.getElementById("m_id").value;

    $('#comment_form').submit(function (e) {
        e.preventDefault();

        var commentData = $(this).serialize();
        $.post('../../process_comment.php', commentData, processData);

        function processData(data) {
            //$('comment_form').reset()
            $(".comment_box").hide();
            $('#comment_form')[0].reset();

            RefreshFeed();
        }
    });
});
  

Вместо того, чтобы инициализировать функцию отправки при каждом нажатии, переместите ее за пределы функции click . jQuery может создавать его экземпляр для каждого клика.

 $('#comment_form').submit(function (e) {
    e.preventDefault();

    var commentData = $(this).serialize();
    $.post('../../process_comment.php', commentData, processData);

    function processData(data) {
        //$('comment_form').reset()
        $(".comment_box").hide();
        $('#comment_form')[0].reset();

        RefreshFeed();
    }
});

$(document).on('click', '.secretfeed button', function () {
    var message_id = $(this).attr('name');

    $(".comment_box").show();

    $("#m_id").val(message_id);
    var value = $("#m_id").val();
});
  

Альтернативой является отмена привязки функции click перед ее повторным использованием.

Нам нужен многократно используемый способ обработки состояния. Мы сохраним состояние кнопки в логическом значении, которое включается и выключается в зависимости от статуса запроса. Шаблон следующий:

 var isSending = false;

function onSubmit() {
  isSending = true;
  // Send data
}

function onComplete() {
  // done sending data
  isSending = false;
}

if (!isSending) {
  onSubmit();
}

// When data sending is finished:
onComplete();
  

Вышесказанное может быть инкапсулировано более функциональным способом, который использует promises для управления состоянием. (Все функции jQuery AJAX возвращают объект, подобный обещанию):

 function oneAtATimeFunction(promisedFunction) {
  var pendingPromise;
  function reset() { pendingPromise = null; }
  return function() {
    if (pendingPromise) { return pendingPromise; }
    pendingPromise = promisedFunction.apply(promisedFunction, arguments)
      .always(reset);
    return pendingPromise;
  }
}

function submitForm() {
  return $.ajax({
    url:    '/foo',
    method: 'POST',
    data:   { data: 'from form' }
  });
}

$('#submit-button').on('click', oneAtATimeFunction(submitForm));
  

Добавив небольшую подсветку в пользовательский интерфейс, мы можем добавить способ включения и выключения кнопки отправки. Сначала мы определим вспомогательную функцию для обработки состояния включения и выключения:

 function buttonEnable(enabled) {
  $('#submit-button').attr('disabled', !enabled);
}

buttonEnable(false); // disable the button
buttonEnable(true);  // enable the button
  

Собрать все это вместе:

 function onClick() {
  buttonEnable(false);
  return onSubmit()
    .always($.proxy(buttonEnable, null, true));
    // The above is also the same as:
    // .always(function() { buttonEnable(true); });
}

$('#submit-button').on('click', oneAtATimeFunction(onClick));
  

Чтобы увидеть это в действии, вот пример JSBin.