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!