dynamic drop down boxes

mewso

Well theres something very strange going on then. Want to post up your html/script?

mewso

O.k. I looked at your code above and you are not giving the options a value (assuming you are still using the same code) just an id and a text value so you could change the code to:-

onchange="showSubsystem(this.options[this.selectedIndex].text);"

Normally you would use the value of an option to match with an id field in a db and the text to match with the text field:-

<option value="0">Select a Category</option>
<option value="1">Category With ID of 1</option>

I'm not sure what you need but if you do need the value then you need to output it too.

Creamy Goodness

[php]
<?php
include_once 'dbconnect.inc.php';
include_once 'header.html';
include_once 'menu.html';

echo '</br><table>
<div="main">
<tr><td> <div id="projectdiv">'.selectProjectBox().'</div> </td></tr>
<tr><td> <div id="subsystemdiv"></div> </td></tr>
<tr><td> <div id="productdiv"></div> </td></tr>
<tr><td> <div id="tablediv"></div> </td></tr>
</div>
</table>
';

function selectProjectBox()
{
$query = "SELECT project FROM trs GROUP BY project";

echo "project:";

echo "<select id=\"project\" name=\"project\" onchange=\"showSubsystem(this.value);\">\n<option selected=\"Selected\" value=\"\">-</option>\n";

$result = mysql_query($query) or die ( mysql_error() );

while( $row = mysql_fetch_array($result) )
{
$selectOption = $row;
$html.="<option id=\"$selectOption\">$selectOption</option>\n";
}

$html.="</select>\n";
echo $html;

}
?>
[/php]


and the javascript, linked in from header.html.

[php]
var xmlHttp;

//fuction to return the xml http object
function getXMLHTTP()
{
var xmlhttp=false;

//if the browser is mozilla/safari/opera
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
//or internet explorer
else if(window.ActiveXObject)
{
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
xmlhttp = false;
}
}
}
return xmlhttp;
}


//calls findSubsystem.php to populate a drop down box
//that shows only subsystems based on a particular project
function showSubsystem(project)
{
var strURL="findSubsystem.php?project="+project;
//var req = getXMLHTTP();
xmlHttp = getXMLHTTP();

if (xmlHttp)
{
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4)
{
// only if "OK"
if (xmlHttp.status == 200)
{
document.getElementById('subsystemdiv').innerHTML=xmlHttp.responseText;
}
else
{
alert("There was a problem while using XMLHTTP:\n" + xmlHttp.statusText);
}
}
}
xmlHttp.open("GET", strURL, true);
xmlHttp.send(null);
}
}

//calls findProduct.php to populate a drop down box
//that shows only products based on a particular project and subsystem.
function showProduct(subsystem)
{
var project = document.getElementById("project").value;

var strURL="findProduct.php?project="+project+"&subsystem="+subsystem;
var xmlHttp = getXMLHTTP();

if (xmlHttp)
{
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4)
{
// only if "OK"
if (xmlHttp.status == 200)
{
document.getElementById('productdiv').innerHTML=xmlHttp.responseText;
}
else
{
alert("There was a problem while using XMLHTTP:\n" + xmlHttp.statusText);
}
}
}
xmlHttp.open("GET", strURL, true);
xmlHttp.send(null);
}
}

function showTable()
{
var project = document.getElementById("project").value;
var subsystem = document.getElementById("subsystem").value;
var product = document.getElementById("product").value;

var strURL="showTable.php?project="+project+"&subsystem="+subsystem+"&product="+product;
var xmlHttp = getXMLHTTP();

if (xmlHttp)
{
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4)
{
// only if "OK"
if (xmlHttp.status == 200)
{
document.getElementById('tablediv').innerHTML=xmlHttp.responseText;
}
else
{
alert("There was a problem while using XMLHTTP:\n" + xmlHttp.statusText);
}
}
}
xmlHttp.open("GET", strURL, true);
xmlHttp.send(null);
}

}
[/php]

also just to add, the javascript actually calls findsubsystem.php because there is a select box in that script that is meant to be populated but only a box and one option gets created <option>-</option>

