Populate an ASP list box based on selection of a previous list box using AJAX

[axman1000]

I have 3 ASP list boxes. I would like to populate the second list box based on the selection in the first list box and based on the selection in the second list box, populate the third. I would like to do this using AJAX. How can I do it? Can someone please give me the code snippet as I am a complete noob when it comes to AJAX and I kinda am running outta time to finish implementing it. Additionally, should I use ASP boxes or HTML <select> tag? Please help me ASAP!

PS: I have to use only ASP.Net and MS SQL Server.

[Luckychap]

I cannot put Ajax code here. But let me tell you its pretty simple. Ajax in simple words is method to send http request to server asynchronously(without blocking other activities). And you can get response back from server.

Once you sent ajax request you start waiting for response from the server. Note here the execution will not block.

Let me put your scenario into steps:-

1. Create a function to send Ajax request. This method will probably take 2 agruments:-
i) select list number, to identify which select list is sending request
ii) Selected value for the list
This method is responsible for sending ajax request, and waiting for response from the server.

2. Create another method to handle response. And will called from above method after getting response with arguments:-
i) select list number, to identify which select list is sending request
ii) Selected value for the list
iii) response text (can be in the form of XML or JSON), which you will get from "Ajax request object"
This method is responsible for parsing response text (which will be in the form of string, use some js libs) and creating new HTML for other select list(use innerHTML)

3. In all three select list, add handlers onChange Event and call method in step 1 with proper arguments. For example:

// For first list     
list1.onChange = function(e) {
   sendAjaxRequest(0, e.target.value); // Method of step 1
}

// For second list     
list1.onChange = function(e) {
   sendAjaxRequest(1, e.target.value); // Method of step 1
}

// For third list     
list1.onChange = function(e) {
   sendAjaxRequest(2, e.target.value); // Method of step 1
}

// Ajax request method (not complete)
function sendAjaxRequest(listNo, value) {
   // Your server url
   var url = "/myServelet?list=" + listNo + "&value=" + value;
   // Send request to above url
   // On getting response call response handler from step 2
   responseHandler(listNo, value, responseText);
}

// Response Handler (not complete)
function responseHandler(listNo, value, responseText) {
   // Parse responseText 
   // Built new HTMLString based of responseText
   // Get next list
   var nextList = listNo+1;
   // Update the innerHtml of new list
   newListEl.innerHTML = HTMLString;
}

Hope it will help you. But still you need to first take Ajax tutorials to start with: http://www.w3schools.com/Ajax/Default.Asp

[axman1000]

The code that you have posted is similar to the one I got in w3schools. It didn't work. Could you please give the code for how box2 and box3 will be populated from the database based on a selection from box1 and box2 respectively? I really need it ASAP. Please help!

I cannot put Ajax code here. But let me tell you its pretty simple. Ajax in simple words is method to send http request to server asynchronously(without blocking other activities). And you can get response back from server.

Once you sent ajax request you start waiting for response from the server. Note here the execution will not block.

Let me put your scenario into steps:-

1. Create a function to send Ajax request. This method will probably take 2 agruments:-
i) select list number, to identify which select list is sending request
ii) Selected value for the list
This method is responsible for sending ajax request, and waiting for response from the server.

2. Create another method to handle response. And will called from above method after getting response with arguments:-
i) select list number, to identify which select list is sending request
ii) Selected value for the list
iii) response text (can be in the form of XML or JSON), which you will get from "Ajax request object"
This method is responsible for parsing response text (which will be in the form of string, use some js libs) and creating new HTML for other select list(use innerHTML)

3. In all three select list, add handlers onChange Event and call method in step 1 with proper arguments. For example:

// For first list     
list1.onChange = function(e) {
   sendAjaxRequest(0, e.target.value); // Method of step 1
}

// For second list     
list1.onChange = function(e) {
   sendAjaxRequest(1, e.target.value); // Method of step 1
}

// For third list     
list1.onChange = function(e) {
   sendAjaxRequest(2, e.target.value); // Method of step 1
}

// Ajax request method (not complete)
function sendAjaxRequest(listNo, value) {
   // Your server url
   var url = "/myServelet?list=" + listNo + "&value=" + value;
   // Send request to above url
   // On getting response call response handler from step 2
   responseHandler(listNo, value, responseText);
}

// Response Handler (not complete)
function responseHandler(listNo, value, responseText) {
   // Parse responseText 
   // Built new HTMLString based of responseText
   // Get next list
   var nextList = listNo+1;
   // Update the innerHtml of new list
   newListEl.innerHTML = HTMLString;
}

Hope it will help you. But still you need to first take Ajax tutorials to start with: http://www.w3schools.com/Ajax/Default.Asp

[Luckychap]

Could you please give the code for how box2 and box3 will be populated from the database based on a selection from box1 and box2 respectively? I really need it ASAP. Please help!

We are not here to post code on demand. The sample code I posted is well enough to write complete working code. If you can't then start doing it "ASAP".

[peter_budo]

@axman1000 here is your code in regards of ASAP request