jQuery remove all $.ajax requests from $.ajax loaded content

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 wi开发者_运维百科th 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.

Abort the previous requests... Try this...

       $(function()
       {
            $("a.text").bind('click', Request);
       });

       function Request()
            {
                /* I put try catch so that if the xhr object doesn't exist it won't throw error */
                try{
                xhr.abort();
                }
                catch(e){}
                xhr = null;
                xhr = $.ajax({
                  url: $(this).attr("id") + ".html",
                  cache: false,
                  success: function(data){
                    $("#botscontainer").hide().html(data).fadeIn("slow");
                  }
                }
                return false;
            }

Bind links to just one function... You are basically assigning them to their own AJAX.

You could cancel the request

var x;//in the outer scope of ajax call

x.abort();
x = $.ajax(params);

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;
                });
            });