Jquery ajax doesn't work as it should in IE

Question

Hi All

We're building a web app, and it's using jquery ajax and jsp on the 'select' tags. Ajax request works in all browsers except, of course, the notorious IE family. Normally, if I click on a 'select' tag, it supposed to dynamically populate the other 'select' tags depending on the option chosen. But in IE, this functionality works for the 1st time and then stops working for the 2nd time. Then when I click another 'select' tag for the 3rd time, everything works as normal. It's that 2nd time that worries me.

Here's the jquery ajax code, and it's applied to all onchange events of all 'select' tags:

function updateAvailableAttributes() {
var form = document.forms["orderDefinition"];
form.elements["formChangeRequest"].value = "true";
$.ajax({
  type: "POST",
  cache: false,
  dataType: "html",
  url: "ajax/possibleValues.html",
  data: $("form#orderDefinition").serialize(),
  success: function(response){
    $('#usercontent .sleeve .toprow').html(response);
        //alert("Ajax is working!");
    applyValidation();
    radioButtonHighlightSelection();
  },
  error: function(response, ioArgs, err) {
         if (response.status == 601) {
             sessionTimedOut();
         }
  }       
});

// Display a "please wait" message
$("#waitingMsgOverlay, #waitingMsgBox, #waitingMsg, #waitingMsgParag").ajaxStart(function(e){
      var map = document.getElementById("OrderMap");
      map.disableApplication();
      $(this).show();
  }).ajaxStop(function(e){
      var map = document.getElementById("OrderMap");
      map.enableApplication();
      $(this).hide();
      $("#toolpanel").height($("#orderMap").height());
});
}

Please advice me on this, it's getting annoying.

Here's the 'radiaButtonHighlightSelection()' code:

function radioButtonHighlightSelection()
{   
var radioBtnCollection = $("#orderDefinition input:radio");
var radioBtnCheckedCollection = $("#orderDefinition input:radio:checked");
var checkBoxCollection = $(".fixedPricedAreasHolder input:checkbox");
var checkBoxCheckedCollection = $(".fixedPricedAreasHolder input:checkbox:checked");

radioBtnCollection.each(function(i, elemRd)
{
    if(elemRd.checked)
    {
        $(this).parent().addClass("selectedRadioBg");
        $(this).parent().next(".fixedPricedAreasHolder").addClass("selectedCheckboxBg");
    }
    else
    {
        $(this).parent().removeClass("selectedRadioBg");
    }

    checkBoxCollection.each(function(i, cb)
    {
        if(cb.checked)
        {   
            if($("#orderDefinition input:radio:eq(0)")[0].checked){
                $("#orderDefinition input:radio:eq(0)").removeAttr("checked");
                $(this).parent().parent().prev().find("input:radio").attr({"checked": "checked"});
                $(elemRd).parent().removeClass("selectedRadioBg");

                $(this).parent().parent().prev().addClass("selectedRadioBg");
                $(this).parent().parent().addClass("selectedCheckboxBg");
            }
            else if(cb.checked ==  false){
                $("#orderDefinition input:radio:eq(0)").attr({checked: "checked"});
                $("#orderDefinition input:radio:eq(1)").attr({checked: "checked"});
            }
        }
    });

});
}

Thanks in advance.

Answer 1

@Shaoz - You need to show how your turning on the radio buttons. Maybe show radioButtonHighlightSelection() function. IE has a problem with executing events from jQuery properly, because of event execution sequencing. I think you might want to execute a blur event after executing a click event.

You might want to check out my question on checkboxes.