How to do it
1. In the document.ready() function of the jQuery script block, define an event handler for the change event of the first DropDownList:
$("#ddlUserID").bind('change', function(e) {
2. Check if the selected value is empty:
3. If a valid item is selected then call the sendData() function. Pass the selected value of the DropDownList as a parameter to the function:
4. If no value is selected from the DropDownList then hide the second DropDownList and the corresponding label control:
$("#lblModuleList").addClass("hidden"); $("#ddlModuleList").addClass("hidden");
5. Now let's define the sendData() function: function sendData(sUserlD) {
6. Get the base path of the current page:
var loc = window.location.href; loc = (loc.substr(loc.length - 1, aspx" : loc;
8. Set the HTTP request type to post: type: "POST",
9. Specify the page method to send the AJAX request to:
url: loc + "/GetModuleList",
10. Pass the selected UserID from the first DropDownList to the page method in JSON format:
data: '{"sUserID":"' + sUserID + '"}',
11. Define the content type of the data transfer:
contentType: "application/json; charset=utf-8",
12. Specify the response data type:
dataType: "json",
13. Define the callback function on successful invocation of the page method where the AJAX response is received in the object msg. This is the ArrayList object consisting of Text/Value pairs:
success: function(msg) {
14. Unhide the second DropDownList and the corresponding label control:
$("#lblModuleList").removeClass("hidden"); $("#ddlModuleList").removeClass("hidden");
15. Clear the second DropDownList and add a default item as follows:
$("#ddlModuleList").empty().append($("<option></option>").val("[-]").html("Please select"));
16. For each Listltem in the response object msg, add the Text/Value pairs to the second DropDownList:
• The DropDownList can be cleared by using .empty(). Thereafter, \ we chain the .append() function to add the <option> tags for the Listltem and set its Text using .html() and Value using .val().
$("#ddlModuleList").append($("<option></ option>").val(this[,Value,]).html(this[,Text']));
this['Text'] returns the Text of the current Listltem whereas this['Value'] returns the corresponding Value.
17. Define the callback function in case of failure:
alert("An unexpected error has occurred during processing.");
Thus, the complete jQuery solution is as follows:
<script language="javascript" type="text/javascript"> $(document).ready(function() {
$("#ddlUserID").bind(,change', function(e) { if ($("#ddlUserID").val() != '[-]')
$("#lblModuleList").addClass("hidden"); $("#ddlModuleList").addClass("hidden");
function sendData(sUserlD) {
var loc = window.location.href;
loc = (loc.substr(loc.length - 1, 1) == "/") ? loc + "Recipe5.aspx" : loc;
type: "POST", url: loc + "/GetModuleList", data: '{"sUserlD":"' + sUserlD + '"}', contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) {
$("#lblModuleList").removeClass("hidden"); $("#ddlModuleList").removeClass("hidden"); $("#ddlModuleList").empty(). append($("<option></option>").val("[-]").html("Please select"));
$("#ddlModuleList").append($("<option></ option>").val(this['Value,]).html(this[,Text']));
processing."
alert("An unexpected error has occurred during
Post a comment