How to use jQuery and Ajax to return just one string and how to insert it to a DDL in a jdialog?
-
27-09-2019 - |
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.
Solution
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]