0

I have to develop the functionality for the que and rply for that i have create the user contol as per my requirment as fallow and i have add the div with the text box for rely and submit button on user control and keep the div disply style to none and i call the javascript on reply link which shows the that 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 />
                By 
                <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>
                &nbsp;</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>
                            &nbsp;</td>
                        <td style="text-align: right">
                            <asp:Button ID="btnSubmit" runat="server" Text="Submit" 
                                onclick="btnSubmit_Click" />
                        </td>
                    </tr>
                    </table></div></panel>
            </td>
            <td>
                &nbsp;</td>
        </tr>
    </table>
</div>

But when i add those user control multiple time as per the count of replyes.

for (int i = 0; i< dt.Rows.Count; i++)
{
    SuppReview SR = (SuppReview)Page.LoadControl("SuppReview.ascx");
    SR.settxt(dt.Rows[i]);
    reviews.Controls.Add(SR);
}

on the 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;">
        &nbsp;&nbsp;&nbsp; View</div>

    <asp:Panel ID="reviews" runat="server">

    </asp:Panel>
</asp:Content>

On clicking on reply link int hide show the div (Contain text box for rely and submit button) multiple time and it not work for the other entry

1 Answer 1

0

You have multiple duplicate IDs on your page if you are adding this control multiple times!

Consider changing the IDs to classes.

also give your outer div in your control a class! e.g. <div class="wrapper">

Declare a 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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.