my jquery ajax doesnt seems to work in ie6

Question

Hi I am using jquery ajax in my project thats working good in my firefox But it doesnt seem to work in IE6 How to make the jquery Ajax work in Ie6 This is my code

function Load_State(inp)
{

$.ajax({
   type: "GET",
   url: "<?=base_url()?>/system/application/views/ssitAjax.php",
   data: "selCurCountry="+inp,
   success: function(msg){
     //alert(  msg );
     document.getElementById('selCurState').innerHTML=msg;
   }
 });
} 
function Load_City(inp)
{

$.ajax({
   type: "GET",
   url: "<?=base_url()?>/system/application/views/ssitAjax.php",
   data: "selCurState="+inp,
   success: function(msgq){
    //alert(  msgq );
     document.getElementById('selCurCity').innerHTML=msgq;
   }
 });
}

This is my ssit ajax page

<?php

include('dbConnection.php');

session_start();
if(($_GET['selCurCountry']!="") || (isset($_GET['selCurCountry'])))
{

             $Country = $_GET['selCurCountry'];
             $_SESSION['Country'] = $Country;

            $query = "SELECT dState_id,dStateName 
                            FROM tbl_state
                            WHERE dCountry_id='$Country'
                            AND dIsDelete='0'";


            $result = mysql_query($query,$cn) or die("Selection Query Failed !!!");

            echo '<option value="0">Select The State</option>';

            while($rowset = mysql_fetch_array($result))
             {
               echo "<option value='".$rowset[0]."'>".$rowset[1]."</option>";
             }

}
else if(($_GET['selCurState']!="") || (isset($_GET['selCurState'])))
{

            $State = $_GET['selCurState'];
            $_SESSION['state'] = $State;
            $query = "SELECT dCity_id,dCityName FROM tbl_city
                        WHERE dState_id='$State'
                        AND dIsDelete='0'";


            $result = mysql_query($query,$cn) or die("Selection Query Failed !!!");


            echo '<option value="0">Select The City</option>';

            while($rowset = mysql_fetch_array($result))
             {
               echo "<option value='".$rowset[0]."'>".$rowset[1]."</option>";
             }



}?>

EDIT:

 <option value="0">Select The State</option>
 <option value='1'>Andhra Pradesh</option><option value='2'>Arunachal Pradesh</option><option value='3'>Assam</option><option value='4'>Bihar</option><option value='5'>Chandigarh</option><option value='6'>Chhattisgarh</option><option value='7'>Dadra and Nagar Haveli</option><option value='8'>Daman and Diu</option><option value='9'>Delhi</option><option value='10'>Goa</option><option value='11'>Gujarat</option><option value='12'>Haryana</option><option value='13'>Himachal Pradesh</option><option value='14'>Jammu and Kashmir</option><option value='15'>Jharkhand</option><option value='16'>Karnataka</option><option value='17'>Kerala</option><option value='18'>Lakshadweep</option><option value='19'>Madhya Pradesh</option><option value='20'>Maharashtra</option><option value='21'>Manipur</option><option value='22'>Meghalaya</option><option value='23'>Mizoram</option><option value='24'>Nagaland</option><option value='25'>Orissa</option><option value='26'>Puducherry</option><option value='27'>Punjab</option><option value='28'>Rajasthan</option><option value='29'>Sikkim</option><option value='30'>Tamil Nadu</option><option value='31'>Tripura</option><option value='32'>Uttar Pradesh</option><option value='33'>Uttarakhand</option><option value='34'>West Bengal</option>

Answer 1

I have not experienced PHP before but have had similar weirdness in IE with ajax/get/post calls. Have you tried specifying content-type?

$.ajax({ url: "/home/myPage.aspx",
         type: "GET",
         data: { selCurrCountry: inp }, 
         content-type: "application/json",
         success: function(data) {
            alert("Yay!");
         }
});

Also, if you are needing that data value in the query string, why not just append it to the url and set data: {} or not at all?

$.ajax({ url: "/home/myPage.aspx?selCurCountry=" + inp,
         type: "GET",
         success: function(data) {
            alert("Yay!");
         }
});

Hope this helps.

Answer 2

Oh wait a minute - I think I know what the problem is. In IE6, you cannot just replace the "innerHTML" of <select> elements like that. You have to rebuild the whole <select> from scratch. (Or you can empty out the options array on the <select> elements and rebuild them with DOM APIs.)

Try wrapping the <select> elements in <span> tags (with "id" values) and then rebuild the "innerHTML" of those, adding the <select> elements again. That's a pain I know and it might mess up other stuff, but it'd be a good experiment to validate my suspicion.