AJAX: отправка формы без обновления страницы работает только один раз

Question

AJAX: отправка формы без обновления страницы работает только один раз

Я использую AJAX, чтобы отправить форму за кулисами, не обновляя страницу. Проблема, с которой я сталкиваюсь, я могу только отправить форму один раз. После того как я отправлю его один раз, функция on ('submit') больше не работает, и я не получаю никаких ошибок. Это полностью нарушает цель использования AJAX для отправки формы: /

           $(document).on('submit', '#myForm', function(e) {
                $.post('mail.php', $(this).serialize(), function (data) {
                    //SUCCESS
                    $('.successORfail').html(data);
                     setTimeout(function(){
                      $(".successORfail").fadeOut("slow", function() {
                        $(".successORfail").remove();
                      });
                    }, 4500);

                }).error(function() {
                    alert("Fatal Error: mail.php not found!");
                });
                e.preventDefault();
            });

Мне было интересно, если кто-то столкнулся с подобной проблемой или знает, как это решить? Я хотел бы иметь возможность отправлять форму несколько раз, внося изменения в входные значения формы после каждой отправки, если это необходимо.

Спасибо заранее

1

добавлено 09 Январь 2013 в 01:47 автор AnchovyLegend

Просмотры: 3

источник

nl ja de kk uz tr

Почему вы хотите кэшировать представление post ?

добавлено 09 Январь 2013 в 02:13, автор Blazemonger, источник

У вас проблема с кешированием! Попробуйте установить cache на false , как указано здесь: api.jquery.com/jQuery.ajax Также отключите кеширование на сервере.

добавлено 09 Январь 2013 в 01:49, автор asawyer, источник

5 ответы

Видеокурс "Создание приложений для Android"

Получи множество видеоуроков по Android сейчас

Вы уверены, что запрос AJAX не происходит? Похоже, вы удаляете элемент .successORfail со страницы, и, следовательно, нет ничего, чтобы добавить контент для последующих вызовов.

Проверьте свою консоль, и вы, вероятно, заметите, что вызов ajax происходит каждый раз.

Попробуйте изменить setTimeout на это:

var msgEl = $(".successORfail");
setTimeout(function() {
    msgEl.fadeOut("slow", function() {
        msgEl.empty().show();
    });
}, 4500);

2

добавлено 09 Январь 2013 в 01:51 автор Stephen

источник

+1 Спасибо за ответ. Это отлично поработало. Тем не менее, я использовал ваш предыдущий код перед редактированием. Ваш новый код выглядит как сложная версия.

добавлено 09 Январь 2013 в 01:57, автор AnchovyLegend, источник

@MHZ. Причина редактирования заключалась в том, чтобы навязать ответу некоторые лучшие практики. :) Каждый раз, когда вы вызываете $ (". SuccessORfail") , jQuery должен проходить ваш DOM и находить его, что может очень медленно с большой страницей. Хранение объекта jQuery и повторное использование его намного эффективнее, тем более, что вы используете селектор классов.

добавлено 09 Январь 2013 в 02:39, автор Stephen, источник

Видеокурс по Java для начинающих

Получи видеокурс по Java для начинающих с упражнениями

Мини-курс по Angular и NgRx

16 видео-уроков

Система управления ссылками ReDirector 3.0

Автор: Евгений Попов

Инструменты успешного делегирования

Автор: Евгений Попов

автор MrCode · Answer 1 · 2013-01-09T01:55Z

Вместо удаления элемента просто .hide() , чтобы в следующий раз его можно было заселить. Вам понадобится .show() каждый раз.

       $(document).on('submit', '#myForm', function(e) {
            $.post('mail.php', $(this).serialize(), function (data) {
                //SUCCESS
                $('.successORfail').html(data).show(); //<-- show

                 setTimeout(function(){
                  $(".successORfail").fadeOut("slow", function() {
                    $(this).hide(); //<-- hide
                  });
                }, 4500);

            }).error(function() {
                alert("Fatal Error: mail.php not found!");
            });
            e.preventDefault();
        });

Также в функции fadeOut() вы можете получить доступ к элементу с помощью $ (this) вместо повторного выбора его на основе имени класса.

автор Anthony Grist · Answer 2 · 2013-01-09T01:51Z

Ваш обработчик события успеха:

$('.successORfail').html(data);
setTimeout(function() {
  $(".successORfail").fadeOut("slow", function() {
    $(".successORfail").remove();
  });
}, 4500);

устанавливает содержимое в элементе ( .successORfail ), затем удаление этого элемента. В следующий раз, когда вы отправите форму, получите успешный ответ, и эта функция будет выполнена, элемент больше не существует, чтобы установить контент, чтобы вы не увидели ничего изменения.

автор Gordon Freeman · Answer 3 · 2013-01-09T01:51Z

Похоже, вы добавили результат в $ ('. SuccessORfail'). Html (data); и удалите его. Выньте следующее, и он должен работать несколько раз ...

$('.successORfail').remove();

Без этого элемента изменение невозможно.

автор FibreFoX · Answer 4 · 2013-01-09T01:51Z

Можете ли вы добавить HTML-фрагмент? Его трудно помочь без знания вашей html-структуры, потому что если вы заменяете форму через $ ('. SuccessORfail'). Html (data); слушатель не переустанавливается в форму. Вы также должны вернуть FALSE, потому что данные формы отправляются через javascript.