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

0 0

Post a comment