getJSON within ajax call causing infinite loop

Question

I am currently calling external php files and displaying them within specific div. This is all done using the standard jQuery $.ajax call.

However an issue arises when one of the pages being pulled in attempts the following getJSON call, resulting in an infinite loop:

function getContacts() {
  if ($('body.all-contacts').length){
    $.getJSON('assets/data/contacts.json', function(data) {
      var template = $('#contacts-template').html();
      var info = Mustache.to_html(template, data);
      $('.contact-list').html(info);
    });
  }
};

The above function is called as follows:

$(document).ajaxComplete(function(){
....
getContacts();
....
})

I've also tried using ajaxStop() instead of ajaxComplete() but the issue persists.

You're launching an ajax call when an ajax call completes. The infinite loop looks logical. — Denys Séguret
– Denys Séguret, Commented May 17, 2013 at 8:42
During the initial ajax call (to load the external pages) the body class name is updated, upon completion of this I need to trigger the getContacts function as that needs to act on the newly loaded external page. — user2107041
– user2107041, Commented May 17, 2013 at 8:47
Try to use a callback instead of ajaxComplete(). For instance, create a function setUp() that wil load all your external files. Once setUp() is finished, call getContacts(). (create a callback : stackoverflow.com/questions/8516191/jquery-create-callback ) — TCHdvlp
– TCHdvlp, Commented May 17, 2013 at 9:00
Thanks so much everyone, a callback was exactly what was need rather than ajaxComplete! — user2107041
– user2107041, Commented May 17, 2013 at 9:18

Kevin Vermaat · Accepted Answer · 2013-05-17 08:55:46Z

1

The infinite loop seems normal to me. Since you call the function getContacts when the getJSON is completed, getContacts contains the getJSON call so the call will fire again, which will result in another ajaxcomplete callback, which will fire the getContacts function again. etc etc.

To prevent this from happening you can remove the getContacts() in the ajaxcomplete function.

If you wish to keep the infinite loop but with time intervals between every ajax call you can use the javascript function setTimeout. format of function:
setTimeout("javascript function",milliseconds);

answered May 17, 2013 at 8:55

Kevin Vermaat

1026 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2107041 Over a year ago

Thanks Kevin, as mentioned above, the callback was the issue.

LuigiEdlCarno · Accepted Answer · 2013-05-17 08:46:56Z

0

getContacts() should not be called, when a getContacts() call completes.

If you need to call that function, when another one completes, make sure (using if ...) that it is not getContacts() that completed.

answered May 17, 2013 at 8:46

LuigiEdlCarno

2,4152 gold badges22 silver badges37 bronze badges

2 Comments

user2107041 Over a year ago

How do I prevent it being triggered again by the same function? Do i need to avoid firing it only in the event that the last ajax call made was getContacts() ?

LuigiEdlCarno Over a year ago

No. You need to make certain, that once the ajaxcomplete is called, no case can arise where you step into the getContacts section again. For example, you if call xyz() completes and triggers the getContacts() call, you have to make sure that this doesn't trigger xyz(). That goes for any number of chained calls. Good luck.

Collectives™ on Stack Overflow

getJSON within ajax call causing infinite loop

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related