javascript - Problem accessing the content of a div when that content came from an Ajax call -
here's simple prototype example.
all is, on window load, ajax call sticks html div.
<html> <head> <script type="text/javascript" src="scriptaculous/lib/prototype.js"></script> <script type="text/javascript"> event.observe(window, 'load', function(){ new ajax.request('get-table.php', { method: 'get', onsuccess: function(response){ $('content').innerhtml = response.responsetext; //at call, div has html in click1(); }, onfailure: function(){ alert('fail!'); } }); //at call, div empty click1(); }); function click1(){if($('content').innerhtml){alert('found content');}else{alert('empty div');}} </script> </head> <body><div id="content"></div></body> </html> the thing that's confusing context in prototype understands div has stuff in it.
if @ onsuccess part of ajax call, you'll see @ point $('content').innerhtml has stuff in it.
however when check $('content').innerhtml right after ajax call, appears empty.
this has fundamental misunderstanding on part. care explain me?
edit
want clarify something. realize ajax call asynchronous.
here's actual order things being executed , why it's confusing me:
- the page loads.
- the ajax request get-table.php made.
- the call click1() inside onsuccess happens. see alert div has content.
- the call click1() after ajax call happens. see alert div empty.
so it's code executing in order it's written dom not updating in same order.
edit 2 short answer putting code in onsuccess correct place.
another case consider 1 ajax call , ajax call onsuccess of first call this:
new ajax.request('foo.php',{ method: 'get', onsuccess: function(response){ doanotherajaxcall(); } }); function doanotherajaxcall(){ new ajax.request('foo.php',{ method: 'get', onsuccess: function(response){ //anything needs happen after call doanotherajaxcall() above //needs happen here! } }); } });
the first letter of ajax stands "asynchronous". means ajax call performed in background, i.e. ajax request call immediately returns. means code after executed before onsuccess handler gets called (and before ajax request has finished).
taking account edited question: in browsers (e.g. firefox), alert boxes not modal might think. asynchronous code may pop alert box if 1 open. in case, newer alert box (the 1 asynchronous code) gets displayed on top of older one. creates illusion asynchronous code got executed first.
Comments
Post a Comment