Dynamic droplists for modify

[tripwater]

Hello, I hope this is posted in the correct forum. This is a mix of php and javascript and what I am trying to do combines the two so I hope this is the best place for this post.

I have 2 situations, one when adding an employee and the other is modifying the employee. I have a drop list the holds all of the companies that when you select a company, it changes the droplist of departments to show the available departments for the chosen company. So the dept droplist dynamically changes based off the company you choose. I have this working perfectly. THis is for adding an employee.

My problem I have now is I need to modify the employee and when you first pull up the form with the employee info, it is populated from a mysql query. The droplist for companies is selected to the correct company, however, the droplist for depts is not because the javascript code I have is set to fill the dept list on an onchange event which on page load does not exist.

If they select a different company, my code works fine but when they first hit the page, the dept list is blank because the onchange event has not been kicked off. I realize this is javascript but I am not sure where my changes need to be made.

below is my code for the companies and depts only. I will leave out the other employee info becasue it is irrelavent. I will post what I have so far and hopefully you can guide me in the right direction 😃

//here we query for all of the companies  to show in a drop list
$query	= "select * from company order by Name";

$result2	= @mysql_query($query);



//query for the employee info
$query	= "select * from employees where ID = ".$HTTP_POST_VARS["employee"];

$result	= @mysql_query($query);

$row		= @mysql_fetch_array($result);



$value = "<SCRIPT LANGUAGE=\"JavaScript\" type=\"text/javascript\">
/*
Script by RoBorg
[e-mail]
http://javascript.geniusbug.com
Please do not remove or edit this message
*/



//Start setup [Edit below here]

var d = new dynamicSelect();

d.addSelect('company');\n";



for ($i = 0; $i < @mysql_num_rows($result2); $i++)
	{	
	//grab a company row												
	$company_row	= @mysql_fetch_array($result2);

//setup our first company array
$value 			.= "d.selects['company'].addOption('".$company_row["ID"]."');\n";

//here I select all the departments for the company we are on and loop through
//setting up our array
$query		= "select ID, Dept from departments where CompanyID = ".$company_row["ID"]." order by Dept";

$tempresult	= @mysql_query($query);


//loop through all the depts for the current company and build our dynamic dept select list
for ($j = 0; $j < @mysql_num_rows($tempresult); $j++)
	{									
	$dept_row	= @mysql_fetch_array($tempresult);

	$value 		.= "d.selects['company'].options['".$company_row["ID"]."'].createOption('".$dept_row["Dept"]."', '".$dept_row["ID"]."');\n";
	}									
}



$value .= "//End setup [Edit above here]



function dynamicSelect()
{
	this.selects = new Array();

this.addSelect = function(name)
{
	this.selects[name] = new selectObj();
}



this.updateOptions = function(source, target)
{
	var form = source.form;
	var target = form.elements[target];
	var value = source.options[source.selectedIndex].value;

	while(target.options.length) target.remove(0);

	if(!this.selects[source.name].options[value])
	{
		//alert('Invalid selection.'); //For debugging while you set it up
		return;
	}

	var data = this.selects[source.name].options[value].options;

	for(var x=0; x<data.length; x++)
	{
		try
		{
			target.add(data[x]);
		}
		catch(e)
		{
			target.add(data[x], null);
		}
	}

	target.selectedIndex = 0;
}

}



function selectObj()
{
	this.options = new Array();

this.addOption = function(value)
{
	this.options[value] = new optionObj();
}
}



function optionObj()
{
	this.options = new Array();

this.createOption = function(name, value)
{
	this.options[this.options.length] = new Option(name, value);
}
}


</script>



<form name=employees method=post action=../admin/employee_submit.php  onSubmit=\"return TheFormCheck()\";>
<table width=650 align=center border=0>
<tr>
	<td>
		<b style=color:E3593B>*</b> Companies
	</td>
</tr>
<tr>
	<td>
		<select name=company onchange=\"d.updateOptions(this, 'dept');\">
		<option value=\"\">-- Companies --";

	@mysql_data_seek($result2,0);
	for ($i = 0; $i < @mysql_num_rows($result2); $i++)
		{
		$row2	= @mysql_fetch_array($result2);

		if ($row2["ID"] == $row["CompanyID"])
			$value .= "<option value=\"".$row2["ID"]."\" selected>".$row2["Name"];

		if ($row2["ID"] <> $row["CompanyID"])
			$value .= "<option value=\"".$row2["ID"]."\">".$row2["Name"];
		}

$value .= "</select>

</td>
</tr>
<tr>
	<td colspan=2>
		<br>
	</td>
