What I'm trying to achieve is to modify certain page sections with the data pulled from external source (via AJAX jsonp) as soon as a given section loaded or just after the AJAX call is completed (in case the section had loaded before the AJAX was completed and the data became available).
Example page section (domain1.com) - there might be more than one section on the page:
<div class="mySections" id="section1">
Some content
</div>
<script type="text/javascript">
sectionRewrite("section1");
</script>
Rest of the code (domain1.com):
myAJAXcomplete = "";
$(document).ajaxComplete(function(){
myAJAXcomplete = true;
});
var mySectionData=new Array();
function sectionRewrite(elementID){
if (myAJAXcomplete == true) {
$(".mySections#"+elementID).html(mySectionData[elementID]);
} else {
$(document).ajaxComplete(function(){
$(".mySections#"+elementID).html(mySectionData[elementID]);
});
}
}
$.ajax({
data: 'some_data=' + some_data,
url: "http://domain2.com/somefile.php",
dataType: 'jsonp',
success: function (data) {
for (var key in data) {
mySectionData[key]=data[key];
}
}
});
From what I read, it's not possible to have the ajaxComplete working for the AJAX call with the external source (and I got it working for the scenario where the url was on domain1.com) so I'm looking for some alternatives that would work in a similar way: with external data source and quick section overwrite.
I could think of calling the sectionRewrite function every second if the myAJAXcomplete != true but perhaps you can advise something smarter/cleaner?
Thanks for your help.
EDIT: Live code: http://technow.pl/example-AJAX.php This code doesn't overwrite the content of the sections and doesn't call alert() (which I added to the ajaxComplete()). As soon as I change the AJAX url to local one file, everything works fine.