Problem with .load() in jquery

Question

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?

do you have any javascript errors ?

BentOnCoding
– BentOnCoding

2011-07-06 16:26:29 +00:00
Commented Jul 6, 2011 at 16:26 — BentOnCoding
– BentOnCoding, Commented Jul 6, 2011 at 16:26
yes, but they come from another page

elvenbyte
– elvenbyte

2011-07-07 07:09:32 +00:00
Commented Jul 7, 2011 at 7:09 — elvenbyte
– elvenbyte, Commented Jul 7, 2011 at 7:09

ThiefMaster · Accepted Answer · 2011-07-06 16:24:40Z

3

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.

answered Jul 6, 2011 at 16:24

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

elvenbyte Over a year ago

Yes, ok everybody, but the fact is that it seems that #html_contenido is filled up with the code from the .load() instruction, as seen with the first alert (it throws the code from the .load() ), but when I see the code in the webpage, the code is not loaded. This is the real problem.

ThiefMaster Over a year ago

If you use "View Source" it shows the initial source, not the modified source. You need to use e.g. Firebug to see the current source.

Amir Ismail · Accepted Answer · 2011-07-06 16:24:19Z

1

second alert run before the first one because load function make Ajax call then run the its call back function so the scenario is

Load function
second alert
Finish Load
run callback

you can check this

answered Jul 6, 2011 at 16:24

Amir Ismail

3,8713 gold badges22 silver badges35 bronze badges

Comments

meder omuraliev · Accepted Answer · 2011-07-06 16:25:05Z

.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 .loaded yet.

Timeline is this:

Javascript reads the .load and executes it.
The second alert fires because .load from #1 is still happening
contenedor_operativa.html is loaded.
Since #3 happened and it has loaded, the next .load happens
After the nested .load happens, the first alert in the source code happens

What 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"

Collectives™ on Stack Overflow

Problem with .load() in jquery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related