Reputation: 776
Ok, I'll put my code:
$("#html_contenido").load("../../jsp/comun/contenedor_operativa.html" ,function(){
$("#html_publicidad_reservar").load("../../html/pub/publicidad_reserva/publicidad_reservar_fr.html", function(){
alert($("#html_publicidad_reservar").html());
});
});
alert($("#html_publicidad_reservar").html());
The first alert shows what publicidad_reservar_fr.html()
has inside, but the second alert doesn't show it, so in the webpage nothing appears inside #html_publicidad_reservar
Can anyone tell me what's wrong with this code?
Upvotes: 2
Views: 132
Reputation: 186742
.load
uses ajax, which by default is asynchronous, so the first alert
shows it AFTER the html loads, while the second alert runs before the first alert and at that time, nothing is .load
ed yet.
Timeline is this:
.load
and executes it.alert
fires because .load
from #1 is still happeningcontenedor_operativa.html
is loaded. .load
happens.load
happens, the first alert in the source code happensWhat this means is, that you should put your code inside of where the first alert
in the source code is, otherwise you're operating on non-loaded elements.
You can do asynch:false
but that kills the whole purpose of using XHR/"Ajax"
Upvotes: 1
Reputation: 318728
The second alert executes while the AsynchronousJAX is still running. So the element is still empty. If you need to run code after it has been loaded, do it in your inner callback where the first alert is located.
Upvotes: 3
Reputation: 3883
second alert
run before the first one because load
function make Ajax
call then run the its call back function so the scenario is
you can check this
Upvotes: 1