Question

I am creating a page that a user can click a link and it will $.ajax load the content into a container div. The problem is the source files all have $.ajax requests of there own, so when a user clicks 2 or more links, it begins incrementing the amount of $.ajax requests and the container div is overrun with data. Basically my goal is for the user to click a link and it loads the requested page (and begins $.ajax refreshing from the ajax loaded source). And when they click another link it clears the old $.ajax requests from the previous ajax loaded content.

$(function(){
                $("a.text").click(function(){
                    $("#botscontainer").remove();
                    $("#botsparent").append("<div id=\"botscontainer\"></div>");
                    $.ajax({
                      url: $(this).attr("id") + ".html",
                      cache: false,
                      success: function(data){
                        $("#botscontainer").hide().append(data).fadeIn("slow");
                      }
                    });

                    return false;
                });
            });

You can see when user clicks link with class text, it will send an ajax request to a page with more ajax content (that is on an interval). So I need to clear the old “data” when the user clicks another link. I even went as far as completely removing the parent element and recreating it, but it won’t remove the $.ajax requests from the data. Any help is appreciated.

Answer 1

To do this you need to be using setInterval(). Simply make the var that holds the setInterval global, and on the first page you want to load ajax content into, use clearInterval(var) to stop the previous ajax requests.

$(function(){
                $("a.text").click(function()
                {
                    clearInterval(refreshId2);
                    $.ajax({
                      url: $(this).attr("id") + ".html",
                      cache: false,
                      success: function(data){
                        $("#botscontainer").hide().html(data).fadeIn("slow");
                      }
                    });

                    return false;
                });
            });