Question

I am trying to load different pages into div when user clicks on links.

Here is my index.html code:

 <li><a href="javascript:loadContent('#content_main','cardinal.jsp')">SMS</a></li>
 <li><a href="javascript:loadContent('#content_main','paypoint.jsp')">Paypoint</a></li>

And loadContent function looks like this:

function loadContent(elementSelector, sourceUrl) {
$(""+elementSelector+"").empty();
$(""+elementSelector+"").load("http://localhost:7070/ning/"+sourceUrl+"");
}

My cardinal.jsp looks like this:

$(document).ready(function() {
    setInterval(function(){
    alert("Cardinal");
},5000);
});

And paypoint.jsp has this code:

$(document).ready(function() {
    setInterval(function(){
    alert("paypoint");
},5000);
});

I first click the link SMS. This loads the cardinal.jsp and displays the alertbox(cardinal) every 5 seconds. Now, when i click paypoint link, i am supposed to run the paypoint.jsp page only. But, instead, it seems like it appends the paypoint.jsp contents to div (which already has contents of cardinal.jsp). This results in both the alertboxes being displayed alternatively.

As you can see , i have tried to empty the contents of div before loading the new page. But, it still doesn’t work. What am i doing wrong here?

Thanks for the help in advance

Answer 1

Interval doesn’t disappear if you remove the code that set it. If you want to remove it do something like:

var interval = setInterval(function() {
  alert("paypoint");
}, 5000);

clearInterval(interval);

Remember that you’re not loading a totally new page but new content to existing page.