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.
3 respuestas
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;
});
});
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.
Puedes cancelar la solicitud
var x;//in the outer scope of ajax call
x.abort();
x = $.ajax(params);
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.