Ajax working with Javascript - php

Question

Hi All
I am working in a PHP project. I am stucked with an issue related with Ajax.
I have A select box for Company on whose selection department is displayed using ajax, and on selection of department from department select box along with another User group select box I get the list of users.
Now on change of User group I Send request to server using ajax as user group id and department id to fetch the respective users. But when I reselect the department I cannot get the new user list as this department list is generated from ajax and Ajax do not handle Javascript.
Code I Am Working With:
select box to select company
<select name="companyname" id="companyname" onchange="javascript:dochange(this.value);">
<option value="-1">-----Select Company-----</option>
<?php foreach($user_obj->getUserCompanyname() as $key => $value){
$selected = '';
if($value['company_id'] == $user_obj->user_company_id){
$selected = 'selected="selected"';
}
?>
<option value="<?php echo $value['company_id'];?>"
<?php echo $selected;?>><?php echo $value['company_name'];?></option>
<?php }?>
Javascript to execute ajax
<script>
//Inint_AJAX funnction is excluded as it has to do anything with requirement
function dochange(val) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById('selectdepartment').innerHTML="";
document.getElementById('selectdepartment').innerHTML=req.responseText; //retuen value
}
}
};
req.open("GET", "company.php?val="+val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
}
</script>
company.php
$val=$_GET['val'];
echo "<select name='departmentname' id='departmentname'>\n";
echo "<option value='-1'><b>Select Department</b></option>\n";
foreach($user_obj->getUserDepartmentname($val) as $k=>$vals){
echo "<option value='".$vals['department_id']."'>".$vals['department_name']."</option>";
}
echo "</select>\n<br>";
echo " <span class='asterisk>NOTE:Please (Re)Select the User Group everytime you change department.</span>";
User Group Select Box
<select name="usergroupname"
onchange="javascript:dochangereport(this.value,document.getElementById('departmentname').value);
dochangeoverride(this.value,document.getElementById('departmentname').value);" id="usergroupname">
<option value="-1">Select User Group</option>
<?php
foreach($user_obj->getUserGroupName() as $gkey=>$gval){
$gselect = '';
if($gval['usergroup_id'] == $user_obj->user_group_id){
$gselect = 'selected="selected"';
}
?>
<option value="<?php echo $gval['usergroup_id'];?>"
<?php echo $gselect;?>><?php echo $gval['usergroup_name'];?>
</option>
<?php }?>
</select>
function calling ajax call
<script>
function dochangereport(val,dep) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById('selectreport').innerHTML="";
document.getElementById('selectreport').innerHTML=req.responseText; //retuen value
}
}
};
req.open("GET", "reportto.php?val="+val+"&dep="+dep); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
}
</script>
**reportto.php**
$val=$_GET['val'];
$dep=$_GET['dep'];
echo "<select name='reportingto[]' multiple='multiple' size='3'>\n";
echo "<option value='-1'><b>Select Supervisor(s)</b></option>\n";
foreach($user_obj->getUserReportingto($val,$dep) as $rkey=>$rval){
echo "<option value='".$rval['user_id']."'>".$rval['user_fname']." ".$rval['user_fname']." </option>";
}echo "</select>\n";
could someone help me out in this?

Answer 1

I'm going to guess here: you are probably using something like
$('select.department').change(function() { (...ajax...)});
Instead, use:
$('select.department').live('change', function() { (...ajax...)});
This will also match any elements that are added later and match your jQuery selector. See also: http://api.jquery.com/live/.
EDIT:
Ok, so I guessed wrong. If you're not using jQuery, you will have to use event bubbling (http://www.quirksmode.org/js/events_order.html) (EDIT: apparently, onchange doesn't bubble in IE, see Does the onchange event propagate?) or add the event handler to the newly created <select> each time you update it, using
if (req.status==200) {
document.getElementById('selectreport').innerHTML="";
document.getElementById('selectreport').innerHTML=req.responseText; //retuen value
document.getElementById('reportingto').onchange = function() {
var val = this.value,
department = document.getElementById('departmentname').value;
dochangereport(val, department);
dochangeoverride(val, department);
}
}
And then add an id to your ajaxed selectbox, like this:
(reportto.php)
echo "<select id='reportingto' name='reportingto[]' multiple='multiple' size='3'>\n";
Good luck!

Answer 2

I found the other way round...
I Just changed the ajax caling functiona as
I just change the container ID to select box ID
function dochange(val) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById('departmentname').innerHTML="";
document.getElementById('departmentname').innerHTML=req.responseText; //retuen value
}
}
};
req.open("GET", "company.php?val="+val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
}
And changed company.php file to
$val=$_GET['val'];
echo "<option value='-1'><b>Select Department</b></option>\n";
foreach($user_obj->getUserDepartmentname($val) as $k=>$vals){
echo "<option value='".$vals['department_id']."'>".$vals['department_name']."</option>";
}
And Hence gave me all required result..