|
In this article we will explore how to show selected dropdownlist value after it is filled using jQuery. One can show the selected dropdownlist only after the dropdownlist is filled. Async call doesn't wait for the response to finish and then proceed. If the code to show selected dropdownlist is immediately after the async call, the dropdownlist won't be selected. We will see different ways of showing selected dropdownlist along with advantage and disadvantage.
Let's see how we can do this.
Step 1: Place three input buttons and a select in the aspx page. <div>
<input type="button" id="asyncload" value="Async Load" />
<input type="button" id="nonasyncload" value="Non Async Load" />
<input type="button" id="fillasyncload" value="Select ddl using asyncload" />
</div>
<div>
<select id="carmanufacturer">
<option value="0">Select</option>
</select>
</div>
Step 2: Create a class CarModel. public class CarModel
{
public string manufcturerName;
public int manufacturerid;
} Step 3: Create a method GetCarManufacturer which will be used to fill the dropdownlist.
[ WebMethod]
public static List<CarModel> GetCarManufacturer()
{
return PrepareCarData();
} public static List<CarModel> PrepareCarData()
{
List<CarModel> objCars = new List<CarModel> {
new CarModel{manufcturerName = "Merc", manufacturerid= 1} ,
new CarModel{manufcturerName = "BMW", manufacturerid= 2} ,
new CarModel{manufcturerName = "Audi", manufacturerid= 3} ,
new CarModel{manufcturerName = "Suzuki", manufacturerid= 4}
};
return objCars;
} Step 4: Add button click handler for first two buttons. true and false will be passed to CallAsync method when asyncload and nonasyncload button is clicked. This will set the async of jQuery to true or false. $( '#asyncload').click(function() {
$('#msg').text("Dropdownlist won't be selected with Audi");
CallAsync(true);
}); $( '#nonasyncload').click(function() {
$('#msg').text("Dropdownlist will be selected with Audi but screen become unresponsive");
CallAsync(false);
}); Step 5: Add CallAsynch which will populate the dropdownlist and immediately set the valud of dropdownlist.
var CallAsync = function(flag) {
//To clear the dropdownlist
$('#carmanufacturer option').remove();
var selectOption = $(document.createElement('option'));
$('#carmanufacturer').append(selectOption.val("0").html("Select"));
$.ajax({
type: "POST",
url: "jQueryAsyncWaitForResponse.aspx/GetCarManufacturer",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var carManufacturer = response.d;
for (var i = 0; i < carManufacturer.length; i++) {
var selectOption = $(document.createElement('option'));
$('#carmanufacturer').append(
selectOption.val(carManufacturer[i].manufacturerid).html(carManufacturer[i].manufcturerName));
}
},
//flag will be set based on the value passed from calling method
async: flag,
failure: function(errMsg) {
$('#errMessage').text(errMsg);
}
}); var myDropdownList = document.getElementById('carmanufacturer');
// Loop through all the items
for (iLoop = 0; iLoop < myDropdownList.options.length; iLoop++) {
if (myDropdownList.options[iLoop].value == 3) {
// Item is found. Set its selected property, and exit the loop
myDropdownList.options[iLoop].selected = true;
break;
}
}
}; When async is set to true, the dropdownlist won't be set with the selected value.
When async is set to false, the dropdownlist will be set with the selected value but screen become unresponsive.
Let's see how we can make screen responsive as well as set the selected value.
Step 6: Add button click handler for the third button.
$( '#fillasyncload').click(function() {
$('#msg').text("Dropdownlist will be selected with Audi and scree will be responsive at the same time");
fillDDLUsingAsync();
}); Step 7: Add fillDDLUsingAsync method which will be invoked on click of button with id fillasyncload. In this method the value of dropdownlist will be set on success of the ajax call.
var fillDDLUsingAsync = function(flag) {
//To clear the dropdownlist
$('#carmanufacturer option').remove();
var selectOption = $(document.createElement('option'));
$('#carmanufacturer').append(selectOption.val("0").html("Select"));
$.ajax({
type: "POST",
url: "jQueryAsyncWaitForResponse.aspx/GetCarManufacturer",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var carManufacturer = response.d;
for (var i = 0; i < carManufacturer.length; i++) {
var selectOption = $(document.createElement('option'));
$('#carmanufacturer').append(
selectOption.val(carManufacturer[i].manufacturerid).html(carManufacturer[i].manufcturerName));
}
var myDropdownList = document.getElementById('carmanufacturer');
// Loop through all the items
for (iLoop = 0; iLoop < myDropdownList.options.length; iLoop++) {
if (myDropdownList.options[iLoop].value == 3) {
// Item is found. Set its selected property, and exit the loop
myDropdownList.options[iLoop].selected = true;
break;
}
}
},
failure: function(errMsg) {
$('#errMessage').text(errMsg);
}
});
};
This will fill set the dropdownlist value and at the same time screen will responsive. So if there is any dependent action needs to be taken based on the returned data by the webmethod or webservice. It is always good to take action on success. Live Demo
|