4

I have a page with infinite scroll. The ajax functionality works fine for forms existing on the page when it initially loads, but doesn't work for forms loaded from the inifinite scroll ajax feature. I've searched for about 5 days trying to find a answer and haven't yet. Here is a portion of the javascript: 

$("form:not(.member)").submit(function() {
     var status_id = $('#status_id').val(), 
    etc..........

The reason for the :not(.member) part is so the other forms on the page, such as the search form, aren't included in the script.

I've tried 

 $("form:not(.member)").live('submit', function() {

and

 $("form:not(.member)").on('submit', function() {

as well as

 $('body').delegate('submit', 'form:not(.member)', function() {

None of these are working on the forms loaded AFTER the initial page load. Does anyone have any other suggestions? I'm using jquery 1.7.1 by the way. I've also tried 

$("form:not(.member)").bind('submit', function()
jk.
  • 14,365
  • 4
  • 43
  • 58
Mike
  • 65
  • 6
  • 1
    It would be nice to see the code on jsFiddle. – Brian Hoover Jan 22 '12 at 17:48
  • Does the JavaScript console report any errors? What events are fired on the newly-added forms when you try to interact with them? Are you sure they're not filtered by the `:not()` selector? – David Thomas Jan 22 '12 at 17:52
  • No errors David. Just doesn't fire on the newly loaded forms. Works fine on the forms loaded on the initial page load tho. – Mike Jan 22 '12 at 18:08
  • David, after doing a step thru with firebug I found that when the submit button is pressed, the wrong values are being passed to the script, but in the console there are no errors. And this is using $("form:not(.member)").live('submit', function(){. But it still works properly on the initial forms that are loaded. – Mike Jan 22 '12 at 19:32

4 Answers4

4

You are using the event delegation wrong here.

The forms are also loaded dynamically, so they are not included in $("form:not(.member)") when the code runs, they don't exist yet.

Use delegation on a parent element that contains the forms:

$('#formsContainer').on('submit', 'form:not(.member)', function() {
     ...
});
Didier Ghys
  • 30,396
  • 9
  • 75
  • 81
2

Your syntax is just wrong, that's all. Those functions should work. Using .on() as an example:

$('#someListener').on('submit', 'form:not(.member)', function() { ... });

Where someListener is an ancestor element that is NEVER destroyed by the AJAX function. If you're trying to bind to an element that gets destroyed, your listener gets lost as well.

Have to admit, I don't think the 'form:not(".member")' part doesn't look right to me, either. Are you sure that's the correct syntax for not? I'm just taking your word for it here.

There's a better way anyhow: either #someListener is an ancestor that does not have your other forms within (like the search form), or you give this specific kind of form a class. So instead of excluding .member forms, you would TARGET just this kind of form:

$('#someListener').on('submit', '.dynamicForm', function() { ... });

Or, if the Ajax content block (form and all) has a wrapper of some sort, you could add a class to it (say, ".ajaxBlock") and do it this way instead:

$('#someLIstener').on('submit', '.ajaxBlock form', function() { ... });
Greg Pettit
  • 10,749
  • 5
  • 53
  • 72
  • Greg, this may sound stupid but is the someListener an event? Like click or mouseover? – Mike Jan 22 '12 at 18:06
  • Not(".member") works fine for the initial forms and excludes any forms with a class of member. I tried using form.comment but that didn't seem to work out to well for me so I went the NOT route and it works fine. – Mike Jan 22 '12 at 18:12
2

None of the above answers worked. The solution was assigning onclick="function" to all of the commenting forms including the ones already loaded.

Mike
  • 65
  • 6
0
$("#parentContainer").on("submit", "form:not(.member)", function() { // code });
jk.
  • 14,365
  • 4
  • 43
  • 58
The Alpha
  • 143,660
  • 29
  • 287
  • 307