As we developed our mobile WebApp we came across some minor problems. One of them was that we need a Google Map in one of our pages. But all pages are loaded via AJAX. So the Google Map did not load, we had to refresh it, with custom data which was provided via PHP.
So we used a little trick to execute all of our custom javascript on these pages. We just loaded a javascript file (which we needed anyway) via the $.getScript method from jQuery and put all of our magic javascript code into the callback function of it.
It looks like this:

$.getScript('/minify/?g=countdown', function()
{	
	var similarLocationsVisible = false;
	var userAddress = PowerHour.User.GetGeolocation().lat() + ',' + PowerHour.User.GetGeolocation().lng();
 
	var locationLatLng = new GLatLng(<?php echo $this->locationData->positionX.",".$this->locationData->positionY; ?>);
 
	var map;
        // Add a new Google Map Div at the active page
	$('<div id="divGoogleMap" class="gMaps removeMarginTop">loading Map...</div>').insertBefore('.ui-page-active .googleMapFunctions');
 
	map = PowerHour.GoogleMap.initializeWithMarker(	"divGoogleMap", locationMarker, 16);
        // and so on...
});

And now our Google Map loaded without any problems. STOP. There was another problem. It just worked fine for the first time, if we loaded another page, with other data and a new map, it did not worked.
Why? You are asking. Yeah, we needed a bit of time to realize that too. But in fact is really logic. The Google Map is bond to a div with an unique ID. So there is the problem. If we open one page after another, all of these pages have this ID and stay in our HTML-DOM. So we needed to handle this…
I put that solution in a new blog entry, because I think this is another problem which should be answered on its own. Click HERE to read the solution.

Be Sociable, Share!

• 

Filed under: jQuery, jQuery Mobile, ajax calls, execute javascript, javascript in jQuery Mobile, jQuery Mobile