jQuery Ajax Drop Down

Question

I have a drop down that when clicked makes an ajax request to update the drop down with the latest stock levels.

When I click the drop down the request is made and the drop down gets updated and drops down with the latest data. Problem is when a user selects an option the Click ajax request is made again stoping an option from being selected.

I did try unBinding the Click function which did work but I could'nt then re bind the click in case a user wanted to change what they selected.

DropDown

<select name="Qty" id="88" class="ProQty">
   <option value="0">Qty</option>
   ...
</select>

jQuery

//Update Qty Levels Automatically
$(function QtyCheck() {
    $("select.ProQty").click(function() {
        var ProductID = $(this).attr('id');

        var Startdd = $("#Startdd").val();
        var Startmm = $("#Startmm").val();
        var Startyy = $("#Startyy").val();
        var StartHours = $("#StartHours").val();
        var StartMinutes = $("#StartMinutes").val();
        var Enddd = $("#Enddd").val();
        var Endmm = $("#Endmm").val();
        var Endyy = $("#Endyy").val();
        var EndHours = $("#EndHours").val();
        var EndMinutes = $("#EndMinutes").val();

        var dataString =  'Startdd=' + Startdd + '& Startmm=' + Startmm + '& Startyy=' + Startyy + '& StartHours=' + StartHours + '& StartMinutes=' + StartMinutes + '& Enddd=' + Enddd + '& Endmm=' + Endmm + '& Endyy=' + Endyy + '& EndHours=' + EndHours + '& EndMinutes=' + EndMinutes;

        $("#" + ProductID).empty();
            //$("#" + ProductID).empty().unbind();

        $.ajax({
            type: "POST",
            url: "./ajax/QtyCheck.asp?ID=" + ProductID,
            data: dataString,
            cache: false,
            success: function(html) {
                        //setTimeout(function() {
                            $("#" + ProductID).append(html);
                        //},600);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                        //setTimeout(function() {
                            $("#" + ProductID).append(XMLHttpRequest.responseText);
                        //},600);
            }
        });
    });
});

Answer 1

Use a simple boolean variable...

$(function QtyCheck() { 
  var loaded = false;    
  $("select.ProQty").click(function() { 
    if(loaded) return;
    loaded = true;
    // rest of your code
  });
});

You can reset it as needed.

Answer 2

If I'm not misunderstanding you, it sounds like this is just an event bubbling issue. Try adding:

$('option').click(function(event){
     event.stopPropagation();
}

Answer 3

Event bubbling: the click event you have on $('select.ProQty') also affects the element's children. This is why the ajax request is sent again when the user clicks an <option>. The click on an option "bubbles up" to $('select.ProQty').click()

If you want to stop this bubbling up from happening and the ajax request from being re-sent, you need to stop event propagation. The following code block will accomplish this.

$('option').click(function(event){
     event.stopPropagation();
}