I have 2 DropDownLists and a jQuery script with HttpHandler in server side, there is a problem in binding Slave Dropdown one.this is my Default.aspx code include jQuery Script:\[code\]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Sample001.Default" %><script src="http://stackoverflow.com/questions/7977105/jquery-1.6.4.min.js" type="text/javascript"></script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <div> <table> <tr> <td> <asp:Label ID="masterlbl" Text="Master" runat="server" /> </td> <td> <span class="Mastercs"> <asp
ropDownList ID="ddl1" runat="server"> <asp:ListItem Text="Item1" Value="http://stackoverflow.com/questions/7977105/Item1" /> <asp:ListItem Text="Item2" Value="http://stackoverflow.com/questions/7977105/Item2" /> <asp:ListItem Text="Item3" Value="http://stackoverflow.com/questions/7977105/Item3" /> <asp:ListItem Text="Item4" Value="http://stackoverflow.com/questions/7977105/Item4" /> <asp:ListItem Text="Item5" Value="http://stackoverflow.com/questions/7977105/Item5" /> </aspropDownList> </span> </td> <td> <asp:Label ID="slavelbl" Text="Slave" runat="server" /> </td> <td> <span class="slavecs"> <aspropDownList ID="ddl2" runat="server" /> </span> </td> </tr> </table> </div> </form> <script type="text/javascript"> $(document).ready(function () { $('span.Mastercs select').change(function () { $.ajax({ type: "POST", url: 'MyHandler.ashx', dataType: "text", data: "ItemSelected=" + $('select#ddl1').val(), async: true, success: function (data) { Handler_Success(data); } }); }); function Handler_Success(data) { $('select#ddl2').empty(); $.each(data, function (i, slaveValue) {$('select#ddl2').append($('<option></option>').val(data.Value).html(data.Text)); }); } }); </script></body></html>\[/code\]And this is My handler:\[code\]public class SlaveValue { public string Value { get; set; } public string Text { get; set; } } public class SlaveValueHandler : IHttpHandler { public bool IsReusable { get { return true; } } public void ProcessRequest(HttpContext context) { string valueSelected = context.Request["ItemSelected"]; List<SlaveValue> slaveValues = new List<SlaveValue>(); SlaveValue sv; sv = new SlaveValue(); sv.Text = "SV1"; sv.Value = http://stackoverflow.com/questions/7977105/valueSelected +"s1"; slaveValues.Add(sv); sv = new SlaveValue(); sv.Text = "SV2"; sv.Value = http://stackoverflow.com/questions/7977105/valueSelected +"s2"; slaveValues.Add(sv); sv = new SlaveValue(); sv.Text = "SV3"; sv.Value = http://stackoverflow.com/questions/7977105/valueSelected +"s3"; slaveValues.Add(sv); string responseText = Newtonsoft.Json.JsonConvert.SerializeObject(slaveValues); context.Response.ContentType = "text/json"; context.Response.Write(responseText); } }\[/code\]When the ddl1(DropDownList) changed I can see in Firebug the Response correctly. but in the ddl2(DropDownList) didn't see any changes:this is Firebug Response:\[code\][{"Value":"Item3s1","Text":"SV1"},{"Value":"Item3s2","Text":"SV2"},{"Value":"Item3s3","Text":"SV3"}]\[/code\]Also when I change the Script SuccessMethod to the following code the ddl2(DropDownList) bind correctly. :\[code\]function Handler_Success(data) { $('select#ddl2').empty(); $.each(data, function (i, slaveValue) { $('select#ddl2').append($('<option> </option>').val('sv1').html('s1')); }); }\[/code\]as you see the ddl2(DropDownList) bind Correctly with above code,Where is the Problem? Why I can see the response in Firebug but the binding not work?
ropDownList ID="ddl1" runat="server"> <asp:ListItem Text="Item1" Value="http://stackoverflow.com/questions/7977105/Item1" /> <asp:ListItem Text="Item2" Value="http://stackoverflow.com/questions/7977105/Item2" /> <asp:ListItem Text="Item3" Value="http://stackoverflow.com/questions/7977105/Item3" /> <asp:ListItem Text="Item4" Value="http://stackoverflow.com/questions/7977105/Item4" /> <asp:ListItem Text="Item5" Value="http://stackoverflow.com/questions/7977105/Item5" /> </aspropDownList> </span> </td> <td> <asp:Label ID="slavelbl" Text="Slave" runat="server" /> </td> <td> <span class="slavecs"> <aspropDownList ID="ddl2" runat="server" /> </span> </td> </tr> </table> </div> </form> <script type="text/javascript"> $(document).ready(function () { $('span.Mastercs select').change(function () { $.ajax({ type: "POST", url: 'MyHandler.ashx', dataType: "text", data: "ItemSelected=" + $('select#ddl1').val(), async: true, success: function (data) { Handler_Success(data); } }); }); function Handler_Success(data) { $('select#ddl2').empty(); $.each(data, function (i, slaveValue) {$('select#ddl2').append($('<option></option>').val(data.Value).html(data.Text)); }); } }); </script></body></html>\[/code\]And this is My handler:\[code\]public class SlaveValue { public string Value { get; set; } public string Text { get; set; } } public class SlaveValueHandler : IHttpHandler { public bool IsReusable { get { return true; } } public void ProcessRequest(HttpContext context) { string valueSelected = context.Request["ItemSelected"]; List<SlaveValue> slaveValues = new List<SlaveValue>(); SlaveValue sv; sv = new SlaveValue(); sv.Text = "SV1"; sv.Value = http://stackoverflow.com/questions/7977105/valueSelected +"s1"; slaveValues.Add(sv); sv = new SlaveValue(); sv.Text = "SV2"; sv.Value = http://stackoverflow.com/questions/7977105/valueSelected +"s2"; slaveValues.Add(sv); sv = new SlaveValue(); sv.Text = "SV3"; sv.Value = http://stackoverflow.com/questions/7977105/valueSelected +"s3"; slaveValues.Add(sv); string responseText = Newtonsoft.Json.JsonConvert.SerializeObject(slaveValues); context.Response.ContentType = "text/json"; context.Response.Write(responseText); } }\[/code\]When the ddl1(DropDownList) changed I can see in Firebug the Response correctly. but in the ddl2(DropDownList) didn't see any changes:this is Firebug Response:\[code\][{"Value":"Item3s1","Text":"SV1"},{"Value":"Item3s2","Text":"SV2"},{"Value":"Item3s3","Text":"SV3"}]\[/code\]Also when I change the Script SuccessMethod to the following code the ddl2(DropDownList) bind correctly. :\[code\]function Handler_Success(data) { $('select#ddl2').empty(); $.each(data, function (i, slaveValue) { $('select#ddl2').append($('<option> </option>').val('sv1').html('s1')); }); }\[/code\]as you see the ddl2(DropDownList) bind Correctly with above code,Where is the Problem? Why I can see the response in Firebug but the binding not work?