[x]
Posted via EE Mobile

Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.

Question
[x]
Attachment Details

Send data dynamically using AJAX to flash chart with setData

Asked by bound4h3 in Asynchronous Javascript and XML (AJAX), JavaScript, PHP Scripting Language, Web Development, Web Languages/Standards

Tags: xml, html, flash, ajax

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-backoffice/swfobject.js"></script>
      <div id="flashcontent">
            <strong>You need to upgrade your Flash Player</strong>
      </div>

      <script type="text/javascript">
            // <![CDATA[            
            var so = new SWFObject("pages/ammap-backoffice/ammap.swf", "ammap", "760", "507", "8", "#444444");
            so.addVariable("path", "pages/ammap-backoffice/");
            so.addVariable("settings_file", escape("pages/ammap-backoffice/ammap_settings.xml"));                  // you can set two or more different settings files here (separated by commas)
            so.addVariable("data_file", escape("pages/ammap-backoffice/ammap_data.xml"));            
//        so.addVariable("map_data", "<map ...>...</map>");                                   // you can pass map data as a string directly from this file
//        so.addVariable("map_settings", "<settings>...</settings>");                         // you can pass map settings as a string directly from this file
//    so.addVariable("additional_map_settings", "<settings>...</settings>");              // you can append some map settings to the loaded ones
//    so.addVariable("loading_settings", "LOADING SETTINGS");                             // you can set custom "loading settings" text here
//    so.addVariable("loading_data", "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.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}

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.XMLHTTP");
  }
return null;
}
</script>
<form>
Select a Store Number:
<select name="users" onchange="showUser(this.value)"  value="Select One">
<option value="01445">01445</option>
<option value="00342">00342</option>
<option value="00795">00795</option>
<option value="00870">00870</option>
</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('ammap').reloadData('ammap_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('ammap').reloadData('ammap_data.php?id='+fld.options[fld.selectedIndex].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
[+][-]10/30/09 10:20 PM, ID: 25708585Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]11/01/09 08:36 PM, ID: 25717079Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]11/02/09 12:34 PM, ID: 25723431Author Comment

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]11/08/09 06:48 AM, ID: 25770627Administrative Comment

Experts Exchange has a courteous staff of administrators who help members get the most out of the website by means of administrative comments like this one.

Start your 30-day free trial to view this Administrative Comment or ask the Experts your question.

 
[+][-]11/08/09 06:48 AM, ID: 25770630Administrative Comment

Experts Exchange has a courteous staff of administrators who help members get the most out of the website by means of administrative comments like this one.

Start your 30-day free trial to view this Administrative Comment or ask the Experts your question.

 
[+][-]11/10/09 09:13 AM, ID: 25787469Administrative Comment

Experts Exchange has a courteous staff of administrators who help members get the most out of the website by means of administrative comments like this one.

Start your 30-day free trial to view this Administrative Comment or ask the Experts your question.

 
[+][-]11/13/09 06:30 PM, ID: 25819130Administrative Comment

Experts Exchange has a courteous staff of administrators who help members get the most out of the website by means of administrative comments like this one.

Start your 30-day free trial to view this Administrative Comment or ask the Experts your question.

 
 
Loading Advertisement...
20091021-EE-VQP-81 - Hierarchy / EE_QW_3_20080625