CODEWITHSUNDEEP
jqueryajax
TalkingHeads
TalkingHeads

Reputation: 130

Ajax Exponentially increasing, bogging down server with massive requests - JQUERY

I know what the problem is, but I don't know of a solution.

I have 4 files let's say. The index.php file, the ajax.php, the more-ajax.php file file and my custom.js file.

Within my index file I have a <div id="content"></div> element that will load the content from ajax.php file. Now let us say within this ajax.php file I have the following <div id="moreContent"></div> Now within my custom.js file I have the following jquery code includes in both the index.php and ajax.php files:

$(document).ready(function(){

     $("#select-menu").change(function(){
          $("#content").load('ajax.php');
     });

     $("#select-menu-two").change(function(){
          $("#moreContent").load('more-ajax.php');
     });

});

Now, this works but I can see that each call I am making calls the custom.js file over and over again causing the requests to grow exponentially. A solution to this is for me to remove the custom.js from the ajax.php. BUT... then then the second ajax function of #select-menu-two no longer works and I can't load content from more-ajax.php.

Is there a better way of doing this? Can I see an example of the code?

Thanks, SC

Upvotes: 0

Views: 229

Answers (1)

anssi
anssi

Reputation: 739

Avoid adding multiple similar eventhandlers for elements by removing the previously added eventhandler first:

$(document).ready(function(){
     $("#select-menu").off('change');
     $("#select-menu").change(function(){
          $("#content").load('ajax.php');
     });

     $("#select-menu-two").off('change');
     $("#select-menu-two").change(function(){
          $("#moreContent").load('more-ajax.php');
     });

});

Upvotes: 1

Related Questions