javascript - DOM timing or wrong code? -

i've got 2 multi select list boxes, first 1 allows select team. second 1 shows members related team. when first list box (the team) selected make ajax call fill members of team. i'm using chosen library. working fine however, needed way remove x listbox selected value users don't think can remove member team.

$("#maincontent_lbmembers_chosen a").removeclass("search-choice-close");

the above code works when throw in console window, if have in if condition doesnt seem work:

$("#maincontent_lbteams").on('change', function() {             //was value selected?             var latest_value = $("option:selected:last", this).val();             var latest_text = $("option:selected:last", this).text();              if ($("#maincontent_lbteams :selected").length > 0) {                 $("#dteamnotice").show();                 $("#maincontent_lblteammembers").text("members of '" + latest_text + "':");                 populatemembers(latest_value);                 $("#maincontent_lbmembers_chosen a").removeclass("search-choice-close");                 $("#trmembers").fadein();             } else {                 //hide it...                 $("#dteamnotice").css("display", "none");                 $("#trmembers").hide();             }         }); 

basically change event grabs selected text , value. if length of selected > 0 load members of team populatemembers:

 function populatemembers(bucompanyteamid) {         $('#<%=lbmembers.clientid %>').empty().append('<option selected="selected" value="0">loading...</option>');          $("#<%=lbmembers.clientid %>").trigger("chosen:updated");          $.ajax({              type: "post",              url: "/code/webservices/utilities.asmx/getteammembers",              data: '{bucompanyteamid: ' + bucompanyteamid + '}',              contenttype: "application/json; charset=utf-8",              datatype: "json",              success: onmemberspopulated,              failure: function (response) {                  alert(response.d);              }          });      }       function onmemberspopulated(response) {          populatecontrol(response.d, $("#<%=lbmembers.clientid %>"), true);      }      function populatecontrol(list, control, selected) {         if (list.length > 0) {             control.removeattr("disabled");             control.empty().append('<option selected="selected" value="0"></option>');             $.each(list, function () {                 if(selected)                     control.append($("<option selected></option>").val(this['value']).html(this['text']));                 else                     control.append($("<option></option>").val(this['value']).html(this['text']));             });         }         else {             control.empty().append('<option selected="selected" value="0"><option>');         }         control.trigger("chosen:updated");     } 

but cannot understand why in console window can this:

$("#maincontent_lbmembers_chosen a").removeclass("search-choice-close");

and removes x chosen selected value user cannot remove item, within if condition doesnt have effect.

i tried disabling so:

$("#maincontent_lbmembers").attr('disabled', true).trigger("chosen:updated");

this works in console well, timing issue or else?

populatemembers() contains asynchronous ajax call. so, if expecting:

populatemembers(latest_value); $("#maincontent_lbmembers_chosen a").removeclass("search-choice-close"); 

to operate on results of ajax call in populatemembers(), indeed have timing problem. ajax call complete time in future, long after populatemembers() has finished , long after you've executed .removeclass() statement.

to operate on results of populatemembers(), have either put code in success handler of ajax call or restructure code populatemembers() call callback when it's done , can .removeclass() in callback.

---

i suggest using promises this:

// return ajax promise populatemembers function populatemembers(bucompanyteamid) {      $('#<%=lbmembers.clientid %>').empty().append('<option selected="selected" value="0">loading...</option>');      $("#<%=lbmembers.clientid %>").trigger("chosen:updated");      return $.ajax({          type: "post",          url: "/code/webservices/utilities.asmx/getteammembers",          data: '{bucompanyteamid: ' + bucompanyteamid + '}',          contenttype: "application/json; charset=utf-8",          datatype: "json"      }).then(onmemberspopulated, function (response) {              alert(response.d);      });  }   $("#maincontent_lbteams").on('change', function() {         //was value selected?         var latest_value = $("option:selected:last", this).val();         var latest_text = $("option:selected:last", this).text();          if ($("#maincontent_lbteams :selected").length > 0) {             $("#dteamnotice").show();             $("#maincontent_lblteammembers").text("members of '" + latest_text + "':");             // act when returned promise resolved             populatemembers(latest_value).then(function() {                 $("#maincontent_lbmembers_chosen a").removeclass("search-choice-close");                 $("#trmembers").fadein();             });         } else {             //hide it...             $("#dteamnotice").css("display", "none");             $("#trmembers").hide();         }     });