</tr>
<tr>
	<td>
		<b style=color:E3593B>*</b> Department
	</td>
</tr>
<tr>
	<td>
		<select name=dept>

	</select>						
</td>
</tr>
<tr>
<td>
<input type=submit value=submit>
</td>
</tr>
</table>
</form>

So again when they pull this page up, I would like the company list to hold what is in the database for that employee as well as the droplist for depts to hold all the depts for the selected company and the selected element in the dept list to be what is in the mysql database for the dept as well. And if they change the company, it continue to work as normal and repopulate the dept list with the new set of depts for the chosen company.

thank you for any help with this.

[bogu]

There are 3 possibilities:

1. When you change one combo box, for onchange event using javascript un pass on GET the param. u want

2. U can create some javascripts arrays for your combo values

3. U can use ajax library

And the best way and the esay way is number 3 that is the most elegant way, and number 1 is preaty easy but not so elegant ...

Number 2 is elegant but is preaty hard to do, you need to know javascript preaty well ...

[tripwater]

1. "When you change one combo box, for onchange event using javascript un pass on GET the param. u want"

-this does not sound like what I need as you refer to changing something first. I just need the company droplist to be populated to what is inthe company table, selected to what is currently set for the employee and that company selection populates the drop for depts and its selected value is what is set for the employee as well. This happens when the page LOADS. It only changes(does what the code currently does) if they change the company(onchange event), then the dept list repopulates.

2. "U can create some javascripts arrays for your combo values"

3. I thought that is what is happening in the code I have. I thought I am populating an array with all the company/depts so if a company is changed, the array of depts populates the list. Please keep in mind that I am not very versed in JS and I had help with the dynamic portion of this so far. I did not write the code, so I do not fully understand it but I have been studying it so I will know how to make modifications later if need. I did work in the php code into the script but that is as far as I got.

4. "U can use ajax library"

-I do not know what a ajax library is...

Thank you for your time and reply. I will look into what an ajax library is but as of now any additional help would be great.

[bogu]

Look here is a little example of dynamic droplists that I made using ajax library.
http://www.cellpex.com
Look at the quick search:
Brand droplist contant is dynamic and it depends on what Product do you choose (Mobile phones, PDAs or Accessories).
And Model droplist is dynamic and it loads models from the brand u choose.

Have fun coding. 😃

[tripwater]

THank you very much bogu for the link and your help. I am looking into AJAX now and it is not something I will be grasping fully over night. THe dynamic droplist itself is not the problem. THe example I have does this. It works.

My problem is that since the dept list is populated off an onchange event of the company select list, that when you go to the modify employee page, when it first populates the form to what is currently in the database, the company list is filled in and selected correctly but the dept list is not because it gets filled by the onchange event of the company list. Which at on page load is not executed. So the Dept list is blank. I need for the page to load, fill the company list and select the company currently set to the employee from the database. And based off the selected company, populate the dept list with the available depts for that company and set to selected, what is in the database for that employee. Now if you change a company in the select lista t this point, it will naturally still do what it is doing now and update the dept list from the onchange event. But I need it to set this form up correctly based on a modify and data currently in the database for the given employee on page load.

Once I learn a bit more about AJAX I will probably use it as a tool for the dynamic lists. But for now, I feel it would just complicate my situation. I feel like I am pretty close to having my solution. Everything works except when first loading the page, the dept list is blank. If I could just get it to populate will the depts from the selected company in the company list and set the selected dept to what is in the DB for the employee ONPAGELOAD. Then I will be done.

Thank you again for your time. I hope this helps explain what I am trying to accomplish.

Oh and thank you for turning me on to AJAX. This is going to be very cool I think. I have been so busy I had no idea this was out there. Helps to look up form the keyboard every so often 😉

[Roger_Ramjet]

I think what you are saying is that you have a general purpose script that does both the add and the edit employees, right? So the problem arises when it submits to itself with an employee selected, you can add "selected" to the company select list and "selected" to the dept select list but can't force the display of the dept list.

What you need is another bit of js that fires onload and looks for either "selected" in the select lists, or some var you add and calls the display dept function when found.
I suppose you want the whole select list so that you can change the employee's dept. Makes sense to me. 🙂

[edit] and if I'd read the whole thread before replying I would not have been asking those questions :o [/edit]

[tripwater]

You are right, I do need the extra bit of JS to do this, problem is , I do not know enough about JS to pull it off at the moment.

FOr the modify, what actually happens is they select an employee first then post to the page in which the code I posted is from. THat page queries for the emplyee info to populate the form. Which is where my current problem is.

