asp.net - How to hide show the div on usercontrol using javascript -
i have develop functionality que , rply have create user contol per requirment fallow , have add div text box rely , submit button on user control , keep div disply style none , call javascript on reply link shows div.
<%@ control language="c#" autoeventwireup="true" codebehind="suppreview.ascx.cs" inherits="laafoodwebapp.suppreview" %> <div> <table style="width:100%;"> <tr> <td rowspan="2" style="width: 15%; vertical-align: top;"> <asp:label id="lblmsgtype" runat="server"></asp:label> <br /> <asp:label id="lblmsgid" runat="server"></asp:label> </td> <td style="width: 70%; vertical-align: top;"> <asp:label id="lblmsgtbody" runat="server"></asp:label> </td> <td style="width: 15%"> <asp:label id="lblvdate" runat="server"></asp:label> <br /> <asp:label id="lblname" runat="server"></asp:label> </td> </tr> <tr> <td> <a id="togglereply" style="color: #15adff" href="#">reply</a> </td> <td> <asp:label id="lblemail" runat="server"></asp:label> <br /> <asp:label id="lblphone" runat="server"></asp:label> </td> </tr> <tr> <td> </td> <td> <panel id="pnlreply" > <div id="divreply" style="display:none"> <table style="width:100%;"> <tr> <td style="width: 15%"> replys</td> <td> <asp:textbox id="textbox1" runat="server" height="50px" textmode="multiline" width="100%"></asp:textbox> </td> </tr> <tr> <td> </td> <td style="text-align: right"> <asp:button id="btnsubmit" runat="server" text="submit" onclick="btnsubmit_click" /> </td> </tr> </table></div></panel> </td> <td> </td> </tr> </table> </div>
but when add user control multiple time per count of replyes.
for (int = 0; i< dt.rows.count; i++) { suppreview sr = (suppreview)page.loadcontrol("suppreview.ascx"); sr.settxt(dt.rows[i]); reviews.controls.add(sr); }
on page
<%@ page title="" language="c#" masterpagefile="~/suppliermasternew.master" autoeventwireup="true" codebehind="supp_views.aspx.cs" inherits="laafoodwebapp.supp_views" %> <asp:content id="content1" contentplaceholderid="head" runat="server"> <script type="text/javascript"> $(function () { $('#togglereply').click(function () { $('#divreply').toggle('slow'); return false; }); }); </script> </asp:content> <asp:content id="content2" contentplaceholderid="cphcontent" runat="server"> <div style="width: 100%; height: 24px; background-color: #d2eef2; padding-top: 10px; font-size: large; color: #000000; text-align: left;"> view</div> <asp:panel id="reviews" runat="server"> </asp:panel> </asp:content>
on clicking on reply link int hide show div (contain text box rely , submit button) multiple time , not work other entry
you have multiple duplicate ids on page if adding control multiple times!
consider changing ids classes.
also give outer div in control class! e.g. <div class="wrapper">
declare function:
function togglereply(sender) { $(sender).parent('.wrapper').children('.divreply').toggle('slow'); }
your link:
<a class="togglereply" style="color: #15adff" href="javascript:void(0);" onclick="togglereply(this);">reply</a>
Comments
Post a Comment