sjtilz8rar
New Member
I have a website (which uses \[code\]jquery bbq\[/code\]) where an ajax request is fired off and a \[code\]div\[/code\] somewhere in the body is replaced when the response is received. Something along the lines of:\[code\]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); } ); } } });}\[/code\]Now on the whole this works great. The main page is something like:\[code\]<html> <head> ... </head> <body> <div id="main_content"); <p>Hello world!</p> </div> /body></html>\[/code\]and the ajax return for \[code\]#page2\[/code\] is something like\[code\]<p>Hello to a different world!</p>\[/code\]On \[code\]#page3\[/code\] it gets a bit more complicated. The ajax returned is:\[code\]<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>\[/code\]Now the first time \[code\]#page3\[/code\] 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 \[code\]#page3\[/code\] is navigated to again (i.e. the \[code\]#("main_content")\[/code\] 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 \[code\]$(document).bind("ajax_loaded", function() {});\[/code\] on each ajax retrieved page that can do any post processing I need.The behaviour currently exhibited is that nothing happens until I load \[code\]#page3\[/code\] (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 \[code\]$(document)\[/code\], is there something better to do to make it unique to each page?) However, the real pain is that when I try to reload \[code\]#page3\[/code\], 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:
- Each ajax load (or load from cache) will trigger some event
- Within each ajax page (\[code\]#page1\[/code\], \[code\]#page2\[/code\] etc.) there will be a function that is triggered from the above step that can do setup unique to each ajax page.