My Ajax Works on IE but doesnt on FF, Chrome, Safari - HELP

[iPixel]

Hey Guys, So to keep this story short here's what's going on.

 

I have a form that passes variables from page 1 to page 2.

This form has two dropdowns, this is where the ajax  / php come in.

Based on the choice from dropdown 1, dropdown 2 get's populated.

 

The issue is that page 1 passes a variable called form_departmentid to page 2, and then page 2 for now simply does an echo to show the variables values.

 

Here's my code.

 

Page 1 [The Form Dropdown1]

<td style="border-bottom:1px solid #e7e7e7;">
        <select name="form_branch" id="form_branch" class="form_dropdown" onChange="ajaxFunctionDDD(this.value)">
        <option value="0">SELECT A BRANCH</option>
        <?php
	$branch_query = "SELECT * FROM xr_branch";
	$branch_sql = mysql_query($branch_query) or die(mysql_error());
	$branch_res = mysql_fetch_assoc($branch_sql);
	do
		{
		?>
            <option value="<?php echo $branch_res['BranchID']; ?>"><?php echo $branch_res['BranchName']; ?></option>
            <?php
		}
	while($branch_res = mysql_fetch_assoc($branch_sql));
	?>
        </select>
        </td>

 

---- Notice the ajax call onChange="ajaxFunctionDDD(this.value)"

 

Here is my ajax function

 

// AJAX for dropdown creation on Add employee Form
function ajaxFunctionDDD(q)
{
//	alert(q);
var ajaxRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function()
{
	if(ajaxRequest.readyState == 4)
	{
		var ajaxDisplay = document.getElementById('TheDropdownTD');
		//alert(ajaxRequest.responseText);
		ajaxDisplay.innerHTML = ajaxRequest.responseText;
	}
}
ajaxRequest.open("GET", "../DepDropDown.php?q=" + q, true);
ajaxRequest.send(null); 
}

 

---- This calls a page DepDropDown.php and passes the value of branch in variable q using the get method

 

This is DepDropDown.php

 

<?php
// THIS PAGE DOES THE DYNAMIC DEPARTMENT DROPDOWN FOR ADD EMPLOYEE \\
include('c2db.php');
//get the q parameter from URL
$q = $_GET["q"];

$SP_query = "SELECT * FROM xr_dept WHERE BranchID = '$q'";
$SP_sql = mysql_query($SP_query) or die(mysql_error());

$display_string = "<select name='form_departmentid' id='form_departmentid' class='login_txt_box'>";
while($SP_result = mysql_fetch_assoc($SP_sql))
{
	$display_string .= "<option value='" . $SP_result['DeptID'] . "'>" . $SP_result['DeptName'] . "</option>";
}
$display_string .= "</select>";
echo $display_string;
?>

 

---- The code above generates the <select> dropdown field and inserts it into the appropriate <td>

 

 

So i'm completely stuck as to why this works 100% in IE but completely fails in FF, Chrome, Safari.

 

All other variables work, only the ajax dynamically created dropdown fails to pass it's value.

 

 

Thanks for any and all help you can give!

[JustLikeIcarus]

Make your life easier. Use jQuery and your javascript becomes the following.

 

$('#form_branch').change(function(){
  var randomnumber=Math.floor(Math.random()*11)
  var value = $(this).val();
  $.get('../DepDropDown.php', {q: value, rand: randomnumber}, function(data){
    $('#TheDropdownTD').append(data);
  }) ;
});

 

Note that the random number is there to fix an issue in ie where it likes to cache get requests and reuse them instead of actually requesting again.

[iPixel]

I dont quite understand your JS code. How do i call it?

 

<script language="javascript">
$('#form_branch').change(function(){
  var randomnumber=Math.floor(Math.random()*11)
  var value = $(this).val();
  $.get('../DepDropDown.php', {q: value, rand: randomnumber}, function(data){
    $('#TheDropdownTD').append(data);
  }) ;
});
</script>

[JustLikeIcarus]

Well you would add in jquery with

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

 

Then the jquery code

<script language="javascript">
$(document).ready(function(){
  $('#form_branch').change(function(){
    var randomnumber=Math.floor(Math.random()*11)
    var value = $(this).val();
    $.get('../DepDropDown.php', {q: value, rand: randomnumber}, function(data){
      $('#TheDropdownTD').append(data);
    }) ;
  });
});
</script>

[iPixel]

That's exactly what i had, but nothing happens.

[JustLikeIcarus]

Ok so you removed the other js right? and removed the onChange from the select box?

 

add an alert to see if its getting called.

 

<script type="text/javascript">
$(document).ready(function(){
  $('#form_branch').change(function(){
    alert('item changed');
    var randomnumber=Math.floor(Math.random()*11)
    var value = $(this).val();
    $.get('../DepDropDown.php', {q: value, rand: randomnumber}, function(data){
      $('#TheDropdownTD').append(data);
    }) ;
  });
});
</script>

 

