jquery dropdown list then select does not work

Charles Baldo
Charles Baldo used Ask the Experts™
on
I have a jquery function that fills a dropdownlist, then selects a value from the list.  The function to fill the list works and the value that it attempts to put in there is one in the list.
problem is it does not select.  but if I put a alert() after the drop down fill and then after I click the alert box the value is selected.  Its like the list is not there, but the alert allow it to fill then the select happens

		function SetScreen(AccountKey,ValueToSelect)
		{
                    fillDropdown(AccountKey);
		 // id i put an alert('wait'); it selects and works   ****************
                   $("#Search").val(ValueToSelect);	  
		  
		)
// this works fine
		function fillDropdown(Account) {
			$.ajax({
				type: "POST",
				url: "getValues.ashx?prefix=" + Account,
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				success: function (data) {
					var ddlCustomers = $("#Search");
					ddlCustomers.empty().append('<option selected="selected" value="0">Please select</option>');
					$.each(data, function () {
						ddlCustomers.append($("<option></option>").val(this['Value']).html(this['Text']));
					});
				}
			});
		}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Software Developer
Commented:
I just figures this one out.  forgot the A in AJAX stands for Asynchronous.

I added                        
$.ajax({
....
....
async: false,
cache: false,
.....
});
Jon NormanInformation Systems Manager
Top Expert 2012
Commented:
to do this asynchronously:

function SetScreen(AccountKey,ValueToSelect)
		{
                    fillDropdown(AccountKey);
		 // id i put an alert('wait'); it selects and works   ****************
                 //  $("#Search").val(ValueToSelect);	  
		  
		)
// this works fine
		function fillDropdown(Account,ValueToSelect) {
			$.ajax({
				type: "POST",
				url: "getValues.ashx?prefix=" + Account,
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				success: function (data) {
					var ddlCustomers = $("#Search");
					ddlCustomers.empty().append('<option selected="selected" value="0">Please select</option>');
					$.each(data, function () {
						ddlCustomers.append($("<option></option>").val(this['Value']).html(this['Text']));
					});
                                        ddlCustomers.val(ValueToSelect);
				}
			});
		}

Open in new window

Charles BaldoSoftware Developer

Author

Commented:
Thanks

I forgot the A in AJAX is Asynchronous.  It works now
Become a Microsoft Certified Solutions Expert

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
I just figures this one out.  forgot the A in AJAX stands for Asynchronous.

I added                        
$.ajax({
....
....
async: false,
cache: false,
.....
});
Ouch!
Just because jQuery provides an async: false does not mean it is good practice to use it.

The correct way to do this is to handle the processing you want done - once the call is complete - in the success handler of the ajax call - in other words
  function SetScreen(AccountKey,ValueToSelect) {
    fillDropdown(AccountKey, ValueToSelect);
  }      
  
  function fillDropdown(Account, ValueToSelect) {
    $.ajax({
      type: 'post',
      url: 't3673.php?Account=' + Account,
      // contentType: "application/json; charset=utf-8", // <===== you only do this if you are SENDING json
      dataType: 'json'
    }).then(function(data) {
      var ddlCustomers = document.getElementById('Search');
      $(ddlCustomers).empty();
      ddlCustomers.appendChild(createOption({Value: 0, Text: 'Please select'}, ValueToSelect));
      data.forEach(function(item) {
        ddlCustomers.appendChild(createOption(item, ValueToSelect));   
      });
    });    
  }
  
  function createOption(data, selected) {
    var option = document.createElement('option');
    option.value = data.Value;
    option.text = data.Text;
    option.selected = data.Value == selected;
    
    return option;  
  }

Open in new window

You can see this working here (http://www.marcorpsa.com/ee/t3673.html)
Charles BaldoSoftware Developer

Author

Commented:
Thanks Julian,

Will keep that in bag of tricks,  This is an old webforms app, I like using the ajax on it instead of postbacks in .net.  
thanks for tip on contentType.  want to be as efficient as possible
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
No problem - just don't use async: false - it is terribly bad practice.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial