alconebay Posted January 29, 2009 Share Posted January 29, 2009 I am using php/mysql to populate a drop down menu list like so: <?php $query="SELECT id,name FROM employees WHERE position='warehouse' ORDER BY name"; $result = mysql_query ($query); echo "<select name=\"id\" value=''>Select an employee</option>"; while($nt=mysql_fetch_array($result)){ echo "<option value=\"$id\">$nt[name]</option>"; } echo "</select>"; ?> And it works great. However, this page will stay up and the drop down selection needs to update every time someone opens the menu without having to refresh the page. So I need to run the query every time the menu becomes onfocus Any ideas? Quote Link to comment Share on other sites More sharing options...
F1Fan Posted January 30, 2009 Share Posted January 30, 2009 Since you posted in Ajax Help, I assume you know you need to use Ajax to do what you're asking. However, do you know any Ajax? Of not, learn how to do some basic stuff in Ajax first with a tutorial. If you do no Ajax, write something up and people will be happy to help you with it. Here's a tutorial: http://www.w3schools.com/ajax/default.asp Quote Link to comment Share on other sites More sharing options...
alconebay Posted January 30, 2009 Author Share Posted January 30, 2009 I'll read the tutorial you posted. I had found this one right after my first post, http://www.programimi.com/2007/07/22/retrieving-database-information-with-ajax-php-and-mysql/ I tried using it and I got a lot closer to getting what I wanted. I don't have to to refresh the whole page, but I still have to click a "refresh" link to update the drop down. Here is what I have: <script language="javascript" type="text/javascript"> function getPage(employeequery){ var xmlhttp=false; //Clear our fetching variable try { xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); //Try the first kind of active x object… } catch (e) { try { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); //Try the second kind of active x object } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp = new XMLHttpRequest(); //If we were able to get a working active x object, start an XMLHttpRequest } var file = 'text.php?employeequery='; //This is the path to the file we just finished making * xmlhttp.open('GET', file + employeequery, true); //Open the file through GET, and add the page we want to retrieve as a GET variable ** xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) { //Check if it is ready to recieve data var content = xmlhttp.responseText; //The content data which has been retrieved *** if( content ){ //Make sure there is something in the content variable document.getElementById('content').innerHTML = content; //Change the inner content of your div to the newly retrieved content **** } } } xmlhttp.send(null) //Nullify the XMLHttpRequest return; } </script> </head> <body> <div id="links"> <a href="#" onclick="javascript:getPage('employeequery')" >refresh</a> </div> <div id="content"> The drop down box (dropdown.php) appears here when I click the refresh link above. </div> </body> </html> dropdown.php: <?php mysql_connect("localhost", "#######", "#########"); mysql_select_db("###########"); $employeequery = $_GET["employeequery"]; //This is the variable we retrieve through GET to know which row of content to retrieve $query="SELECT id,name FROM employees WHERE position='warehouse' ORDER BY name"; $result = mysql_query ($query); echo "<select name=\"id\" value=''>Select an employee</option>"; while($nt=mysql_fetch_array($result)) { echo "<option value=\"$nt[name]\">$nt[name]</option>"; } echo "</select>";// Closing of list box echo "<input name=\"id\" type=\"hidden\" value=\"$id\">"; ?> Quote Link to comment Share on other sites More sharing options...
F1Fan Posted January 30, 2009 Share Posted January 30, 2009 A couple of things. First, you should create the <select> statically but empty. Then move the onclick event to the select tag, rather than have it be a separate button. Finally you make the PHP code echo JavaScript to create the options, and have the Ajax eval() it. Second, this is just wrong: echo "<select name=\"id\" value=''>Select an employee</option>"; Try replacing your content div with this: <div id="content"> <select name="id" id="content_select" onclick="getPage('employeequery');"></select> </div> Next, replace this line: document.getElementById('content').innerHTML = content; with this: (this will evaluate what is in the "content" variable and try to run it as JavaScript code) eval(content); Finally, your dropdown.php: echo "var sel = document.getElementById('content_select');\n" . "sel.options.length = 0;\n" mysql_connect("localhost", "#######", "#########"); mysql_select_db("###########"); $employeequery = $_GET["employeequery"]; //This is the variable we retrieve through GET to know which row of content to retrieve $query="SELECT id,name FROM employees WHERE position='warehouse' ORDER BY name"; $result = mysql_query ($query); $c = 0; while($nt=mysql_fetch_array($result)){ echo "sel.options[$c] = new Option('{$nt['name']}','{$nt['name']}');\n"; $c++; } That should get you started. I don't know what that hidden input is used for, but you'll have to move it out of dropdown.php. If you need it to be populated by dropdown.php, just add the hidden input to the main HTML page and add JavaScript code that will populate it after your SQL query runs. Quote Link to comment Share on other sites More sharing options...
alconebay Posted January 30, 2009 Author Share Posted January 30, 2009 Hmmm... The onclick does not seem to be working. It just shows a blank dropdown. I tried changing onclick to onfocus but it's a no go. I tried putting just this is dropdown.php: <option value="test">Hello World</option> But I get nothing. The dropdown menu is just blank. I double checked the path to dropdown.php also and it's right. var file = 'dropdown.php?employeequery='; Quote Link to comment Share on other sites More sharing options...
F1Fan Posted January 30, 2009 Share Posted January 30, 2009 OK, putting this: <option value="test">Hello World</option> will not work, because that is not JavaScript. It is HTML and can not be used with the eval() function. Try what I suggested before, but this time remove the onclick from the select and try it with the button you used before. If that works, then try something like onmouseover for the select in place of the onclick or onfocus. Quote Link to comment Share on other sites More sharing options...
alconebay Posted January 30, 2009 Author Share Posted January 30, 2009 ok. I put the dropdown.php code back and tried using onfocus and onmouseover instead of onclick but I still get the blank dropdown. Quote Link to comment Share on other sites More sharing options...
F1Fan Posted January 30, 2009 Share Posted January 30, 2009 And what about trying to run it with the button? Post your newly updated code. Quote Link to comment Share on other sites More sharing options...
alconebay Posted January 30, 2009 Author Share Posted January 30, 2009 I tried the refresh link but it was a no go also. Here is my code: <script language="javascript" type="text/javascript"> function getPage(employeequery){ var xmlhttp=false; //Clear our fetching variable try { xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); //Try the first kind of active x object… } catch (e) { try { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); //Try the second kind of active x object } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp = new XMLHttpRequest(); //If we were able to get a working active x object, start an XMLHttpRequest } var file = 'dropdown.php?employeequery='; //This is the path to the file we just finished making * xmlhttp.open('GET', file + employeequery, true); //Open the file through GET, and add the page we want to retrieve as a GET variable ** xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) { //Check if it is ready to recieve data var content = xmlhttp.responseText; //The content data which has been retrieved *** if( content ){ //Make sure there is something in the content variable eval(content); //Change the inner content of your div to the newly retrieved content **** } } } xmlhttp.send(null) //Nullify the XMLHttpRequest return; } </script> </head> <body> <div id="links"> <a href="#" onclick="javascript:getPage('employeequery')" >refresh</a> </div> <div id="links2"> <a href="javascript:getPage('employeequery')">refresh</a> </div> <div id="links3"> <a href="#" onfocus="javascript:getPage('employeequery')" >refresh</a> </div> <div id="links4"> <a href="#" onmouseover="javascript:getPage('employeequery')" >refresh</a> </div> <div id="content"> <select name="id" id="content_select" onclick="getPage('employeequery');"></select> </div> </body> </html> dropdown.php echo "var sel = document.getElementById('content_select');\n" . "sel.options.length = 0;\n" mysql_connect("localhost", "#######", "#########"); mysql_select_db("###########"); $employeequery = $_GET["employeequery"]; //This is the variable we retrieve through GET to know which row of content to retrieve $query="SELECT id,name FROM employees WHERE position='warehouse' ORDER BY name"; $result = mysql_query ($query); $c = 0; while($nt=mysql_fetch_array($result)){ echo "sel.options[$c] = new Option('{$nt['name']}','{$nt['name']}');\n"; $c++; } Is there a simple javascript "hello world" that I can put in dropdown.php just to see if it's being loaded? Quote Link to comment Share on other sites More sharing options...
alconebay Posted January 30, 2009 Author Share Posted January 30, 2009 I think I had better just stick with my refresh link until I learn enough javascript to help you help me Thanks for all the help F1Fan! I've started reading that javascript/ajax tutorial link you posted..... Quote Link to comment Share on other sites More sharing options...
F1Fan Posted January 30, 2009 Share Posted January 30, 2009 What do you get if you navigate to dropdown.php and actually include the employeequery variable? Try this: replace these lines: var file = 'dropdown.php?employeequery='; xmlhttp.open('GET', file + employeequery, true); with these: var file = 'dropdown.php?employeequery='+employeequery; window.open(file); xmlhttp.open('GET', file, true); What code shows up when the new window opens? Quote Link to comment Share on other sites More sharing options...
alconebay Posted January 30, 2009 Author Share Posted January 30, 2009 If I run it like that I get an error: Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in (*path*)/dropdown.php on line 4 Line 4 is the mysql_connect, but there is nothing wrong with it. If I take out these lines: echo "var sel = document.getElementById('content_select');\n" . "sel.options.length = 0;\n" and these lines: $c = 0; while($nt=mysql_fetch_array($result)){ echo "sel.options[$c] = new Option('{$nt['name']}','{$nt['name']}');\n"; $c++; } The error goes away and I can echo info from the database query. Quote Link to comment Share on other sites More sharing options...
F1Fan Posted January 30, 2009 Share Posted January 30, 2009 Well, there you go. If you know PHP, you should recognize that error. "sel.options.length = 0;\n"; Quote Link to comment Share on other sites More sharing options...
alconebay Posted January 31, 2009 Author Share Posted January 31, 2009 Wow. Gotta love those ;'s. It works great now. Thanks a ton for your help F1fan. 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.