jquery infinite loop in form submit

Question

I've created a custom wordpress plugin that should do the following:

on page load, submits a form
ajax catches it and does some other functions
results are returned

Only problem is that the plugin started redirecting to another page and looping infinitely. I've isolated it to the jquery submit code but I can't figure out what I'm doing wrong. I was hoping you folks could lend a sleep-deprived programmer a hand.

  $('#searchform').submit(function(e) {
     e.preventDefault();
     $.ajax({
        type: 'POST',
         url: '../wp-content/plugins/otwcsl/getStores.php',
         data: $('#searchform').serialize(),
         success: function(response) {
           searchLocations(response);
           $('#searchform').unbind().submit();
         }
     });
   });

It worked fine on my localhost environment but went berserk on the 'live' website. I can't figure out the disconnect but I'm pretty sure the problem lies here. Thanks in advance!

UPDATE: I've cut everything down until it looks like this:

$('#searchform').submit(function(e) {
    return false;
}

It's stopped looping but it redirects from http://www.mypage.com/index.php/locations/ to http://www.mypage.com/index.php/?s=. I can't figure it out since it's clearly not ajax that's affecting it.

FINAL UPDATE: I've finally fixed the problem. I removed all 'submit' functions and used a button click instead. I used the answer found here in option 3. I'm guessing there was some previous script that was severely messing with the form. Unfortunately, it's not an option for me to go disabling the scripts to find the root cause at this point. Thanks everyone for helping me troubleshoot it!

Have you checked the other page to see if it's redirecting back to your original page? — Enijar, Dec 22 '13 at 20:25
What happens when you remove the ajax call totally? Does it redirect? — Koen Peters, Dec 22 '13 at 20:28
Well, duh! You're triggering the submit handler every time the ajax call completes, starting the same function over and over again. What did you expect. — adeneo, Dec 22 '13 at 20:29
I've tried removing the entire ajax call but it still keeps redirecting to another page. It's stopped looping that redirect though. — stefanie, Dec 23 '13 at 03:56

Koen Peters · Answer 1 · 2013-12-22T20:31:43.483

0

You have this code in the ajax call:

$('#searchform').unbind().submit();

In it you submit the form again. I guess that is what's going wrong.

edited Dec 22 '13 at 20:31

answered Dec 22 '13 at 20:25

Koen Peters

12,798
6
36
59

I've tried removing it but it's still looping a redirect though – stefanie Dec 23 '13 at 03:51
Try deleting the ajax call and replacing it with a `return false;`. If the looping stops then leave the return false and place the ajax call back. – Koen Peters Dec 23 '13 at 09:03
I deleted the ajax call and replaced with a return false. It still redirects. It's really weird. – stefanie Dec 23 '13 at 16:31
Are you sure this is all the code you're using? Please create a jsfiddle so that we can see what is happening exactly – Koen Peters Dec 23 '13 at 17:31

Rami.Q · Answer 2 · 2013-12-23T10:53:35.707

infinite loop because you submit the form again if submit is seccussfull:

success: function(response) {
           searchLocations(response);
           $('#searchform').unbind().submit();
         }

why submit again on success? remove it and it will work!

it should be:

success: function(response) {
               searchLocations(response);
             }

UPDATE:

your submit function should be like this:

var _form = $('#searchform');
_form.unbind();
_form.submit(function(e) {
     e.preventDefault();
     $.ajax({
         type: "POST",
         url: "../wp-content/plugins/otwcsl/getStores.php",
         data: _form.serialize(),
         success: function(response) {
           //searchLocations(response); // check this method may be its submit the form again
         }
     });

});

score 0 · Answer 3 · answered Dec 23 '13 at 12:09

0

Check the response from the server and set the propper datatype in the ajax call.

answered Dec 23 '13 at 12:09

Robbie Bardijn

483
2
6

I'm sure this has something to do with the server side. – Robbie Bardijn Dec 23 '13 at 12:10
So you have a redirect going on on the server Side, or Some .htaccess. Such looping behaviours are mostly caused by the backend, it might be that there is Some php execution in a loop. Or a route which responds to another route wich than responds back with the same route – Robbie Bardijn Dec 23 '13 at 17:28

score 0 · Answer 4 · answered Dec 23 '13 at 12:13

0

you can debug your ajax by using:

$.ajax({
  url: $form.attr("action"),
  type: $form.attr("method"),
  data: $form.serializeArray()
}).fail(function(jqXHR, textStatus, errorThrown) {
  console.log(jqXHR, textStatus, errorThrown);
}).done(function(data, textStatus, jqXHR) {
  console.log(data, textStatus, jqXHR);
});

answered Dec 23 '13 at 12:13

Robbie Bardijn

483
2
6

It succeeds but outputs a totally different page (see update to question) – stefanie Dec 23 '13 at 17:20

jquery infinite loop in form submit

4 Answers4