CODEWITHSUNDEEP
javascriptjqueryajaxinternet-explorer-8internet-explorer-7
napolux
napolux

Reputation: 16074

IE7/8 duplicated AJAX requests

On a code I wrote...

function change_regione(handle) {
// Hiding selects that we don't need
jQuery("select#comune").hide();
jQuery("select#quartiere").hide();
if(jQuery("#regione").val() == '') {
    jQuery("select#provincia").parent().hide();
    return
}

jQuery.ajax( {
    url : WEBSITE_PATH + 'loadProvince.php',
    type : 'GET',
    dataType: 'json',
    data : {
        search_value : jQuery("#regione option:selected").attr("rel")
    },
    success : function(result) {
        var provinceOptions = "<option value=\"\">Tutte le province</option>";
        jQuery.each(result,function(i,el){
            provinceOptions += '<option value="'+ el.url +'" rel="'+ el.id +'">' + el.value.replace("~","") + '</option>';
        }); 
        jQuery("select#provincia").parent().show();
        jQuery("select#provincia").html(provinceOptions).show();
    },
error : function(request, status, error) {
}
});

}

IE7/8 launches the AJAX request twice on the onchange() event for a select. 

<select id="regione" name="regione" class="srhbox" onchange="change_regione(this)">
...
</select>

Firefox, Safari, Chrome, behave correctly.

What's going on? Have you ever seen this behaviour?

Upvotes: 0

Views: 405

Answers (2)

ShankarSangoli
ShankarSangoli

Reputation: 69905

I don't know why it behaves like this but I have a work around for you. Try this.

var requestInProgress = false; // Variable to check if the request is in progress
function change_regione(handle) {

  if(requestInProgress){
     return;
  }

  requestInProgress = true;
  // Hiding selects that we don't need
  jQuery("select#comune").hide();
  jQuery("select#quartiere").hide();
  if(jQuery("#regione").val() == '') {
     jQuery("select#provincia").parent().hide();
     return
  }

  jQuery.ajax( {
      url : WEBSITE_PATH + 'loadProvince.php',
      type : 'GET',
      dataType: 'json',
      data : {
          search_value : jQuery("#regione option:selected").attr("rel")
      },
      success : function(result) {
          var provinceOptions = "<option value=\"\">Tutte le province</option>";
          jQuery.each(result,function(i,el){
              provinceOptions += '<option value="'+ el.url +'" rel="'+ el.id +'">' +   el.value.replace("~","") + '</option>';
          }); 
          jQuery("select#provincia").parent().show();
          jQuery("select#provincia").html(provinceOptions).show();
          requestInProgress = false;
      },
      error : function(request, status, error) {
      }
  });
}

Upvotes: 0

Naftali
Naftali

Reputation: 146300

Well I am not sure why you are using inline js with jQuery.

Just use jQuery's .change() event:

$('#regione').change(function () {
    // Hiding selects that we don't need
    jQuery("select#comune").hide();
    jQuery("select#quartiere").hide();
    if (this.value == '') {
        jQuery("select#provincia").parent().hide();
        return;
    }

    jQuery.ajax({
        url: WEBSITE_PATH + 'loadProvince.php',
        type: 'GET',
        dataType: 'json',
        data: {
            search_value: jQuery("option:selected", this).attr("rel")
        },
        success: function (result) {
            var provinceOptions = "<option value=\"\">Tutte le province</option>";
            jQuery.each(result, function (i, el) {
                provinceOptions += '<option value="' + el.url + '" rel="' + el.id + '">' + el.value.replace("~", "") + '</option>';
            });
            jQuery("select#provincia").parent().show();
            jQuery("select#provincia").html(provinceOptions).show();
        },
        error: function (request, status, error) {}
    });
});

Upvotes: 1

Related Questions