PHP / AJAX - Building Dynamic Drop Down Lists

Grimm

Good morning.

Using PHP / MySQL combined with AJAX, I'm trying to build some dynamic drop down lists, dynamically :P All of this is to be done without multiple refreshes on the page.

1. Drop down #1 'Division' - Created dynamically from a database
2. Drop down #2 'Department' - Created dynamically from a database, based upon value of Drop Down #1
3. Drop down #3 'Team' - Created dynamically from a database, based upon value of Drop Down #2

Dropdown #1 'Division' - Works perfectly (yay me!)
- OnChange calls the javascript below
- the php page called takes the data from the first drop down, drops it into a select statement to pull from the DB, and generates a nice dynamically created, dynamic Drop Down List and echo's all this to the same screen as the first Drop Down.
- In order to generate Drop Down #3 dynamically, I've dropped the same call to a slightly modified javascript in the PHP page that generates the 2nd drop down. Which in turn calls a slightly modified PHP page to build and display the final Drop Down.
- Confused yet? (I am).

Displayed PHP page --> Calls Javascript --> Calls PHP to generate DD#2 --> calls javascript --> calls PHP to generate DD#3

The portion in Green seems to work fine, the portion in Red does not. I'm wondering why.

I've used onChange='alert(this,value)' to validate that the value in the Drop Down #2 is correct, but for some reason when I try to have the onChange call my modified jsp page (see bottom) it dies with a javascript error.

I know that this is long, and overall, probably a nightmare to read, but any advice would be wonderful.

Thanks.
- Grimm

PS. If I need to further explain I think my brain will explode, but if you need further clarification (or a look at the PHP), I can provide it as well. I'm 99% sure the problem lies in calling the 2nd javascript to build the 3rd Drop Down.




CODE FOR WORKING DYNAMIC DROP DOWN:

var xmlHttp

function GetDept(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="getdept.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 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("lstDept").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;
}

CODE FOR NOT WORKING DYNAMIC DROP DOWN (CALL COMES FROM THE DROP DOWN ABOVE ONCHANGE:

var xmlHttp

function GetTeam(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="getteam.php"
url=url+"?w="+str
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")
 { 
 document.getElementById("lstTeam").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;
}

Grimm

Ooops! Forgot the error message that is generated. My apologies!!

[html]Internet Explorer Script Error
An error has occured in the script on this page.

Line: 7
Char: 1
Error: Object Expected
Code: 0
URL: http://localhost/dev/ajax

Do you want to continue running scripts on this page?
Yes | No[/html]

Linc

Step 1: Get Firefox
Step 2: Install Firebug plugin
Step 3: Install Web Developer plugin

I'll have a look at this in the meantime, but you NEED these to debug javascript without going nuts. Trying to create JS in IE is murderous. The only thing I debug in IE is IE-specific issues.

Firebug lets you watch what's being sent through Ajax.

Web Developer lets you view the generated source code of what the page looks like AFTER the Ajax call.

Grimm

Keebler wrote:

Step 1: Get Firefox
Step 2: Install Firebug plugin
Step 3: Install Web Developer plugin

I'll have a look at this in the meantime, but you NEED these to debug javascript without going nuts. Trying to create JS in IE is murderous. The only thing I debug in IE is IE-specific issues.

Firebug lets you watch what's being sent through Ajax.

Web Developer lets you view the generated source code of what the page looks like AFTER the Ajax call.

Roger that, will do.
I use Firefox primarily, but I'm developing for IE as it is the standard used around here. Oddly enough, no error is generated right now in Firefox (nor does it work fully).

Linc

What does it do in Firefox? Anything?

Grimm

Keebler wrote:

What does it do in Firefox? Anything?

1st drop down, generated by the DB directly - no problem
2nd drop down, generated dynamically based on results of first, pulling From a DB - no problem

onChange 2nd drop down does nothing, generates no errors.

I'm looking at the 'generated code' that the webdev plugin gives you (very handy I must say), everything looks ok, it's showing all the correct info from the DB.

Linc

Are the onChange statements correctly formed? I'm thinking it's probably a PHP issue, because those above code snippets look functionally identical.

What is onChange assigned to, the select element?

Grimm

Hmmmm, I took a closer look at the 'generated html' It seems it was never actually calling the 2nd script.

It appears that putting the following into the CALLED php doesn't actually send it to the browser.

[php]******** src='selectdept.js'>*********>[/php]and when I add it to the HEAD of my default.php page (as below) it gets put through to the browser, but neither of the js files are running and now the 2nd drop down doesnt work either!

Still no error messages in Firefox though.

[php]



******** src='selectdiv.js'>*********>
******** src='selectdept.js'>*********>




[/php]Evidentially, you cannot post the code that would call a javascript? Or I am doing it wrong.

Grimm

Turning Firebug on helps....

<code style="white-space: nowrap;"><code></code></code>Error: GetTeam is not defined
onchange(change)

Linc

The forum automatically kills script tags; it's a security thing. I can still figure out what it says fine.

I would combine all your javascript into a single file and put it in the head of the document to start. There's no reason to have a duplicate function to create your xmlhttp object, and the stateChanged functions can have 2 different names.

Grimm

So same js script, with 2 functions inside of it? (plz forgive the js newb).
Just name the functions differently?

Linc

Yessir!

This would help you a lot, and if you're planning on continuing to use Javascript you'd like this too. (Also, ppk's website)

Grimm

Head now hurts, day over, will continue to turn my head into hamburger over this tomorrow.

Thank you tons for your help Keebs.

Grimm

For what it's worth, I do believe I've finally got this working. I did as you suggested, called only the 1 .js script and it seems to be A-OK. Thank you again.

Now to get my 3rd drop down (which is working!) to call relevant data from the DB and display it.

The fun never ends!

Linc

w00t! :cheers2:

Grimm

Keebler wrote:

w00t! :cheers2:

I had a

<form>
'
'
'
'
'
</form>

Inside of another

<form>
'
'
'
'
'
</form>

that was causing me some issues