If that alert doesnt get triggered then do a view source on the page and post it.

[iPixel]

I got it working, and although the ajax portion where the dropdown gets created works fine, it still has the same original issue where the actual value of the option selected in form_department does not get passed onto the next page upon submit. So while this is a cleaner way to do it, it's still not much help.

[JustLikeIcarus]

Ok here add an alert of the value to make sure the js is getting it.

<script type="text/javascript">
$(document).ready(function(){
  $('#form_branch').change(function(){
   
    var randomnumber=Math.floor(Math.random()*11)
    var value = $(this).val();
     alert(value);
    $.get('../DepDropDown.php', {q: value, rand: randomnumber}, function(data){
      $('#TheDropdownTD').append(data);
    }) ;
  });
});
</script>

[iPixel]

I did something liek it b4 i read this thread again...

 

i did alert(ajaxResponse.responseText); which basically gave me the ajax return value.... which contains the html code for the dropdown and that is all correct.... what i did then is added an onSubmit function to the form so when it is submitted i asked to alert(value of form_department) and it returns UNDEFINED.

 

Somehow for some reason even though the dropdown shows up, even though the dropdowns code is correct and accurate it still not actually sending it's value.

 

soo ummm.... WTH!

[JustLikeIcarus]

Oh so this is after the new select box has been added?  Most likely its because your modifying the dom and it doesnt know about that select element so you either need to put the select in there and leave it empty then have the js just send the option list into it or do the form submit with javascript.

[iPixel]

how would i put the select into the DOM?

[JustLikeIcarus]

Try adding the select box to the regular form and have your script only send back the options. like

 

<select name='form_departmentid' id='form_departmentid' class='login_txt_box'>
</select>

 

then js would be

 

<script type="text/javascript">

$(document).ready(function(){

  $('#form_branch').change(function(){

 

    var randomnumber=Math.floor(Math.random()*11)

    var value = $(this).val();

    $.get('../DepDropDown.php', {q: value, rand: randomnumber}, function(data){

      $('#form_departmentid').append(data);

    }) ;

  });

});

</script>

[iPixel]

So...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#form_branch').change(function(){
    //alert('item changed');
    var randomnumber=Math.floor(Math.random()*11)
    var value = $(this).val();
    $.get('DepDropDown.php', {q: value, rand: randomnumber}, function(data){
      $('#TheDropdownTD').html(data);
    }) ;
  });
});
</script>

 

then

 

<td style="border-bottom:1px solid #e7e7e7;">
        <select name="form_department" id="form_department" class="form_dropdown">
        	<option value="0">SELECT A DEPARTMENT</option>
            <div id="TheDropdownTD"></div>
	</select>
        </td>

 

 

and the  file that created the options

 

<?php
// THIS PAGE DOES THE DYNAMIC DEPARTMENT DROPDOWN FOR ADD EMPLOYEE \\
include('c2db.php');
//get the q parameter from URL
$q = $_GET["q"];

$SP_query = "SELECT * FROM xr_dept WHERE BranchID = '$q'";
$SP_sql = mysql_query($SP_query) or die(mysql_error());

$display_string = "";
while($SP_result = mysql_fetch_assoc($SP_sql))
{
	$display_string .= "<option value='" . $SP_result['DeptID'] . "'>" . $SP_result['DeptName'] . "</option>";
}
echo $display_string;
?>

 

 

For some bloody reason, the ajax stops working. The drop down stops populating.

[JustLikeIcarus]

You should just be able to append data into the select box. I dont think the having the div in there is valid.  Should be able to just do .append(data) also the get request before had ../ before it and now you dont have it.

[iPixel]

I GOT IT WORKING !! WOHOOOOOO!!!

 

I changed the jQuery code a bit... replaced the "TheDropdownTD" with "form_department"

this allowed me to get rid of the DIV.

 

the reason i dont append is because this dropdown is reliant on the previous one, which can be changed multiple times and i cant have the data appending hence using html(data) works perfectly.

 

THANKS SO MUCH JustLikeIcarus !!! You've been a great help!

 

Here's the code...

<script type="text/javascript">
$(document).ready(function(){
  $('#form_branch').change(function(){
    //alert('item changed');
    var randomnumber=Math.floor(Math.random()*11)
    var value = $(this).val();
    $.get('DepDropDown.php', {q: value, rand: randomnumber}, function(data){
      $('#form_department').html(data);
    }) ;
  });
});
</script>

 

<td style="border-bottom:1px solid #e7e7e7;">
        <select name="form_department" id="form_department" class="form_dropdown">
        	<option value="select">SELECT A DEPARTMENT</option>
	</select>
        </td>