I have a legacy system where I want to improve the user experience. On one of the forms there are 2 drop down listboxes; the change of one ddl cascades to the next. On the current form, this is acheived by selectedindexchanged event from which the other ddl can be repopulated. Although this works, in order for the event to be fired, the control has to have the autopostback=true property set. This postback creates a bad user experience. So the simple solution is to put the ddls into an update panel control. However doing this has the odd knock on effect of disabling my JQuery Cluetip controls. I do not know why this is. In which case it is time I finally got round to populating my controls using JQuery and/or AJAX. So I have tried the following solution below in a test application. However when I click on the submit button, the changes I make to the Sub Categories ddl are not being picked up in the code behind event for my button (a server side control). The reason appears to be that the client side updates happened after the last postback, and so on the server the control still has the previous values. How do I pick up the new values on server side, or should I try something else? I am using a server control button because that is what the orginal legacy code does, and changing everything to client side would be a big job.
The web page;
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="CSS/RM.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='Default.js'></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Test Categories</h1>
<table>
<tr>
<th class="wid3">Category:</th>
<td class="wid4"><asp:DropDownList
ID="Categories_ddl" runat="server" DataSourceID="odsCategories"
DataTextField="Category1" DataValueField="Category_ID"
>
</asp:DropDownList>
</td>
<th class="wid3">Sub Category:</th>
<td class="wid4"><select
ID="Sub_Categories_ddl" runat="server" DataSourceID="odsSub_Categories_4_Category"
DataTextField="Sub_Category1" DataValueField="Sub_Category_Id">
</select></td>
</tr>
</table>
<asp:ObjectDataSource runat="server" ID="odsCategories"
TypeName="ClassLibraryRiskManCategories.DAL" SelectMethod="GetCategories" />
<asp:ObjectDataSource runat="server" ID="odsSub_Categories_4_Category"
TypeName="ClassLibraryRiskManCategories.DAL" SelectMethod="GetSubCategories">
<SelectParameters>
<asp:ControlParameter ControlID="Categories_ddl" Name="categoryId"
PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
<div style="padding:100px"><asp:Button runat="server" ID="btnTest" Text="Submit"
onclick="btnTest_Click" /></div>
</div>
</form>
</body>
</html>
The JScript
$(document).ready(function() {
$("#Categories_ddl").change(function() {
$("#Sub_Categories_ddl").html("");
var CategoryId = $("#Categories_ddl > option:selected").attr("value");
if (CategoryId != 0) {
$.getJSON('LoadSubCategories.ashx?CategoryId=' + CategoryId, function(Sub_Category1) {
$.each(Sub_Category1, function() {
$("#Sub_Categories_ddl").append($("<option></option>").val(this['Sub_Category_Id'].toString()).html(this['Sub_Category1']));
});
});
}
});
});