How to use jQuery and Ajax to return just one string and how to insert it to a DDL in a jdialog?

Question

I'm trying to create a dynamic module where I drop an object on screen. Then a jQuery dialog opens with three drop-down lists. When I select a value in the first drop-down list I'm trying to filter the results in the next list via Ajax.

This is my JS code:

$("#ddlTableType").live(
        'change',
        function() 
        { 
            var GetTablesCodes = $.ajax({
                url:'AjaxActions/TableCodes.aspx?ObjectType=' + $("#ddlTableType").val(),
                async:false                 
            }).responseText; 
          //alert(GetTablesCodes);
          //alert(GetTablesCodes.$('#hidCodesList').val());
          //alert($('#hidCodesList').val());
        }
   );

In the ASP.NET page I'm doing the following:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TableCodes.aspx.cs" Inherits="AjaxActions_TableCodes" %>

<form id="form1" runat="server">
     <asp:HiddenField ID="hidCodesList" runat="server" />
</form>

The code behind for this page:

public partial class AjaxActions_TableCodes : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
    DataSet dsCodesList = DbHelper.ExecuteDataSet(
                        ConfigurationManager.AppSettings["ConnStr"],
                        "spObjectCodesByTYpe_Select",
                        new SqlParameter("@ObjectType", Request.QueryString["ObjectType"])
                );

    hidCodesList.Value = "";
    for(Int16 CodeListIndex=0;CodeListIndex<dsCodesList.Tables[0].Rows.Count;CodeListIndex++)
    {
        hidCodesList.Value += dsCodesList.Tables[0].Rows[CodeListIndex]["Value"].ToString() + ",";
    }
}

}

In my first call to alert I get the entire page. In that I can see the hidden field filled with the data I need. How can i extract this data? Finally, all the drop-down lists are in a JDialog so maybe that is causing an issue.

Answer 1

General Answer on ASP.NET jQuery and Cascading Drop-down lists

From what I can discern from your question the user experience you are trying to create is a modal popup (via jDialog) which contains a series of cascading drop-down lists. There are quite a few ways to put this paradigm into use. Using the search terms "cascading drop-down lists asp.net" will net you a lot of examples on how to put the various solutions into practice.

Here are a couple of articles which may help

• Great Article On Cascading DropDown List and jQuery (no Ajax all client side)
• Building Cascading DropDownList in ASP.Net Using jQuery and JSON (an Ajax example)

More Specific to your problem

Essentially you want to load a modal popup via jDialog which contains three drop-down lists. You should bind to the onchange event of the first drop-downs. The bound function should use jQuery to call a web method which returns the data to fill the next drop-down.

[edit]
The article linked above (Building Cascading DropDownList in ASP.Net Using jQuery and JSON) shows an example of how to append options to a drop-down list via JSON and the append method of a jQuery object. I've pulled out the pertinent append code.

$("#ddlCities").append($("<option></option>").val(this['ID']).html(this['City']));

[/edit]