I am trying to implement a feature where a textbox is shown or hidden when a user clicks on a filter icon in the header of a gridview. Initially, the textbox is hidden but when the icon is clicked, it briefly appears before disappearing again as if the page is refreshed. Here is the HTML code snippet:
<asp:TemplateField HeaderText="Group Name">
<HeaderTemplate> Group Name
<asp:ImageButton ID="uggvGroupFilter" runat="server" ImageUrl="Images/filter.png" OnClientClick="ShowHideFilterTxtBox('uggvTxtNameFilter')" />
<asp:TextBox ID="uggvTxtNameFilter" runat="server" AutoPostBack="true" style="display:none;" ClientIDMode="Static" OnTextChanged="uggvGridFilter_TextChanged">
</asp:TextBox>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="uggvLblGroupName" runat="server" Text='<%# Bind("GroupName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
Below is the javascript function being used:
function ShowHideFilterTxtBox(filterID) {
var obj = document.getElementById(filterID);
if (obj.style.display == "none") {
obj.style.display = "block";
} else {
obj.style.display = "none";
}
}
Additionally, there is a document ready function that configures a DropDownBox using the 'chosen' jquery plugin.
$(document).ready(function () {
//Configure the DropDownBox using the 'chosen' jquery plugin
$(".chosen-single").chosen({
search_contains: true,
width: "200px",
no_results_text: "Sorry, no match!"
});
});
I am wondering if there is something missing in my document ready function and why the textbox style only changes momentarily before reverting back to 'none'. Any insights would be appreciated.
Thank you.