State > City dropdown output

[rondog]

I made an ajax dropdown that is making calls to my DB selecting first state then the next dropdown shows all the cities in that state. It works fine by itself. I now need to put it into my admin page. The problem is my ajax call to my remote script is just using echo. Well I cant use just echo on my admin page because it places it on the top of my page so I am making every equal to $content .= "blah blah" then I echo $content at the very end.

 

You can see the working example here: http://drewestate.com/new/2008/admin/state_dropdown.php

here is an example what its doing on my admin page: http://drewestate.com/new/2008/admin/storeeditor.php?s=Alabama&c=Birmingham&storeID=4

 

 

I just need help getting it into my admin page. On my admin page it calling the ajax fine because I can see the header response in firebug. It just wont output to my select drop down menus.

 

my drop down menus are in between the #########

<?php
if(isset($_GET['storeID'])) {
$query = mysql_query("SELECT * FROM de_dealers WHERE id = '".$_GET['storeID']."'") or die(mysql_error());
$content = "<fieldset><legend>You are editing inside of <b>".str_replace("_"," ",$_GET['c']).", ".str_replace("_"," ",$_GET['s'])."</b>  |  <a href=\"javascript:history.go(-1)\"><img src=\"../images/folderup.gif\" border=\"0\" /></a>  |  <a href=\"storeeditor.php\">Main</a></legend>";
  	$row = mysql_fetch_array($query);
$content .= "<table><form name=\"sel\" method=\"POST\">\n";
$content .= "<tr><td>$status</td></tr>\n";
##################
$content .= "<tr><td>State</td><td><select name=\"states\"><option id=\"states\" value=\"0\">=== none ===</option></select></td></tr>\n";
$content .= "<tr><td>City</td><td><select name=\"cities\"><option id=\"cities\" value=\"0\">============</option></select></td></tr>\n";
##################
$content .= "<tr><td>Zip</td><td><input type=\"text\" name=\"ziptxt\" id=\"textfield4\" value=\"$row[zip]\" disabled=\"\" size=\"35\"/></td></tr>\n";
$content .= "<tr><td colspan=\"2\"><div align=\"right\"><input name=\"savechanges\" type=\"submit\" value=\"Save Changes\"/></div></td></tr>\n";
$content .= "</form></table></fieldset>";
?>

 

 

state.php (gets called by the ajax function):

<?php
//set IE read from page only not read from cache
include '../connect.php';
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header ("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");

header("content-type: application/x-javascript; charset=tis-620");

$data = $_GET['data'];
$val = $_GET['val'];

if ($data=='states') {  // first dropdown
echo "<select name='states' onChange=\"dochange('cities', this.value)\">\n";
echo "<option value='0'>==== choose state ====</option>\n";
$result = mysql_query("SELECT DISTINCT state FROM de_dealers ORDER BY state ASC");
while($row = mysql_fetch_array($result)){
   echo "<option value=\"$row[state]\">$row[state]</option> \n" ;
}
} else if ($data=='cities') { // second dropdown
echo "<select name='cities' >\n";
echo "<option value='0'>====choose cities ====</option>\n";                           
$result = mysql_query("SELECT DISTINCT city FROM de_dealers WHERE state = '$val' ORDER BY city ASC");
while($row = mysql_fetch_array($result)){       
   echo "<option value=\"$row[city]\">$row[city]</option> \n" ;
}
} 
echo "</select>\n";  
?>

 

My ajax function (you probably dont need this)

<script language=Javascript>
function Inint_AJAX() {
   try { return new ActiveXObject("Msxml2.XMLHTTP");  } catch(e) {} //IE
   try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
   try { return new XMLHttpRequest();          } catch(e) {} //Native Javascript
   alert("XMLHttpRequest not supported");
   return null;
};

function dochange(src, val) {
     var req = Inint_AJAX();
     req.onreadystatechange = function () { 
          if (req.readyState==4) {
               if (req.status==200) {
                    document.getElementById(src).innerHTML=req.responseText; //retuen value
               } 
          }
     };
     req.open("GET", "state.php?data="+src+"&val="+val); //make connection
     req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
     req.send(null); //send value
}

window.onLoad=dochange('states', -1);         // value in first dropdown
</script>

[rondog]

please anyone?? I know its a lot of code to look at, but most of the stuff thats their isnt important for what I need to do.

[roshanbh]

Why don't you try this ......

 

http://roshanbh.com.np/2007/12/change-dropdown-list-options-values-from-database-with-ajax-and-php.html

 

 

[rondog]

that is basically the same exact thing. Like I said, my code works when its by itself on a page. My issue is placing it into a pre-existing page. State.php is using echo. I need to figure out a way to not use echo because if its just echo it will place it at the top of my page in the wrong spot.

[rondog]

Woo I figured it out!

[technotool]

can you post your solution.  :-\