All right guys, this one has me stumped. I'm going to tell the whole story and include all the facts, so I apologize for the length. Any help is appreciated.
I purchased a "map" tool from ammap.com which basically is a configurable flash map that pulls a data.xml and settings.xml file via Javascript so that you can change colors, zoom, drop pins on the map, etc.
The code for the map is:
<script type="text/javascript" src="pages/ammap-backoffic
e/swfobjec
t.js"></sc
ript>
<div id="flashcontent">
<strong>You need to upgrade your Flash Player</strong>
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("pages/ammap-bac
koffice/am
map.swf", "ammap", "760", "507", "8", "#444444");
so.addVariable("path", "pages/ammap-backoffice/")
;
so.addVariable("settings_f
ile", escape("pages/ammap-backof
fice/ammap
_settings.
xml")); // you can set two or more different settings files here (separated by commas)
so.addVariable("data_file"
, escape("pages/ammap-backof
fice/ammap
_data.xml"
));
// so.addVariable("map_data",
"<map ...>...</map>"); // you can pass map data as a string directly from this file
// so.addVariable("map_settin
gs", "<settings>...</settings>"
); // you can pass map settings as a string directly from this file
// so.addVariable("additional
_map_setti
ngs", "<settings>...</settings>"
); // you can append some map settings to the loaded ones
// so.addVariable("loading_se
ttings", "LOADING SETTINGS"); // you can set custom "loading settings" text here
// so.addVariable("loading_da
ta", "LOADING STORE DATA"); // you can set custom "loading data" text here
// so.addVariable("preloader_
color", "#999999"); // you can set preloader bar and text color here
so.write("flashcontent");
// ]]>
</script>
That gives me the map like I want it on the page: all ok.
Below the map I have a search box and a search button. The search box right now, uses AJAX to dynamically pull records from a MySQL table. Here is the code as it is on the php page:
<script type="text/javascript">
var xmlhttp;
function showUser(str)
{
xmlhttp=GetXmlHttpObject()
;
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="members/lookupcode.ph
p";
url=url+"?q="+str;
url=url+"&sid="+Math.rando
m();
xmlhttp.onreadystatechange
=stateChan
ged;
xmlhttp.open("GET",url,tru
e);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("t
xtHint").i
nnerHTML=x
mlhttp.res
ponseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.X
MLHTTP");
}
return null;
}
</script>
<form>
Select a Store Number:
<select name="users" onchange="showUser(this.va
lue)" value="Select One">
<option value="01445">01445</optio
n>
<option value="00342">00342</optio
n>
<option value="00795">00795</optio
n>
<option value="00870">00870</optio
n>
</select>
</form>
<br />
<div id="txtHint"><b>Store info will be listed here.</b></div>"
As you noticed, it calls a page called lookupcode.php:
"<?php
$q=$_GET["q"];
$con = mysql_connect('localhost',
'[username omitted]', '[password omitted]');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("[dbname omitted]", $con);
$sql="SELECT * FROM stores WHERE num = '$q'";
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Store Number</th>
<th>Store Name</th>
<th>Operator Name</th>
<th>Operator Phone</th>
</tr>";
while($row = mysql_fetch_array($result)
)
{
echo "<tr>";
echo "<td>" . $row['num'] . "</td>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['opname'] . "</td>";
echo "<td>" . $row['opphone'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>"
That also works by itself just fine. What I want to do is tie the two together and forget about the whole dynamic table that it draws. I want to enter a Store Number, hit Search, and then have the map redraw and zoom in on that store (the zoom in piece is already set in the data.xml file of the map).
The creator of the map had this to say when I asked my question:
"yes you can use setData to redraw map dynamically. That's probably the
best way to go about it.
However there are other methods as well. You can force map to reload
it's data from a different URL using reloadData call. I.e.:
document.getElementById('a
mmap').rel
oadData('a
mmap_data.
php?store=
123456');"
In another forum post, he said this:
"use AJAX to pull data dynamically from the server for the selected dropdown, then reformat it to XML and set to the map using setData. If this sounds too complicated you can just force map to reload it's data from some server-side script using specific parameters. I.e.:
<script type="text/javascript">
function showPin(fld) {
document.getElementById('a
mmap').rel
oadData('a
mmap_data.
php?id='+f
ld.options
[fld.selec
tedIndex].
value);
}
</script>
<select onchange="showPin(this);">
<option value="x1">Store #1</option>
<option value="x2">Store #2</option>
<option value="x3">Store #3</option>
</select>"
I'm sure that makes sense to someone, just not me. One example he gave was a customer that implemented AJAX with his map:
http://hdi.wantedanalytics.com/supply-demand-ratios/I don't need something that complex, but it was an example to show it was possible.
I am not versed enough in Javascript to understand how to use setData or reloadData, let alone integrate it with the map. Does anyone know what he means and how I could go about doing this? He mentions two ways, so I know it is possible.
Sorry for the long post and thank you again,
Mike