Question

Good day people, I am working on a project where i load pages into divs using jQuery, and each page has its own jQuery scripts, my problem is that the previously loaded scripts are not clearing from DOM and that creates a bigger problem for my project.

For example, I have a set of timers in one page where it auto saves data but when I change the page the timers are still running and messing up the contents.

I manage changing pages like this:

$(document).ready(function() {

   $('li').click(function (event) {

      $('.progressbarone').hide();
      var theitem = this.id;
      //isf ajax to load with addon
      var thefile = "isf_ajax.php?addon="+this.id;
      var progress = '<span class="progressbarone"><img src="'
         + THEMEURL
         + '/gfx/images/progessbar1.gif" width="20" height="16" /></span>';

      // pre actions
      $('.'+ theitem +'_item')
         .append(progress)
         .children(':last')
         .hide()
         .fadeIn(1000);
      $('li').removeClass('active');
      $(this).addClass('active');

      // load the page
      $('#childpage').remove();
      $('#officetable').html('<div id="childpage">loading</div>');
      $('#childpage').load(thefile, function() {

         // after load actions
         $('.progressbarone').fadeOut(2000);
      });
   });
});

As you can see I have two divs, one is called office table that handles the childpage and childpage has the contents for changed pages. however as you can see I have used the remove(); function as well and after that I placed the childpage to officetable and posted the contents of the file, but still it doesn’t remove my previously loaded scripts.

Thank you guys.

Answer 1

Once you append your scripts to the page, those are run. Although you remove the scripts tags from the DOM, the variables will remain. By that I mean timers, functions, any kind of variable declared in your code.

So you might want to clear the previous state which is not desired anymore.

function doTheCleanup(){
    clearTimeout(globalTimerVariable);
    delete someGloablVar;
    //and so on
}