bluebyyou Posted July 12, 2007 Share Posted July 12, 2007 I started working from this example http://www.w3schools.com/ajax/ajax_database.asp. I want create dynamic drop down menus. I have hit a wall now and am not sure what to do. Could someone have a look at my code and tell me where I need to make adjustments. Basically nothing is happening at all right now. menutest.php <?php session_start(); include("../db_connect.php"); $query = "SELECT * FROM trip ORDER BY year"; query_db($query); ?> <html> <head> <script src="select.js"></script> </head> <body> <form name="search" method="get"> <?php $query = "SELECT * FROM trip ORDER BY year"; query_db($query); ?> <select name="year" onChange="updateMenu(this.value,day)"> <option>Year</option> <?php while ($row = mysql_fetch_array($result)) { extract($row); ?> <option value="<?php echo $year; ?>"><?php echo $year; ?></option> <?php } ?> </select> <select disabled="disabled" id="day" name="day" onChange="updateMenu(this.value,event)"> <option>Day </option> </select><br /> <select disabled="disabled" id="name" name="event" onChange="updateMenu(this.value,submit)"> <option>Event </option> </select><br /> </form> </body> </html> select.js var xmlHttp function updateMenu(str,menu) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="getmenu.php" url=url+"?q="+str+"&m="+menu url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { if (menu=="day") { document.getElementById("day").innerHTML=xmlHttp.responseText } if (menu=="event") { document.getElementById("name").innerHTML=xmlHttp.responseText } } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } getmenu.php <?php session_start(); include("../db_connect.php"); $q=$_GET["q"]; $m=$_GET["m"]; if ($m == "day") { $query = "SELECT * FROM `$q` ORDER BY id"; query_db($query); echo "<select id='day' name='day'>" while ($row = mysql_fetch_array($result)) { extract($row); $timestamp = strtotime($edate); $showdate = date('F j', $timestamp); echo "<option value='$id'>Day $id - $showdate</option>"; } echo "</select><br />"; } if ($m == "event") { $query = "SELECT * FROM event WHERE day = $q ORDER BY day"; query_db($query); echo "<select id='even' name='event'>"; while ($row = mysql_fetch_array($result)) { extract($row); $length = strlen($event); $abvevent = substr($event,0,26); echo "<option value='$eventid'> $abvevent"; if ($length >= 26) {echo "...";} echo "</option>"; } echo "</select><br />"; ?> Quote Link to comment Share on other sites More sharing options...
bluebyyou Posted July 12, 2007 Author Share Posted July 12, 2007 anyone? Quote Link to comment Share on other sites More sharing options...
sayedsohail Posted July 13, 2007 Share Posted July 13, 2007 $query = "SELECT * FROM `$q` ORDER BY id"; where that $q comes from and what it is doing in your sql statement; Hope you got the answer. Quote Link to comment Share on other sites More sharing options...
bluebyyou Posted July 13, 2007 Author Share Posted July 13, 2007 Well in menutest.php... <select name="year" onChange="updateMenu(this.value,day)"> the updateMenu() function takes the two values then in select.js they are turned into $_GET variabes and sent to getmenu.php... var url="getmenu.php" url=url+"?q="+str+"&m="+menu then in get menu.php $q=$_GET["q"]; $m=$_GET["m"]; the naming of the q came from the example at w3schools.com that I used. and in my DB I have colums in a table with years as names for example `2007` I hope that all makes sense. I'm not even sure if what i did was right, thats why I put this up here. Quote Link to comment Share on other sites More sharing options...
bluebyyou Posted July 14, 2007 Author Share Posted July 14, 2007 bump Quote Link to comment Share on other sites More sharing options...
bluebyyou Posted July 15, 2007 Author Share Posted July 15, 2007 I have been playing with this for a couple of days and still haven't been able to figure it out, anyone have any ideas? Quote Link to comment Share on other sites More sharing options...
bluebyyou Posted July 17, 2007 Author Share Posted July 17, 2007 bump Quote Link to comment Share on other sites More sharing options...
bluebyyou Posted July 21, 2007 Author Share Posted July 21, 2007 bump again. Quote Link to comment Share on other sites More sharing options...
RichardRotterdam Posted July 21, 2007 Share Posted July 21, 2007 I noticed a little something. You have the id attribute in the select and your updating the innerHTML inside the the select. This is not right. To save you some pain concerning IE6 do NOT try to update the html inside the select box IE has some issues with it. look at your php ajax query it will echo something like: <select id="day"> <option></option> <option></option> <option></option> </select> and with the following line inside the function stateChanged() document.getElementById("day").innerHTML you will update the html inside your select so your updated page will look like: <select id="day"> <select id="day"> <option></option> <option></option> <option></option> </select> </select> hmmm that can't be good so try placing each select box inside a div instead like this <div id="day"> <select> <option></option> <option></option> <option></option> </select> </div> that should solve one thing now something else i saw inside your functionstateChanged() is saw this if(menu=="day") however your variable menu only exists inside the function updateMenu() and will cease to exist outside that function declare it outside that function var menu; function stateChanged(){ } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.