load option select from server

Question

I am trying to figure out how to update my option select menu when the button is clicked. I can make this work by using $(#id).click(function(){}); but I also have another function that needs to be called when a option is selected from the menu. The code listed below will not work because it clears my select menu out. I believe this is because the click event is called twice, once on the 1st click and 2nd after the change occurs.

What can I do in order to load the select menu in a way I can use both events. Perhaps I am not going about this the proper way, I am still really new to ajax and jquery.

Example of my code:

MyMarkup:

<div class="siteId">   Select Site:<select id="site" name="site" 
style="width: 60px"></select></div>

JavaScript:

getSiteId: function(){  // fill the option select menu

      $.ajax({

              type: "POST",
              url: "?do=getsiteid",
              dataType: "json",
              async: true,

              success: function(jsonObj) {

                     var listItems= "";                        
                     listItems+= "<option value='empty'></option>";         // fill first entry with a blank value

                       for (var i in jsonObj){

                               listItems+= '<option value=' + jsonObj[i].siteId + '>' + jsonObj[i].siteId + '</option>';
               }
              $("#site").html(listItems);
              }
       }); 
},

My events:

  $(document).ready(function() {

  $('.siteId').click(function(){
    Freight.getSiteId();
  });




  $('#site').change(function(){//event to load table based on user selection from menu

var siteId = $("#site").attr('value');
nEditing = null;
if(siteId != "empty"){
    $("#message").hide();  // hide message
    $("#new").show();      // show button
    $('#wrapper').empty(); // 
    $('#wrapper').replaceWith(Freight.tbl);

    Freight.displayData(siteId);

 oTable = $('#grid').dataTable( {
    "aoColumns": [ 
        /* Dest */   null,
        /* Port Id */  {"bSearchable": false,
                         "bVisible":    false},
                    /* woodType */ {"bSearchable": false,
                         "bVisible":    false},
        /* Cont Rate */ null,
        /* Edit */  null
    ]} );
}
    else{
    $("#wrapper").empty();
     $("#message").show();  // hide message
    $("#new").hide();      // show button

  } 
}); // end  



});

Answer 1

Because the .click handler is on your .siteId div it is getting called when you click anything inside your div including the SELECT menu. So the .change event for your SELECT is also firing the .click event for the div. I would put a span around the "Select Site" text and put your click event on the span.