Jquery problem with IE

Question

i am having problems with Jquery in IE, the code is not working, can any one help me.

http://efm.net.au/component/content/article/54

please check this in IE and FF (or opera, safari, chrome) and select state, and you will see that clubs get loaded but do not show up in IE, but they show up in FF.

Please help its kind of urgent. thanks

    function loadClub()
{




  var st = document.getElementById("State").value;

  if(st != "Select State")
  {
    jQuery("#loaderBox").css("display","block");
//alert(document.getElementById("Club").innerHTML);
//alert($("#State").val());
/*$("div#Club_container").remove();*/

setTimeout('jQuery(".club-drop input").remove();',100);
setTimeout('jQuery("#Club_container").remove();',100);


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.readyState==4 && xmlhttp.status==200)

  {/*
$(".state-drop input#State_input").remove();
$("div#State_container").remove();
$(".club-drop input#Club_input").remove();
$("div#Club_container").remove();*/
//setTimeout('$(".state-drop").remove()',500);

if(jQuery("#club1").length > 0)
{

  document.getElementById("club1").innerHTML=xmlhttp.responseText;
   document.getElementById("club2").innerHTML=xmlhttp.responseText;
    document.getElementById("club3").innerHTML=xmlhttp.responseText;

}else{
    document.getElementById("Club").innerHTML=xmlhttp.responseText;


}
//jQuery("div.state-drop").css("border","none");
jQuery("div.state-drop span").css("display","none");
     jQuery('.efm-text input[type="submit"]').removeAttr('disabled');


    if(jQuery("#club1").length > 0)
{
setTimeout("jQuery('#club1').selectbox()",100);
setTimeout("jQuery('#club2').selectbox()",100);
setTimeout("jQuery('#club3').selectbox()",100);

}else{
setTimeout("jQuery('#Club').selectbox()",100);
    //jQuery('#Club').selectbox();
}

jQuery("#loaderBox").css("display","none");

    }

  }





xmlhttp.open("GET","/club/state-club.php?state="+st,true);

xmlhttp.send();


    }else{
      setTimeout('jQuery(".club-drop input").remove();',100); 
      //jQuery("div.state-drop").css("border","1px solid red");
      jQuery("div.state-drop span").css("display","block");
      jQuery("div.state-drop span").css("color","red");

      jQuery('.efm-text input[type=submit]').attr('disabled', 'disabled'); 
        if(jQuery("#club1").length > 0)
        {

         document.getElementById("club1").innerHTML="Select State First";
   document.getElementById("club2").innerHTML="Select State First";
    document.getElementById("club3").innerHTML="Select State First";

    setTimeout("jQuery('#club1').selectbox()",100);
setTimeout("jQuery('#club2').selectbox()",100);
setTimeout("jQuery('#club3').selectbox()",100);

        }else{
       document.getElementById("Club").innerHTML="Select State First";
    setTimeout("jQuery('#Club').selectbox()",100);
        }

    }


}

@user612703 - you might try posting the code here that doesn't work. Just posting a link to a website will not get you any answers. BTW: it seems to work fine in IE anyway! — Geoff Appleford
it is not working for me or my boss, and my boss is about to kill me because it is not working, i have tried a lot of techniques but it is not working on IE (i have IE8) — user612703
If you are going to use jQuery you might as well use it for everything e.g. don't use innerHTML(), ActiveXObject/XMLHttpRequest or onreadystatechange() as jQuery already provides nice cross browser implementations for these. — row1
i was not able to get good understanding of .ajax() method of jquery thats whay i choose the old fashioned ajax — user612703
I don't know if this is your problem but your response looks like this: "<br /><option value='Brisbane South'>Brisbane South</option><br /><option value='Herston'>Herston</option><br /><option value='Noosa'>Noosa</option>" Point 1. You should not include <br/> tags as I am not sure if they are valid inside a <select/>, IE might not be working because of this. Point 2. You should not be returning html. You should return basic objects and build your select options from that. — row1

Pushkar Pushkar · Accepted Answer · 2011-02-11T10:05:16

1 - Upgrade to the latest version of jQuery. I have never faced any cross browser issues with jQUery.

2 - Replace your ajax code with jQuery code.

E.g -

     $.post("/someapp/login.do",$("#loginForm").serialize(), function(data) {
                    // Callback code
        $('#loginDiv').html(data);
    });

Jquery problem with IE

1 Answers