Clever Geek Handbook

JQuery val () not working on parameter added via ajax

I have a jQuery / Ajax function that adds 2 <option>

to <select>

.

function addOption() {  
    var author = $("#authors").val();
    $('#books').empty(); 
    $('#books').html('<option value="">Please Select</option>'); 
$.ajax({ 
      type: "post", 
      url:  "books.php", 
      data: { author:author }, 
      success: function(response){ 
          $('#books').append(response); 
      } 
    }); 
}

response

returns as

<option value="bookA">Book A</option>
<option value="bookB">Book B</option>

and now books

there is -

<select id="books">
<option value="">Please Select</option>
<option value="bookA">Book A</option>
<option value="bookB">Book B</option>
</select>

This works great.

Now I want to install selected

option

using .val()

after call addOption()

-

$('#authors').change( function(){
addOption();
$('#books').val('bookB');
});

It doesn't make a choice Book B

.

If I hardcode it .append()

works -

function addOption() {  
    var author = $("#author").val();
    $('#books').empty(); 
    $('#books').html('<option value="">Please Select</option>');
    $('#books').append('<option value="bookA">Book A</option>\n<option value="bookB">Book B</option>);
}

$('#authors').change( function(){
addOption();
$('#books').val('bookB');
});

Is there a reason why my options added to a function .ajax

cannot be selected with .val()

, put it if I add them directly?

+1


source to share


5 answers


This is because the AJAX call is asynchronous, so when you try to select options, it hasn't been added to the selection yet.

Use a callback in a function so you can do something when the response arrives:

function addOption(callback) {  
  var author = $("#authors").val();
  $('#books').empty(); 
  $('#books').html('<option value="">Please Select</option>'); 
  $.ajax({ 
    type: "post", 
    url:  "books.php", 
    data: { author:author }, 
    success: function(response){ 
      $('#books').append(response); 
      callback();
    }
  }); 
}


Using:

$('#authors').change( function(){
  addOption(function(){
    $('#dropdownB').val('bookB');
  });
});
+2


source


Ajax is asynchronous, when you set a value, there is no option with this value, you can put your code in your callback.

  success: function(response){ 
      $('#books').append(response); 
      // ...
  }


Or, set this property value of async

your Ajax request to false

;

+2


source


A JAX is asynchronous , which means that when you call the addOption () method, it can (and probably will) return before the Ajax call is actually made, so you call $('#dropdownB').val('bookB');

before the Ajax callback has been called so that add parameters.

Try putting an $('#dropdownB').val('bookB');

ajax call in your success callback and you can see it works.

+2


source


This is because ajax is asynchronous. That is, by the time it returned and added new options to the picklist, the browser engine had already proceeded and tried to set a value (which hadn't been added yet). Try to move your set value logic to work as part of the ajax response.

+1


source


1) You have to put $('#dropdownB').val('bookB');

in the success event of your ajax events because AJAX is asynchronous and your request cannot be completed when you try to change the selected item, so there is no item to select yet.
2) You add to #books

but change the selected item #dropdownB

. They are two different IDs and therefore two different DOM elements.

+1


source






More articles:


All Articles