I am working on an ASP.Net webpage that will use the jQuery Dropdown checklist ( http://code.google.com/p/dropdown-check-list/ ). I'm pretty inexperienced with JavaScript and brand new to jQuery.
Basically, my question is: How do you update selected items on the JQuery DropdownCheck mailing list from the server?
NOTE. See the bottom of the question for details on the solution.
Here is some background to give you a better idea of what I am doing ...
I have a jQuery DropdownChecklist mailing list that populates when the page loads. When the user selects an item in the DropdownChecklist, the selected values are collected and stored in a hidden input field, then a postback is performed that allows the server to update the server control. This part works.
Now, here is my problem. This server control, in fact a user control, has a delete button for each item selected in the DropdownChecklist. When the "Delete" button is clicked, this should cause the related item in the jQuery mailing list not to be selected. Thus, I have not yet figured out how to do this.
Here are some relevant code snippets:
Here's the markup ...
<asp:ScriptManager ID="smScriptMgr" runat="server" /> <table> <tr> <td> <select id="s1" multiple="true" runat="server" /> </td> </tr> <tr> <td> <asp:UpdatePanel ID="UP1" runat="server"> <ContentTemplate> <input id="inpHide" type="hidden" runat="server" /> <uc1:SelectedFilterBox ID="sfbFilters" runat="server" Width="200" /> </ContentTemplate> </asp:UpdatePanel> </td> </tr> </table>
Here's the javascript ...
function DoPostback() { __doPostBack('UP1', ''); }; $(function () { $("#s1").dropdownchecklist({ forceMultiple: true, width: 200, textFormatFunction: function() { return "Filters:"; } }); $('#s1').change(function () { var values = $(this).val(); document.getElementById("inpHide").value = values; DoPostback(); }); });
Here's the usercontrol markup ...
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="SelectedFilterBox.ascx.vb" Inherits="SelectedFilterBox.SelectedFilterBox" %> <div> <asp:Table ID="tblFilters" runat="server" Width="200"> <asp:TableRow> <asp:TableCell> <asp:Repeater ID="rpFilters" runat="server" Visible="false"> <ItemTemplate> <table class="selectedFilter"> <tr> <td class="selectedFilterLeft"> <%# Eval("filterName")%> </td> <td class="selectedFilterRight" align="right"> <asp:ImageButton ID="ibRemove" runat="server" ImageUrl="~/images/delete.gif" CommandArgument='<%#Eval("filterName") %>' OnCommand="ibRemove_Click" /> </td> </tr> </table> </ItemTemplate> </asp:Repeater> </asp:TableCell> </asp:TableRow> </asp:Table> </div>
Here are some relevant parts of the code for ...
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not IsPostBack Then 'populate dropdown checklist s1.Items.Add("Filter A") s1.Items.Add("Filter B") s1.Items.Add("Filter C") Else 'update filters based on contents of hidden input field UpdateFilters(inpHide.Value) End If End Sub Private Sub UpdateFilters(ByVal filters As String) Dim Filter() As String = Split(filters, ",") Dim Index As Integer = 0 'clear existing filters sfbFilters.Clear() 'loop through adding filters based on supplied string For Each str As String In Filter sfbFilters.Add(str, Index.ToString()) Index += 1 Next str End Sub 'this event occurs when a Remove button is clicked Protected Sub sfbFilters_FilterChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles sfbFilters.FilterChanged 'update hidden input field inpHide.Value = UpdateHiddenField() 'update label, listing (filter, value) pairs UpdateFilterValueSets() End Sub
Here's a javascript function that does what I want ...
function DeselectFilter(targetString){ $("#s1 option").each(function(){ if($(this).text() === targetString) $(this).attr("selected", ""); }); $("#s1").dropdownchecklist("refresh"); };
However, I'm not sure if I am calling this directly from the onClientClick event. Does this look right?
<asp:ImageButton ID="ibRemove" runat="server" ImageUrl="~/images/delete.gif" CommandArgument='<%#Eval("filterName") %>' OnCommand="ibRemove_Click" OnClientClick='DeselectFilter("<%#Eval("filterName") %>");' />
After some comments and comments in a comment, here is a solution that worked ...
<a onclick='DeselectFilter("<%#Eval("filterName") %>");'> <asp:ImageButton ID="ibRemove" runat="server" ImageUrl="~/images/delete.gif" CommandArgument='<%#Eval("filterName") %>' OnCommand="ibRemove_Click" /> </a>
We determined that the simplest solution was to call the JavaScript function from the client side, rather than trying to do it from the server side. ImageButton has an onClientClick event, but for some reason it does not work. However, wrapping the ImageButton in the client-side anchor tag and using its onclick event caused a charm.
Thanks, Gorilla Coding , for your help.