ajaxSubmit не является функцией при перезагрузке DOM

#javascript #jquery #forms #ajaxform

#javascript #jquery #формы #ajaxform

Вопрос:

У меня есть этот код ниже.

 $('body').on('submit', '.some-form', function (event) {
    $(this).ajaxSubmit({
        dataType: 'json',
        success: function (data, statusText, xhr, form) {
            var url = 'some/url';

            // Reload the form markup/DOM using the response
            $.ajax({
                dataType: 'html',
                type: 'get',
                url: url
            }).done(function (html) {
                // get markup from url and replace the form markup ...    
            });
        },
        error: function () {
            alert('error');
        }
    });

    return false; 
});

По сути, то, что я здесь делаю, это

отправьте и обработайте форму
получите результаты
в случае успеха получите новую разметку формы со страницы, а затем замените текущую разметку формы. если сбой, показать ошибку

Теперь, поскольку я делегировал событие отправки в тело, не должно быть проблем с обработкой отправки во вновь загруженной разметке формы.

Обработчик функции работает нормально, пока я не увижу эту ошибку

 TypeError: $(...).ajaxSubmit is not a function

error: function () {

Есть идеи, почему это произошло? Это означает, что ajaxSubmit не существует, но я не перезагружал
страницу.

РЕДАКТИРОВАТЬ: Да, я использую плагин формы jquery

1. Вы загрузили плагин формы jQuery?

2. malsup.com/jquery/form

3. Действительно, мои мысли были о том, откуда, черт возьми, берется функция ajaxSubmit.

4. Зачем вам нужен ajaxsubmit? Jquery Ajax может выполнять вышеуказанные действия.

5. @STEEL Потому что мне нужно загружать файлы через Ajax.

Ответ №1:

Мои деньги на следующее:

В вашем запросе на HTML:

// get markup from url and replace the form markup ...

вы загружаете полную страницу, содержащую библиотеку jQuery. Когда вы это сделаете, новый скрипт jQuery в HTML-ответе будет загружен, проанализирован и выполнен, и он перезапишет текущий прототип jQuery, что означает, что jQuery.ajaxSubmit больше не доступен.

Довольно умно, а?

Лучший способ решить эту проблему — просто не запрашивать полную страницу, содержащую скрипт jQuery, вместо этого запрашивать URL-адрес, содержащий только нужную вам структуру DOM, а не полную страницу, включая верхние, нижние колонтитулы, скрипты и т. Д.

1. Мне кажется, что я уже это делаю. Страница, которую я вызываю, не содержит посторонних данных, таких как верхние, нижние колонтитулы или макет.

2. Отлично, но я могу гарантировать вам, что если вы заглянете на вкладку «Сеть», то увидите, что новый скрипт jQuery загружается после первого выполнения вашего запроса. Попробуйте это, console.log($) и console.log($.fn) перед вашим $(this).ajaxSubmit() — в первый раз вы увидите, что ajaxSubmit это метод $.fn объекта, а во второй раз вы этого не увидите, но когда вы console.log($) , это должно выглядеть так же. Это означает, что ваш $.fn был переопределен где-то после первого запроса, но перед вторым запросом, что означает, что $.ajaxSubmit больше не будет доступен.