Как заставить AjaxForm работать с несколькими формами, загруженными с помощью jquery load()?

У меня есть страница с div, которая динамически заполняется с помощью paginator ;-) При инициализации страницы я загружаю в нее первые 10 форм с помощью метода jquery .load().

Что я хотел бы сделать, так это сделать все формы динамически обновляемыми с помощью плагина AjaxForm. Я знаю о серверной части, назовем ее update.asp. Оно работает.

Но есть несколько вопросов:

  1. Как заставить плагин работать в первую очередь, поскольку AjaxForm, кажется, не работает для фирм внутри динамически загружаемого div?

  2. Как идентифицировать и назвать формы? Теперь я использовал ID и имя myForm для всех из них (может быть, поэтому это не работает). Потому что, если я использую имя myForm1, myForm2 и т. д., мне нужно написать 10 функций ajaxForm, которые я использую:

         $('#myForm').ajaxForm({
       beforeSubmit: showLoader,
       success: hideLoader
 });

Затем мне нужно будет сделать это 10 раз, используя myForm1 для myForm10? Должен быть другой путь...

  1. Как заставить AjaxForm работать с еще не загруженными страницами? Я думаю, что это та же проблема, что и 1). Поскольку даже страница 1 загружается динамически, каким-то образом ajaxForm не привязывается к форме.

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

Ваш

Джерри

РЕДАКТИРОВАТЬ: Вот мой загрузчик сейчас ... Он не работает нормально, так как загрузчик никогда не отображается, он исчезает так быстро, что я могу увидеть его, только если я поставлю предупреждение в hideLoader :-(((

      function load(num){
      showLoader2();
      var link='/obdelaneslike.asp?ID=<%=request.QueryString("IDRecept") %>&offset='+ num
       $('#content').load(link, function(){
        hideLoader2();
        $('.ajax-loader').hide();

         $('.myForm').bind("submit", function(event) { 
                   $(this).ajaxForm({

               beforeSubmit: showLoader($(this).find('img.ajax-loader').attr('id')),
           success: hideLoader($(this).find('img.ajax-loader').attr('id'))

           }); 
           return false;
                  }); 

           });

       }

jquery ajaxform
person Jerry2    schedule 12.08.2010    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я постараюсь рассмотреть их по одному, чтобы лучше соответствовать вопросу:

1) Вы можете повторно выполнить привязку, когда вы .load() (или любой другой метод jQuery ajax, который вы используете) или используете плагин, такой как livequery(), например вот повторная привязка (сделайте это в обработчике success):

$("#myDynamicDiv .myForm").ajaxForm({ ...options... });

Или с помощью livequery():

$(".myForm").livequery(function() { $(this).ajaxForm({ ...options... }); });

2) Используйте здесь класс вместо идентификаторов, например: class="myForm" всякий раз, когда вы хотите обрабатывать такие пакеты элементов, как этот class, это довольно безопасный способ. Приведенные выше примеры работают с классом, а не с идентификаторами для каждой формы (они могут иметь идентификаторы, просто они не используются). Ваши теги формы будут выглядеть так:

<form class="myForm">

3) Это объясняется теми же решениями в ответе №1 :)

person Nick Craver    schedule 12.08.2010
comment
Привет снова и снова, спасибо за вашу помощь... Прямо перед вашим ответом я попробовал еще одну вещь: $('#myForm').live(submit, function(event) { $(this).ajaxSubmit({ ... ... и это РАБОТАЕТ. Спасибо за совет не использовать идентификаторы. Это неправильно, форма имеет одинаковые идентификаторы, хотя она работает. Мне просто интересно, в чем основная разница между моим живым (отправить) и вашим живым запросом? - person Jerry2; 12.08.2010
comment
@ Jerry2 - Вы просто прикрепляете форму ajax до завершения действия отправки ... это работает, но ваш beforeSend может быть затронут, так как он будет сериализовать данные в неподходящее время IIRC. Я бы определенно избегал нескольких идентификаторов, хотя они могут вызвать другие проблемы... вы можете придерживаться того, что у вас есть, просто используйте классы и $('.myForm').live() :) - person Nick Craver; 12.08.2010
comment
Итак, ваше решение livequery лучше использовать в этой ситуации? - person Jerry2; 12.08.2010
comment
@ Jerry2 - это универсальное решение, оптимальный способ сделать это - выполнить привязку после выполнения вашей загрузки в обратном вызове/обработчике success. Если вы не можете, .livequery() - достойный запасной вариант :) - person Nick Craver; 12.08.2010
comment
Я могу связать после того, как выполню нагрузку, да. Итак, после каждой загрузки я использую привязку для форм, а не live? - person Jerry2; 12.08.2010
comment
Что происходит со старыми формами, которые исчезают, они автоматически развязываются? - person Jerry2; 12.08.2010
comment
@ Jerry2 - Как вы загружаете контент? Если вы вызовете .empty() перед .load(), все будет отвязано соответствующим образом :) - person Nick Craver; 12.08.2010
comment
Я отредактировал свой пост, чтобы показать весь загрузчик. Он загружает div содержимого с новыми данными, имеющими 3 формы, и привязывает AjaxForm к новым загруженным формам. Моя проблема в том, что загрузчик никогда не отображается. Я пробовал с предупреждением перед скрытием (), а затем оно отображается. Поэтому я думаю, что он не отображается, потому что он не ждет, пока форма будет отправлена, но я правильно использовал обратный вызов успеха ;-( - person Jerry2; 12.08.2010
comment
Также в первый раз, когда я нажимаю «Отправить» в форме, это не работает. Со второго раза работает :-( - person Jerry2; 12.08.2010

arrow_upward
1
arrow_downward

Значения ID уникальны для одного элемента DOM. Таким образом, вам нужно будет дать каждой форме новый идентификатор, поэтому, если у вас есть три формы, вы можете назвать их так:

<form name="formone" id="formone"...
<form name="formtwo" id="formtwo"...
<form name="formthree" id="formthree"...

Теперь вы должны создать экземпляры вашего запроса ajax следующим образом:

     $('#formone, #formtwo, #formthree').ajaxForm({
       beforeSubmit: showLoader,
       success: hideLoader
     });
person SimonDowdles    schedule 12.08.2010
comment
В качестве альтернативы все формы могут иметь один и тот же CLASS, например .myform, а затем вы привязываете событие ajax к классу, например: $('.myform').ajaxForm... - person SimonDowdles; 12.08.2010
comment
Спасибо! Это не избавляет меня от необходимости делать живую привязку (однако решение Ника делает). - person Jerry2; 12.08.2010