mewso

Cremo - check my post above the one with your code - you are not giving your options a value

I'll just outline the way I might have done this which may not appeal to everyone but it's just another approach. Once you understand how all that ajax stuff works then start using a library. The big names are jquery, prototype, yahoo etc. but I am perhaps a bit unecessarily concerned about how large some script files will be especially if you are only making use of them here and there. For ajax I use fleegix. This is a matter of choice pure and simple but it's lightweight and created by a guy I respect in the javascript world Matthew Eernisse.

I always develop a page that works without script. This is not always necessary especially if it's an internal intranet based site etc. but it's not that huge an effort to go to. With 3 dropdowns I would display all 3 select boxes on the page, the first with all of it's options and the next two empty and disabled. Beside the first dropdown a submit button saying something like "Refresh Options" which the user can click whenever they make a change. Rudimentary but will work for anyone with script turned off.

For the ajax version I would still display all 3 selects (and hide the button) with the second and third disabled until they have options. All script would go into the external file. Using the well known addLoadEvent to setup the page once the page has loaded.

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) oldonload();
func();
}
}

addLoadEvent(initPage);

function initPage() {
//assuming the selects are called project, subsystem and product
var projsel = document.getElementById("project");
var subsel = document.getElementById("subsystem");
var prodsel = document.getElementById("product");
if (projsel) projsel.onchange = getChildOptions;
if (subsel) subsel.onchange = getChildOptions;
if (prodsel) prodsel.onchange = getChildOptions;

}

For the actual ajax I find it best to use the same backend page, for example getchildoptions.php and pass it an ajaxid for example that will inidicate what results I am looking for. The php page can check this id and return what is expected based on that. I would almost always use an ajax post if possible and finally I would prefer not to return actual html instead passing back a simple delimited string when I just want to create option elements.

If the options only need one value then it could be comma delimitted - option1,option2,option3 etc. or if an id is also needed then 1|options1,2|option2,3|option3. That makes it easy enough to parse.

In this particular situation I would also include the id of the select that started this request in the response along with the child select as I am using a handler function that will be ignorant of which select made the request. Obviously you could use 3 seperate functions for each select and three seperate handlers but why make your code longer. So the response might be project,subsystem,option1,option2,option3 etc.

function getChildOptions() {
var selectedID = this.options[this.selectedIndex].value;
var thisID = this.id;
if (thisID === 'project') {
fleegix.xhr.doPost(handle_getChildOptions, 'getchildoptions.php', 'ajaxid=1&selectedID=' + selectedID);
} else if (thisID === 'subsystem') {
fleegix.xhr.doPost(handle_getChildOptions, 'getchildoptions.php', 'ajaxid=2&selectedID=' + selectedID);
} else if (thisID === 'product') {
fleegix.xhr.doPost(handle_getChildOptions, 'getchildoptions.php', 'ajaxid=3&selectedID=' + selectedID);
}
}

function handle_getChildOptions(resp, id) {
var aropts = resp.split(',');
var objcaller = document.getElementById(aropts[0]);
var objchild = document.getElementById(aropts[1]);
objchild.options.length = 0; //clears the child select's options
var i = 0;
for (i=2;i< aropts.length;i++) {
objchild.options[objchild.options.length] = new Option(aropts, aropts);
}
}

I can't cover all the ground here but I'm hoping it might give you some ideas. One final good practice is to disable the selects while making your ajax call and re-enable them when it is complete. Otherwise you would have to monitor ajax calls and cancel them when the user trys to make a change during a call which might be tricky.

Creamy Goodness

only saw you edit now Musician. can we delete like the last 5 posts here so i don't look like a noob

i'm going to look into using libraries when i get a bit more advanced in AJAX.

mewso

Cremo wrote: »

only saw you edit now Musician. can we delete like the last 5 posts here so i don't look like a noob

i'm going to look into using libraries when i get a bit more advanced in AJAX.

I don't see any posts in this thread at all
You are right though. Get to know Ajax and the DOM before making use of libraries.