But at least you see my problem. I also think I am missing just a small amount of JS code to make this work.

Thanks

[Roger_Ramjet]

Using the php tags just to make it easier to read the code.

/here we query for all of the companies  to show in a drop list
$query	= "select * from company order by Name";

$result2	= @mysql_query($query);



//query for the employee info
$query	= "select * from employees where ID = ".$HTTP_POST_VARS["employee"];

$result	= @mysql_query($query);

$row		= @mysql_fetch_array($result);



$value = "<SCRIPT LANGUAGE=\"JavaScript\" type=\"text/javascript\">
/*
Script by RoBorg
[e-mail]
http://javascript.geniusbug.com
Please do not remove or edit this message
*/



//Start setup [Edit below here]

var d = new dynamicSelect();

d.addSelect('company');\n";



for ($i = 0; $i < @mysql_num_rows($result2); $i++)
	{	
	//grab a company row												
	$company_row	= @mysql_fetch_array($result2);

//setup our first company array
$value 			.= "d.selects['company'].addOption('".$company_row["ID"]."');\n";

//here I select all the departments for the company we are on and loop through
//setting up our array
$query		= "select ID, Dept from departments where CompanyID = ".$company_row["ID"]." order by Dept";

$tempresult	= @mysql_query($query);


//loop through all the depts for the current company and build our dynamic dept select list
for ($j = 0; $j < @mysql_num_rows($tempresult); $j++)
	{									
	$dept_row	= @mysql_fetch_array($tempresult);

	$value 		.= "d.selects['company'].options['".$company_row["ID"]."'].createOption('".$dept_row["Dept"]."', '".$dept_row["ID"]."');\n";
	}									
}



$value .= "//End setup [Edit above here]



function dynamicSelect()
{
	this.selects = new Array();

this.addSelect = function(name)
{
	this.selects[name] = new selectObj();
}



this.updateOptions = function(source, target)
{
	var form = source.form;
	var target = form.elements[target];
	var value = source.options[source.selectedIndex].value;

	while(target.options.length) target.remove(0);

	if(!this.selects[source.name].options[value])
	{
		//alert('Invalid selection.'); //For debugging while you set it up
		return;
	}

	var data = this.selects[source.name].options[value].options;

	for(var x=0; x<data.length; x++)
	{
		try
		{
			target.add(data[x]);
		}
		catch(e)
		{
			target.add(data[x], null);
		}
	}

	target.selectedIndex = 0;
}

}



function selectObj()
{
	this.options = new Array();

this.addOption = function(value)
{
	this.options[value] = new optionObj();
}
}



function optionObj()
{
	this.options = new Array();

this.createOption = function(name, value)
{
	this.options[this.options.length] = new Option(name, value);
}
}


</script>



<form name=employees method=post action=../admin/employee_submit.php  onSubmit=\"return TheFormCheck()\";>
<table width=650 align=center border=0>
<tr>
	<td>
		<b style=color:E3593B>*</b> Companies
	</td>
</tr>
<tr>
	<td>
		<select name=company onchange=\"d.updateOptions(this, 'dept');\">
		<option value=\"\">-- Companies --";

	@mysql_data_seek($result2,0);
	for ($i = 0; $i < @mysql_num_rows($result2); $i++)
		{
		$row2	= @mysql_fetch_array($result2);

		if ($row2["ID"] == $row["CompanyID"])
			$value .= "<option value=\"".$row2["ID"]."\" selected>".$row2["Name"];

		if ($row2["ID"] <> $row["CompanyID"])
			$value .= "<option value=\"".$row2["ID"]."\">".$row2["Name"];
		}

$value .= "</select>

</td>
</tr>
<tr>
	<td colspan=2>
		<br>
	</td>
</tr>
<tr>
	<td>
		<b style=color:E3593B>*</b> Department
	</td>
</tr>
<tr>
	<td>
		<select name=dept>

	</select>						
</td>
</tr>
<tr>
<td>
<input type=submit value=submit>
</td>
</tr>
</table>
</form>

[Roger_Ramjet]

Hm, whoever wrote this is way out of date: we don't use $HTTP_POST_VARS["employee"] in php, have not for year, it ought to be $_POST['employee']. But that is a side issue.

It now sounds to me as if you have 2 seperate scripts, one for add and one for edit, but sharing the same code. No matter.

In the outer code to this snippet, where the <body> etc is, you need to test for $_POST['employee'] and do this to the <body> tag. I say you need to test for the post employee because that is good coding practice, but your code is already either testing it somewhere, or more probably just assuming it is set. Whatever?

