G Maps - Cache JQM or Android?
Android 3.2
jQuery Mobile 1.1.1
I have a shipment tracking program that provides two location links (Origin and Destination), which bring up a Google map in a separate page in a separate file.
The user enters up to 5 tracking numbers, and sends the data to the top of the page where it is processed and the results displayed. The location links are within this displayed data.
The map comes up just fine, and I am able to hit the back button and return to the form results - undoubtedly, because they have been cached. I just don't know whether it is the browser or jQuery doing the caching. At any rate, I realize this needs to be done differently (returning to the result page), but the point is that the page is there and the links are available.
The problem comes in when I select one of the links again ... the appropriate map will come up, meaning it has gone out and pulled the map file and given it new data. However, once the map is up, it disappears and goes back to the calling program, which now has no data and the original form appears.
I'm at a loss to figure out a solution, because I do not understand the problem. Why would the map come up, then revert back to the previous page?
If you care to wade through it, here is the code (Sorry, a lot of PHP here):
<!DOCTYPE html>
<html>
<head>
<title>Mobile Track</title>
<? include('include/MobileHead.inc'); ?>
======== MOBILEHEAD.INC FILE ========
<?
$IncludeDir = $_SERVER['DOCUMENT_ROOT']."/m/include/";
$MainDir = "http://www.MyDomain.com/m/";
$_SESSION[IncludeDir] = $IncludeDir;
$_SESSION[MainDir] = $MainDir;
echo('
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="'.$MainDir.'css/mobile.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>');
include($IncludeDir.'config.inc'); // must be before jqm
echo('
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>');
?>
======== CONFIG.INC FILE ========
<?PHP
if(empty($Ajax)){$Ajax = "false";}
?>
<script type="text/javascript">
$(document).bind("mobileinit", function()
{
$.mobile.ajaxEnabled = "<?PHP echo($Ajax); ?>";
$.mobile.pageLoadErrorMessage = "Under Construction";
$.mobile.defaultPageTransition = "slide";
<?PHP if($Ajax != "true"){echo('$.mobile.pushStateEnabled = "false";'."\n");} ?>
});
</script>
======== CLOSE HEAD ========
</head>
<body>
<div data-role="page" id="Tracking">
<?PHP
include($IncludeDir.'MobileHeader.inc'); // This is just a standard JQM header
if(empty($_REQUEST['TrackNumber']))
{
#===============================================#
# Data Form #
#===============================================#
unset($_SESSION['Track']); // clear previous data
echo('
<div data-role="content">
<div class="GrayBoxHead">Shipment Tracking'); if($_SESSION[LoggedIn]){echo(' +');} echo('</div>
<div class="GrayBox" style="padding:5px;">Enter up to 5 tracking numbers below</div>
<div>
<form id="MobileTrack" method="post" action="'.$_SERVER[PHP_SELF].'">
<div><input type="number" id="Pro1" name="TrackNumber[]" /></div>
<div><input type="number" id="Pro2" name="TrackNumber[]" /></div>
<div><input type="number" id="Pro3" name="TrackNumber[]" /></div>
<div><input type="number" id="Pro4" name="TrackNumber[]" /></div>
<div><input type="number" id="Pro5" name="TrackNumber[]" /></div>
<input type="hidden" name="From" value="Mobile" />
<div data-role="fieldcontain"><input data-theme="b" type="submit" name="submit" value="Enter" /></div>
</form>
</div>
</div>
');
}
else
{
if($CorrectData == true) // Form has been validated and processed
{
include('../include/deliveryinfo.inc'); // Creates 2 arrays - content1(main data) and content2 (detail table) for each value searched - stored in session[Track]
if($c > 1) // $c tracks number of entries
{
#===============================================#
# Now we're going to create a navbar for the track number #
# selections #
#===============================================#
echo('
<div data-role="navbar" class="TabBar">
<ul>');
for($x=0;$x < $c;$x++)
{
if($x == 0) // Make the first selection active
{
echo('<li><a class="ui-btn-active ui-state-persist" data-href="#'.$Track[num][$x].'" data-theme="a">'.$Track[num][$x].'</a></li>');
}
else
{
echo('<li><a data-href="#'.$Track[num][$x].'" data-theme="a">'.$Track[num][$x].'</a></li>');
}
}
}
echo('
</ul>
</div>
#===============================================#
# Now display the data #
#===============================================#
<div data-role="content">
<div class="GrayBoxHead">Shipment Tracking'); if($_SESSION[LoggedIn]){echo(' +');} echo('</div>
');
for($x=0;$x < $c;$x++)
{
echo('<div id="'.$Track[num][$x].'" class="content_div" data-theme="a">'."\n");
echo($Track['content1'][$x]."\n"); // SEE NOTES BELOW
echo($Track['content2'][$x]."\n"); // SEE NOTES BELOW
echo('</div>'."\n");
}
}
else
{
echo('<h2 class="Error">No tracking number has been entered!</h2>');
}
echo('
</div><!-- content -->');
}
#===============================#
# Close Database Connections #
#===============================#
mysql_close($Conn);
i5_close($i5_conn);
include($IncludeDir.'MobileFoot.inc');
?>
<script type="text/javascript">
$('div[data-role="navbar"] a').live('click', function ()
{
$(this).addClass('ui-btn-active');
$('div.content_div').hide();
$($(this).attr('data-href')).show();
});
<?PHP
if($c > 1)
{
echo('$("#'.$Track[num][0].'").show();');
for($x=1;$x < $c;$x++)
{
echo('$("#'.$Track[num][$x].'").hide();');
}
}
?>
</script>
</div><!-- page -->
</body>
</html>
======== NOTES ========
What is happening here is that the tracking numbers are entered and processed in a loop (1 loop for each tracking number) in the deliveryinfo.inc file.
The $CorrectData variable is set at the top of the file in a form validation routine.
There is a lot of server-side processing in deliveryinfo. Basically it processes and calculates, pulls from the databases and displays information about the shipments, each of which is stored in the $Track[num] array, and selectable from a navbar.
$Track[content1] is two columns of information, while $Track[content2] is a 3-column table showing shipment progression.
The important links in deliveryinfo.inc occur in two links in content1 that pull up a google map of either the origin or destination terminals.
======== THE LINKS ========
The links look like this:
$Track['content1'][$c] .= ('<a data-ajax="false" href="maptest4.php'.$OriginQuery.'">'.$Origin.'</a>');
AND
$Track['content1'][$c] .= ('<a data-ajax="false" href="maptest4.php'.$DestinationQuery.'">'.$Destination.'</a>');
The queries contain latitude and longitude and information for the InfoWindow that comes up when you click on a map marker.
======== THE MAP FILE LOOKS LIKE THIS ========
<?PHP
$Label = !empty($_REQUEST['L']) ? $_REQUEST['L'] : "";
$City = !empty($_REQUEST['C']) ? $_REQUEST['C'] : "";
$State = !empty($_REQUEST['S']) ? $_REQUEST['S'] : "";
$Carrier = !empty($_REQUEST['CR']) ? $_REQUEST['CR'] : "";
$Lat = !empty($_REQUEST['Lat']) ? $_REQUEST['Lat'] : "";
$Lon = !empty($_REQUEST['Lon']) ? $_REQUEST['Lon'] : "";
$Logo = !empty($_REQUEST['Logo']) ? $_REQUEST['Logo'] : "";
$Address = !empty($_REQUEST['Ad']) ? $_REQUEST['Ad'] : "";
$Zip = !empty($_REQUEST['Z']) ? $_REQUEST['Z'] : "";
$Phone = !empty($_REQUEST['Ph']) ? $_REQUEST['Ph'] : "";
$WebURL = !empty($_REQUEST['Web']) ? $_REQUEST['Web'] : "";
$NWS = !empty($_REQUEST['NWS']) ? $_REQUEST['NWS'] : "";
$Mobile = !empty($_REQUEST['Mob']) ? true : false;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Map</title>
<?PHP
include('include/MobileHead.inc');
?>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/geocode/output?parameters"></script>
<script>
var Latitude = <?PHP echo($Lat); ?>;
var Longitude = <?PHP echo($Lon); ?>;
$('#map_result').live('pageshow',function(event)
{
loadMap(Latitude,Longitude);
});
function loadMap(Lat, Long)
{
var centerLatlng = new google.maps.LatLng(Lat, Long);
var myOptions =
{
zoom: 13,
center: centerLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker(
{
position: new google.maps.LatLng(Lat,Long),
map: map,
animation: google.maps.Animation.DROP
});
var infowindow = new google.maps.InfoWindow(
{
content: "<?PHP echo('<span class=\'mBubble\'><b>'.$Carrier.'</b><br />'.$Address.'<br />'.$City.', '.$State.' '.$Zip.'</span>'); ?>"
});
google.maps.event.addListener(marker, 'click', function()
{
infowindow.open(map, marker);
});
}
</script>
<style>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_result{width:100%; height:100%;}
#map_canvas{width:100%; height:92%;padding:0;}
.mBubble {color:#000000; font-family:Arial, Tahoma, Geneva, sans-serif; font-size:14px;}
</style>
</head>
<body>
<div data-role="page" id="map_result">
<? include($IncludeDir.'MobileHeader.inc'); ?>
<div class="SubHead" style="background:#008000;">
<?PHP echo($Carrier.' '.$City.', '.$State.' <br /><a href="tel:'.$Phone.'"><span style="color:#FFFF00;">'.$Phone.'</span></a>'); ?>
</div>
<div id="map_canvas"></div>
<? include($IncludeDir.'MobileFoot.inc'); ?>
</div>
</body>
</html>