Webmonkey

This is a nice little book that is worth looking at:

AJAX and PHP: Building Responsive Web Applications
http://www.amazon.co.uk/AJAX-PHP-Building-Responsive-Applications/dp/1904811825/ref=sr_1_11?ie=UTF8&s=books&qid=1210161493&sr=8-11

mewso

I would strongly recommend that anyone who wants to learn javascript/ajax learn it independently from php/.net/ror etc. Also try and learn from the new breed of scripters out there advocating unobtrusive scripting. I don't know how the book webmonkey recommends approaches javascript but the simple test for me is that if it has something like <a href="#" onclick="javascript:...." in it then I don't want to know.

I just finished Simply Javascript which is an excellent book and a great primer for writing good javascript.

Webmonkey

musician wrote: »

I would strongly recommend that anyone who wants to learn javascript/ajax learn it independently from php/.net/ror etc. Also try and learn from the new breed of scripters out there advocating unobtrusive scripting. I don't know how the book webmonkey recommends approaches javascript but the simple test for me is that if it has something like <a href="#" onclick="javascript:...." in it then I don't want to know.

I just finished Simply Javascript which is an excellent book and a great primer for writing good javascript.

Well the PHP is kept separate as it the server side code that the request goes to. This can easily be any server side language. The book mainly deals with the javascript/dom side of things (at least in the first half of the book).
It goes into using PHP then to make it a bit more interactive but as I say its quite simple to use what ever language you comfortable with first.

Getting a good understanding of the DOM object is quite essential and to be honest its easy since most of the methods you could almost guess.

mewso

Webmonkey wrote: »

Well the PHP is kept separate as it the server side code that the request goes to. This can easily be any server side language. The book mainly deals with the javascript/dom side of things (at least in the first half of the book).
It goes into using PHP then to make it a bit more interactive but as I say its quite simple to use what ever language you comfortable with first.

Getting a good understanding of the DOM object is quite essential and to be honest its easy since most of the methods you could almost guess.

I would hope the php was kept seperate I'm sure it's an excellent book I just wouldn't want someone looking for a php/ajax book because they were a php developer instead of the best "ajax" book. I'm a .net developer and I wouldn't be too bothered looking for an asp.net/ajax book for various reasons but mainly because there are authors out there writing about cutting edge scripting most of whom don't fixate on one kind of server language and despite what people think it's not a good idea to learn the old way then check out the new way. Start with the new way and it's no more difficult.

Creamy Goodness

ok guys, i'm back again

i have these boxes updating with the ajax calls perfectly now (and have for sometime) but what i want to be able to do is to have a submit button that the user can submit at anytime.

ie. they select a project and they can hit submit and the value gets passed to another php script of mine eg test.php.

or ie. again they select a project and subsystem and they hit submit the two values of the boxes get passed to the test.php script

i have test looking like this at the moment...

[php]
<?php
print_r($_GET);
?>
[/php]and the form looks like this.

[php]
echo '</br><table>
<form action="test.php" method="get">
<div="main">
<tr><td> <div id="projectdiv">'.selectProjectBox().'</div> </td></tr>
<tr><td> <div id="subsystemdiv"></div> </td></tr>
<tr><td> <div id="productdiv"></div> </td></tr>
<tr><td> <div id="tablediv"></div> </td></tr>
</div>
</table>
</form>
';
[/php]now when i print out $_GET in test.php i get an empty array, but if i have <input type="hidden" name="test" value="test" /> inside the form it gets printed out in test.php.

i'm guessing with AJAX code of the select boxes isn't sent and stored on the client. is there any way for me to get these values to be submitted to test.php?

mewso

Cremo wrote: »

i'm guessing with AJAX code of the select boxes isn't sent and stored on the client. is there any way for me to get these values to be submitted to test.php?

It's no different to what you have been doing with the selects. You send the info using either an Ajax GET or POST to the php page.

Creamy Goodness

aye i just noticed that i actually had the <form ....> tag in the wrong place in the acutal code d'oh.