Friday, 18 January 2013 13:56

how to show/hide panel inside datalist using jquery

Written by 
Rate this item
(1 Vote)

if you wanted to use jquery like for showing/hiding panel
when button clicked inside datalist itemtemplate then you
experienced that the action is repeated per item.

following example shows how to overcome this problem and
how to use jquery in datalist itemtemplate.

<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(".linkreply").live("click", function (evt) {
evt.preventDefault(); //this prevents the
//click from leave the page

$(this).next().show("slow"); // show the panel
});
});
</script>

<asp:DataList ID="DataList1">
<ItemTemplate>
<asp:LinkButton ID="Reply" Font-Size="9" CssClass="linkreply" runat="server"
resourcekey="Reply"/>
<asp:Panel ID="Nonusercomment2" Font-Size="9" CssClass="subcommentstyle" runat="server">
<asp:Label ID="namelabel2" runat="server" resourcekey="Name" /><br />
<asp:TextBox ID="NameTextBox2" EnableViewState="false"
CssClass="allsubcommentboxes" runat="server" /><br />
</asp:Panel>
..........

in the script section this line - evt.preventDefault();
prevents the click from leaving the page.

Read 2038 times
Super User

Email This email address is being protected from spambots. You need JavaScript enabled to view it.
Login to post comments