jQuery elimina todas las solicitudes $ .ajax del contenido cargado $ .ajax

Question

Estoy creando una página en la que un usuario puede hacer clic en un enlace y $ .ajax cargará el contenido en un contenedor div. El problema es que todos los archivos de origen tienen solicitudes $ .ajax propias, por lo que cuando un usuario hace clic en 2 o más enlaces, comienza a incrementar la cantidad de solicitudes $ .ajax y el contenedor div se desborda con datos. Básicamente, mi objetivo es que el usuario haga clic en un enlace y carga la página solicitada (y comienza la actualización de $ .ajax desde la fuente cargada de ajax). Y cuando hacen clic en otro enlace, borra las viejas solicitudes $ .ajax del contenido cargado con ajax anterior.

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

Puede ver que cuando el usuario hace clic en el enlace con el texto de la clase, enviará una solicitud ajax a una página con más contenido de ajax (es decir, en un intervalo). Entonces necesito borrar los viejos "datos" cuando el usuario hace clic en otro enlace. Incluso llegué a eliminar completamente el elemento padre y volver a crearlo, pero no eliminará las solicitudes $ .ajax de los datos. Cualquier ayuda es apreciada.

javascript jquery ajax bind

2

Ed R 6 jul. 2011 a las 06:27

Answer 1

Para hacer esto, necesita usar setInterval (). Simplemente haga que la var que contiene setInterval sea global, y en la primera página en la que desea cargar el contenido de ajax, use clearInterval (var) para detener las solicitudes ajax anteriores.

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

0

Ed R 7 jul. 2011 a las 03:22

Answer 2

Anule las solicitudes anteriores ... Intente esto ...

       $(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;
            }

Vincula enlaces a una sola función ... Básicamente los estás asignando a su propio AJAX.

1

dpp 6 jul. 2011 a las 03:01

Answer 3

Puedes cancelar la solicitud

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

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

0

Boopathi Rajaa 6 jul. 2011 a las 02:51

jQuery elimina todas las solicitudes $ .ajax del contenido cargado $ .ajax

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript