2011-09-23 21 views
6

Tengo problemas para actualizar los elementos que no están listos después de una solicitud de AJAX.documento de jQuery listo después de la solicitud de ajax

Si funciono mi función myFunction() al cargar la página, así:

$(function() { 
myFunction(); 
} 

tengo ningún problema en absoluto. Pero si a continuación, utilizar algo como

$.ajax({ 
     url: this.href, 
     dataType: "script", 
     complete: function(xhr, status) { 
     myFunction(); 
     } 
    }); 

que devuelve $(".myElement").replaceWith("htmlHere"). Los elementos simplemente no están listos cuando se dispara el evento completo. Si establezco un retraso allí, funciona bien de nuevo.

¿Hay algún otro evento que se active aparte de 'completar' cuando el DOM está listo?

Actualización:

Aquí está el código real:

$(function() { 
    $("a.remote").live("click", function(e) {  
    $.ajax({ 
     url: this.href, 
     dataType: "script", 
     success: function(xhr, status) { 
       myFunction(); 
      } 
    }); 

    e.preventDefault(); 
    return false; 
    }); 

    myFunction(); 
}); 

function myFunction() { 
    // Modify the dom in here 
} 

La falta); fue solo un error tipográfico de mi parte.

He intentado usar el éxito ahora en lugar de completar y no parece hacer ninguna diferencia.

+0

lo que haces en caso de éxito de $ .ajax? ¿Hay alguna función que quizás deba mencionar en su pregunta? –

+1

Desea colocar * todo * su código dentro de un controlador '' $ (función() {...}); 'grande. De esa forma nunca tendrás ese tipo de problemas ... Por otro lado, al hacerlo también obtendrás un espacio de nombres, que de todos modos necesitas. –

+0

He actualizado la pregunta original con el código actualizado. – Danny

Respuesta

0
$(function() { 
myFunction(); 
} 

debería ser

$(document).ready(function() { 
myFunction(); 
}); 

O en caso que usted quiere que el Ajax se ejecute en carga. Qué

$(document).ready(function() { 
$.ajax(); 
}); 
+0

'$ (function() {...})' es un atajo para '$ (document) .ready'. Solo falta un ')'. – pimvdb

+0

Aún así, el código anterior parece que estaba colocando el ajax fuera del evento dom ready. –

4

Puede utilizar $(document).ready(function() { ... }); para envolver cualquier cosa que desee disparado cuando el DOM ha cargado. Su solicitud de Ajax podría colocarse dentro del document.ready si desea que esto espere hasta que el dom se haya cargado.

Si desea esperar hasta que el ajax haya cargado su recurso, debe usar ajax.success en lugar de complete.

1

Falta el paréntesis de cierre de la función de contenedor listo para documentos.

$(function() { 
myFunction(); 
}); 

Tenga en cuenta que }); al final.

3

Sólo cambia complete:-success: en su llamada $.ajax():

$.ajax({ 
     url: this.href, 
     dataType: "script", 
     success: function(xhr, status) { 
     //make your DOM changes here 
     myFunction(); 
     } 
}); 

La función success se ejecutará una vez que la petición AJAX recibe una respuesta satisfactoria. Así que realice los cambios DOM dentro de esa función y luego ejecute myFunction().

Editar
usted parece estar tratando de hacer el DOM cambia al utilizar su myFunction(). Pero si no inserta primero el HTML recibido en la respuesta AJAX en el DOM, entonces no habrá nada para modificar myFunction().Si esto es realmente lo que está pasando, entonces usted tiene dos opciones:

  1. inserte la respuesta HTML en el DOM, a continuación, llamar myFunction() (y todo esto debe suceder dentro de la función de devolución de llamada success).
  2. Pase la respuesta AJAX a myFunction() como argumento, para que myFunction() pueda manejar la inserción del DOM y luego realice la modificación necesaria.
+0

He intentado esto pero no parece haber ninguna diferencia. – Danny

+0

Por favor, vea la edición de mi respuesta. Avísame si eso ayuda. De lo contrario, aclare dónde inserta exactamente el código HTML de la respuesta AJAX en el DOM. – maxedison

3

He configurado un jsfiddle según su código, y parece estar funcionando.

Este es el código actual:

$(function() { 
    $("a.remote").live("click", function(e) {  
    $.ajax({ 
     url: this.href, 
     dataType: "script", 
     success: function(xhr, status) { 
       myFunction(); 
      } 
    }); 

    e.preventDefault(); 
    return false; 
    }); 

}); 

function myFunction() { 
    $("span").replaceWith("<p>test</p>"); 
} 

Y al que sustituye etiqueta span con un párrafo. Por favor verifíquelo y compárelo con su código. Si es lo mismo, entonces su problema en otro lugar que no sea esta función (¿quizás en myFunction?).

+1

+1 por hacer un trabajo para reproducir el problema, lo cual es ingrato cuando no hay respuesta. – kovacsbv

1

Hay un evento que se desencadena después de cada llamada de Ajax. Se llama ajaxComplete.

$(document).ajaxComplete(function() { 
    $(".log").text("Triggered ajaxComplete handler."); 
}); 

Por lo que puede

function Init(){ 
    // stuff here 
} 

$(document).ready(function() 
    Init(); 
}); 
$(document).ajaxComplete(function() 
    Init(); 
}); 
Cuestiones relacionadas