Problem updating select tag with ajax on IE
I have a problem with inner html funcion when updating tag options. In the first select tag I am chosing a country and ajax code must update cities in the other select tag. My code works in all major browsers except IE. Here is the js code for calling php script:
>function show_zones(str)
>{
>if (window.XMLHttpRequest)
> {// code for IE7+, Firefox, Chrome, Opera, Safari
> xmlhttp=new XMLHttpRequest();
> }
>else
> {// code for IE6, IE5
> xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
> }
>xmlhttp.onreadystatechange=function()
> {
> if (xmlhttp.readySta开发者_运维百科te==4 && xmlhttp.status==200)
> {
> document.getElementById('region_to').innerHTML="";
> jQuery.noConflict();
> (function($) {
> $('#region_to').append(xmlhttp.responseText);
> })(jQuery);
> alert(xmlhttp.responseText);
> }
> }
>xmlhttp.open("GET","ajax/zones.php?country="+str,true);
>xmlhttp.send();
>}
In all browsers alerted code returns appropriate option tags but in IE it returns "Undifined". I am using Jquery to append xmlhttp.responseText because IE does not support innerhtml for select tags. noConflict function is used to avoid conflict between mootolls and jquery libraries. I can`t just place select tag in a div and print it instead of printing just options because I am using custom select which is being created by js code when the window.onload event occurs.
here is the php code:
>require_once("../../connect.php");
>$country_query="SELECT* FROM `tour_countries` WHERE >country_name='".$_GET['country']."'";
>$country_result=mysql_query($country_query);
>$country_row=mysql_fetch_array($country_result);
>$zone_query="SELECT* FROM `tour_zones` WHERE country_ID='".$country_row[0]."'";
>$zone_result=mysql_query($zone_query);
>while($zone_row=mysql_fetch_array($zone_result))
>{
> echo '<option value="'.$zone_row[1].'">'.$zone_row[1].'</option>';
>}
Thanks for replys and sorry for my poor englesh.
I had the same issue with IE and .innerHtml() with ajax calls. I solved it by making the AJAX a POST request and using jQuery .html() instead of .innerHTML(), for some reason IE is pretty glitchy with innerHtml(). Here's the working function I used:
function getCitiesFromState(state, select, spinnerNum)
{
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var ran = Math.round((new Date()).getTime() / 1000),
terms = "state="+state+'&r='+ran;
xmlhttp.open("POST","ajax5.php",true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
/***********************************************************
* These two lines cause Chrome to throw non-fatal errors.
* Removing them didn't change the functionality of the
* request, but this may end up needing a conditional.
***********************************************************/
//xmlhttp.setRequestHeader('Content-length', terms.length);
//xmlhttp.setRequestHeader('Connection', 'close');
xmlhttp.onreadystatechange = function()
{
$('#spinner'+spinnerNum).fadeIn(300);
if (xmlhttp.readyState == 4
&& xmlhttp.status == 200)
{
$('#spinner'+spinnerNum).fadeOut(100);
$('#'+select).html(xmlhttp.responseText);
}
}
xmlhttp.send(terms);
}
And the ajax5.php file:
<?php
include 'db.class2.php';
$DB = new DB_MySql2;
$DB->connect();
$state = mysql_real_escape_string($_POST['state']);
$q = $DB->query("SELECT DISTINCT `city`, `zip_code`
FROM `usa_master`
WHERE `state` = '".$state."'
GROUP BY `city`
ORDER BY `population` DESC LIMIT 0, 150");
while($r = $DB->fetch_assoc($q)) {
$city[] = $r['city'];
$zips[] = $r['zip_code'];
}
array_multisort($city, $zips);
echo '<option value="" selected="selected">Select City</option>';
$size = sizeof($city);
for ($x = 0; $x < $size; $x++)
{
if (strlen($zips[$x]) == 4)
{
$zips[$x] = '0' . $zips[$x];
}
echo '<option class="city_list" value="'.$zips[$x].'">'.$city[$x].'</option>';
}
?>
Hope this helps.
精彩评论