jquery dropdown list then select does not work

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

Charles BaldoSoftware DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

I added                        
$.ajax({
....
....
async: false,
cache: false,
.....
});

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
JonNormanCommented:
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 DeveloperAuthor Commented:
Thanks

I forgot the A in AJAX is Asynchronous.  It works now
PMI ACP® Project Management

Prepare for the PMI Agile Certified Practitioner (PMI-ACP)® exam, which formally recognizes your knowledge of agile principles and your skill with agile techniques.

Julian HansenCommented:
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 DeveloperAuthor 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
Julian HansenCommented:
No problem - just don't use async: false - it is terribly bad practice.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.