IE7/8 duplicated AJAX requests

Question

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?

The request is proved to be launched twice according to apache logs... — napolux, Dec 14 '11 at 15:16
I haven't seen that before, but i also never use `onchange="..."`. If you used jquery to bind the event using `.bind` `.on` or `.change`, i don't think you would see this issue. — Kevin B, Dec 14 '11 at 15:17
Is your issues same as this. http://stackoverflow.com/questions/2888800/html-select-list-why-would-onchange-be-called-twice — koneru, Dec 14 '11 at 15:24
The problem is really different from what appears from this piece of code: selects are generated dinamically via JS and they change every time I execute the function... I'll try to move to the jquery event management... :) — napolux, Dec 14 '11 at 15:51

score 1 · Answer 1 · answered Dec 14 '11 at 15:18

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) {}
    });
});

score 0 · Answer 2 · answered Dec 14 '11 at 15:22

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) {
      }
  });
}

IE7/8 duplicated AJAX requests

2 Answers2