ajax script doesn't work in IE

Question

I have a problem with this ajax script in IE, because it doesn't work, it works in FF and Chrome perfectly but in IE it simply doesn't work. there are two drop down boxes and according to what I have selected in the first one the second dropdown box with show values for the selected city.

    <select class="selectDest" name="Prej" onChange="getState(this.value)">
        <option></option>
        '.funksionet::all_directions().'
    </select>

this is the second dropdown box:

    <div id="statediv"><select class="selectDest" name="deri">
        <option></option>
    </select></div>

this is the ajax function:

<script language="javascript" type="text/javascript">
function getXMLHTTP() { //function to return the xml http object
        var xmlhttp=false;  
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)    {       
            try{            
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1){
                    xmlhttp=false;
                }
            }
        }

        return xmlhttp;
    }

    function getState(countryId) {      

        var strURL="findState.php?country="+countryId;
        var req = getXMLHTTP();

        if (req) {

            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById(\'statediv\').innerHTML=req.responseText;                       
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           
            req.open("GET", strURL, true);
            req.send(null);
        }       
    }
</script>

This is the findstate.php file:

<?php 
require_once 'includes/constants.php';
$country = $_GET['country'];
$link = mysql_connect(DB_SERVER, DB_USER, DB_PASSWORD); //changet the configuration in required
if (!$link) {
    die('Could not connect: ' . mysql_error("1"));
}
mysql_select_db(DB_NAME);
$query="SELECT * FROM costs WHERE prej = '$country';";
$result=mysql_query($query) or die("2");
?>
<select class="selectDest" name="Deri">
 <option></option>
  <?php while($row = mysql_fetch_array($result)) { 
    print'<option>'.$row['deri'].'</option>';

  }
 ?>
</select>

I really need to make this work, I will greatly appreciate if anyone is going to help me on this. Because I am not good with JavaScript. But if there is no way that I can do this cross-browser then I would like to know and I wont make it this way.

Answer 1

$country = $_GET['country'];
$query="SELECT * FROM costs WHERE prej = '$country';";

I know, this is offtopic, but it is not good

Answer 2

In IE, the "this" pointer inside of an event handler is NOT the element that caused the event. It's the window object instead. To do this in a cross browser way I recommend you really understand all of what it's doing by reading this: https://developer.mozilla.org/en/DOM/element.addEventListener

Using jQuery would help, but I still think you should understand it to avoid future problems:)

Answer 3

Javascript fundamentals are about the same on every browser, but the DOM, AJAX and some other parts have a lot of different implementations(especially IE likes to be different). A long time ago a lot of really smart javascript programmers decided to put a halt to this pain and developed javascript libraries. There are a lot of javascript libraries available, but in my opinion the most easy one is jquery . You can view code to see how Jquery did there AJAX requests. The code is really nice if you ask me. Jquery has very good documentation and your code will look a lot cleaner when using Jquery.

I shared a little snippet on jsfiddle that does a http POST request(alerts output) in just a couple of lines, which can be found at: http://jsfiddle.net/9yC8h/2/ . /echo/html/ just a url which outputs the html as explained by jsfiddle.