I have a website (which uses jquery bbq) where an ajax request is fired off and a div somewhere in the body is replaced when the response is received. Something along the lines of:
var mainContent = $('#main_content');
if ( cache[ url ] ) {
mainContent.fadeOut(duration, function() {
mainContent.html(cache[ url ]);
mainContent.fadeIn(duration, function() {
$(document).trigger("ajax_loaded");
});
});
} else {
mainContent.fadeOut(duration, function() {
var postAjaxCallback = function() {
cache[ url ] = mainContent.html();
$(document).trigger("ajax_loaded");
};
$('#loading').fadeIn(duration, do_ajax(url, duration, postAjaxCallback));
} );
}
function do_ajax(linkVal, duration, callback) {
$.ajax({
type: "GET",
url: linkVal,
dataType: "html",
success: function(page){
var mainContent = $('#main_content');
mainContent.stop(true, true);
if(parseInt(page)!=0)
{
mainContent.html(page);
$('#loading').fadeOut(duration, function() {
mainContent.fadeIn(duration, callback);
} );
}
}
});
}
Now on the whole this works great. The main page is something like:
<html>
<head>
...
</head>
<body>
<div id="main_content");
<p>Hello world!</p>
</div>
/body>
</html>
and the ajax return for #page2 is something like
<p>Hello to a different world!</p>
On #page3 it gets a bit more complicated. The ajax returned is:
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 11,
streetViewControlOptions: true,
center: new google.maps.LatLng(26.737792, 49.878273),
mapTypeId: google.maps.MapTypeId.SATELLITE
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
document.body.appendChild(script);
}
loadScript();
$(document).bind("ajax_loaded", function() {
console.log("map resize called");
google.maps.event.trigger(map, 'resize');
});
</script>
Now the first time #page3 is loaded, everything works fine, the console log fires and the map is resized (needs to be resized because of the grey area problem). Now what I want to happen is that all other pages continue to load normally (either via the ajax calls or from the cache), and that when #page3 is navigated to again (i.e. the #("main_content") is set from the cache, that the resize event fires again. I guess in the simplest terms, I am trying to create an event that I trigger after each ajax page is loaded and I can have a custom $(document).bind("ajax_loaded", function() {}); on each ajax retrieved page that can do any post processing I need. The behaviour currently exhibited is that nothing happens until I load #page3 (and as I mentioned the map is resized and everything is gravy). After that, each page load triggers the bound function and prints to the console (reasonable I guess since I have bound it to $(document), is there something better to do to make it unique to each page?) However, the real pain is that when I try to reload #page3, the maps loads but is not resized (the console still prints) so I have grey areas on the map. Can anyone help me with my limited javascript experience to get the workflow right. To reiterate:
#page1, #page2 etc.) there will be a function that is triggered from the above step that can do setup unique to each ajax page.Thanks for the help!
Edit I have tried using the following:
mainContent.find("script").each(function(i) {
eval($(this).text());
});
instead of triggering the ajax_loaded event but to no avail. Anything else I can try?
I believe everything gets screwed, when the Google Maps API is added second time (reload of #page3. It causes some error and the rest of the script probably stops working. Try to wrap the loading of Google Maps API into condition if (typeof google === 'undefined') { ....
But to be honest, the whole concept might need some refactoring :).