if (isset($_POST['employee'])) {
?>
 <body onLoad="<script language='javascript' type='text/javascript'>
       d.updateOptions(document.getElementByName('company'), 'dept');
  </script>">
<?
} else {
   echo '<body>';
}

Now. I'm still very weak on javascript. It is 5 years since I did much and since then it's all change what with the DOM and all; but that is why I'm eager to have a go at this.

What I'm trying to do is to emulate the onChange call of the company select when the page is loaded. If it succeeds then you'll get your dept list displayed.

Now the first problem I see is that all your existing js functions seem to be 'inline', embedded in the <body>. I always had mine in the <head>. So I think that maybe my call to the d.updateOptions is not going to work because it comes before the function code - the main reason for me putting it all in the <head>.
These days I'd have all this in a js file linked in the <head> anyway: saves having to repeat it all from page to page.

Another potential problem is that there is no browser 'sniffing' to determine if it infact supports the DOM. Not my problem really as it will negate all your other stuff anyway if the user's browser does not.

Give it a try and let's see how it goes.

[tripwater]

OK, I added the code to the body tag and I am getting a syntax error now. Here is what my code looks like

<BODY topmargin=\"0\" marginwidth=\"0\" leftmargin=\"0\" hspace=\"0\" onLoad=\"<script language='javascript' type='text/javascript'>d.updateOptions(document.getElementByName('company'), 'dept');</script>\">

[Roger_Ramjet]

So if you are getting an error message then post the error message :rolleyes:

[Roger_Ramjet]

<BODY topmargin=\"0\" marginwidth=\"0\" leftmargin=\"0\" hspace=\"0\" onLoad=\"<script language='javascript' type='text/javascript'>d.updateOptions(document.getElementByName('company'), 'dept');</script>\">

OK, I'm gonna guess that it's a php parsing error. Bound to happen with all the quoting goin on in there. In php you end up embedding a string within a strin within a string = 3 levesl and only 2 quote types :queasy: That is why in my code I use the php tags to break out of php so I could just write the html.

?> // end php processing, now we can just write html

<BODY topmargin="0" marginwidth="0" leftmargin="0" hspace="0" onLoad="<script language='javascript' type='text/javascript'>d.updateOptions(document.getElementByName('company'), 'dept');</script>">

<?php  // start writing php code again

see if that fixes anything.

[tripwater]

I'm sorry, I should have given you more. It is a syntax error in Javascript. No other info offered. The reason for the quote escapes is because the HTML for that section of the code is held within a local var and echoed later.

I am looking into the syntax error now but not sure I see anything wrong.

When I look in the JS console in Firefox, the line looks like

<script language='javascript' type='text/javascript'>d.updateOptions(document.getElementByName('company'), 'dept');</script>

Thanks again for your time

[tripwater]

UPDATE***

I actually removed the script tags in the onload event to see what happened and now I am getting this JS error

Error: document.getElementByName is not a function

What the line looks like now:

onLoad=\"d.updateOptions(document.getElementByName('company'), 'dept');\"

Thanks again

[Roger_Ramjet]

HM! As I said I'm winging it with this. Change it to document.getElementByID('company') and see if that one works.

Like I said though, if the js function 'd.updateOptions' is not above this in the <head> then I doubt you can call it. Just move all that stuff, the whole javascript, into the <head> of the page, where it should be in the first place.

Then try both calls: getElementByID and getElementByName. What they are supposed to achieve is the same as you original call which was d.updateOptions(this, 'dept'); 'this' works here because it is in the onchange event of the select element, so 'this' returns a reference to the select list itself. Elsewhere we have to use the DOM to get a reference and the usual way is getelementby id or name accordingly. Hell, even as I write this I realise that it need to be getElementByID('company') because we are supplying the name and it is returning the DOM id.

[tripwater]

Ok, I changed the code to have the getElementById in the onload of the body tag and then added the id=company in the company select field and now it populates the list correctly.

But it is only selecting the top choice, not the correct choice associated with the selected company. This is REALLY close! I am farther than I was! THank you. DO you have any suggestions or ideas now as to what I need to do to get this to select the correct dept based on the company that is selected? Or should I now submit this to a javascript forum?

Thank you again for your time.

[Roger_Ramjet]

Oh drat. I thought the d.updateOptions method was supposed to grab the selected option value and go from there. But it is displaying the dept select now, allbeit with the wrong options listed?

Yes, I think it's time for a js forum. I'm sure that the methods could be readily amended to cope with their new role in displaying previously selected data, just not sure how.

Please post the answer back here when you find one. Good luck.