Problems with accordion and multiple controls

I have an accordion control which is databound, within each pane I add a datagrid with an image button column, clicking on one of the buttons should cause a popup (modal panel popup extender) which it does.

However it also causes a javascript error

Quote:

---

Microsoft JScript runtime error: Sys.InvalidOperationException: Two components with the same id can't be added to the application.

---

This error was origionally on the popup extender control so a quick google I found this http://forums.asp.net/t/1331672.aspx and applied the fix, however I still get the error but not its on 'ModalPanel$DropShadowBehavior'

Im not sure where to go from here?

Post your design part..It says few controls have the same id means that the id for the two controls are of same value

HTML Code:

---

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CourseEventDetails.ascx.cs" Inherits="UserControls_CourseEventDetails" %>
 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<script>
                                    $(document).ready(function () {
                                        //for div 
                                        $(".courseeventstable5 tr:odd").css("background-color", "#EDF5FF"); $(".courseeventstable5 tr:even").css("background-color", "#FFFFFF");
                                    });
                                    $('someSelectoHere').click()
                                    {
                                        $(".courseeventstable5 tr:odd").css("background-color", "#EDF5FF"); $(".courseeventstable5 tr:even").css("background-color", "#FFFFFF");
                                    };
                                    $('#btnShowOptions').click(function (e) { return false; }); </script>

<h1><asp:Label ID="lblCourseTitle" runat="server" Text="Course Details"></asp:Label> </h1> 
<div id="pagewindowcontainer" class="pagewindowcontainer">
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
         
                       
                  <table id="outline-course-details" class="coursetable4" border="0" cellpadding="0" cellspacing="0">
             
                <tr><th>RRP</th><td><asp:Label ID="lbl_RRP" runat="server" Text=""></asp:Label></td></tr>
<%--              <tr runat="server" id="trDuration" ><th>Days</th><td><asp:Label ID="lbl_Days" runat="server" Text=""/></td></tr>--%>
                <tr><th>Course Code</th><td><asp:Label ID="lbl_Code" runat="server" Text=""/></td> </tr>
            </table>

            <div id="coursepageoptions" runat="server">
                <p class="course-page-options">

                  Link to page:
                    <asp:HyperLink ID="OutlineLink" runat="server"
                                  ToolTip="Link to this page" />
      </p>
 </div>

 <asp:TabContainer ID="TabEnquireCourseEvent" runat="server"
                            CssClass="QA_TabbedPanelContainer">
<asp:TabPanel ID="TabPanelEnquire" runat="server">
<HeaderTemplate>
view dates /enquire course
</HeaderTemplate>
<ContentTemplate >
<table border="0" cellpadding="0" cellspacing="0" class="courseeventstable5 tablefix" summary="Courses dates and locations"><caption>
            Currently scheduled dates for this training course
          </caption>
          <tr class="main early loc1"><th scope="col" class="leftcol qa-loc">Location</th></tr>
</table>

    <asp:Accordion ID="CourseAccordion" runat="server" FadeTransitions="true" ContentCssClass="accordpans">
   
<HeaderTemplate>
 
<table border="0" cellpadding="0" cellspacing="0" class="courseeventstable5" id="courseeventstable_header">
<tr class="&#xA;              dates early loc1"><td class="leftcol qa-loc"> <%#DataBinder.Eval(Container.DataItem, "City")%></td><td class="show-info"><asp:ImageButton ID="btnShowOptions" runat="server" ImageUrl="~/images/buttons/show-options.png"  /></ImageButton></td></tr>
 </table>
 </HeaderTemplate>
 <ContentTemplate >
 <ol><li class="book">
  <asp:GridView ID="gvwEvents" runat="server" DataSource='<%# Eval("Events") %>'  AutoGenerateColumns="False" cssclass="event-info-table tablefix" datakeynames="GspEventID" BorderStyle="None" GridLines="None"  ShowHeader="false" OnRowCommand="gvwEvents_RowCommand" >
                    <headerstyle cssclass="EventsGridViewHeader" />
       
        <RowStyle cssclass="EventsGridViewRows" />
   
            <Columns>
                <asp:BoundField DataField="StartDate" DataFormatString="{0:dd MMM}" ItemStyle-CssClass="info-date"/>
                <asp:BoundField DataField="Price" DataFormatString="{0:c}" ItemStyle-CssClass="info-fee"/>
                <asp:ButtonField ImageUrl="~/images/buttons/enquire.gif"  ButtonType="Image" ControlStyle-CssClass="info-buttons" ItemStyle-HorizontalAlign="Right" />
           
            </Columns>
</asp:GridView>

</li></ol>
 </ContentTemplate>
 
  </asp:Accordion> 

</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TabPanelOutline" runat="server">
<HeaderTemplate>
course description
</HeaderTemplate>
<ContentTemplate > 
 <div id="DivOutlineMain" runat="server">
       
            <div id="DivOutline" runat="server" class="DivOutline"></div>
 
           
            </div>     
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>


             
     
 
 
</div>
 <asp:Button ID="btn_Submit" runat="server" Text="Click to Popup" Style="display: none;" />

  <asp:Panel ID="ModalPanel" runat="server" CssClass="modalPopup" Style="display: none;">
            <!-- Inside we have a user control -->
           
            <h2>
                Request quote</h2>
         
                    <div id="Div2" class="shadowcontainer">

                        <table class="LocationsEdit">
                            <tr>
                                <td class="valid">
                                    <asp:Label ID="lblCourseCode" runat="server" Text="Course Code"></asp:Label>
                                </td>
                                </tr>
                                </table>
                           
                            <div class="right-button-container-Grey">
                            <asp:ImageButton ID="imgbtnSave" runat="server" ImageUrl="~/images/buttons/save.png" CausesValidation="True" OnClick="imgbtnSave_Click" />
                            <asp:ImageButton ID="imgbtnCancel" runat="server" ImageUrl="~/images/buttons/cancel.png" CausesValidation="False"  />
                            <div class="button-container-subleft"><asp:Label ID="AdditionalInfo" runat="server" Text="" CssClass="RequiredFieldInValid"></asp:Label></div></div>
                                    </div>
           
                <asp:Button ID="OkButton" runat="server" Text="OK" Style="display: none;" />
                <asp:Button ID="CancelButton" runat="server" Text="Cancel" Style="display: none;" />
             
                       
                                </asp:Panel>
                                <asp:ModalPopupExtender ID="EventRequestMPE" runat="server" BackgroundCssClass="modalBackground" CancelControlID="CancelButton" DropShadow="true" OkControlID="OkButton" PopupControlID="ModalPanel" TargetControlID="btn_Submit">
        </asp:ModalPopupExtender>    </ContentTemplate>
</asp:UpdatePanel>

---

Did you check this one ?

Yes I have.
this.EventRequestMPE.ID = DateTime.Now.ToString();
which cleared the error on the EventRequestMPE control but then it started throwing the error

Microsoft JScript runtime error: Sys.InvalidOperationException: Two components with the same id 'maincontent_CourseEventDetails_ModalPanel$DropShadowBehavior' can't be added to the application.

I think you are assigning to some other control.Check the id maincontent_CourseEventDetails_ModalPanel$DropShadowBehavior, there is no number found ?

'ModalPanel$DropShadowBehavior'

This is just a property of the asp:ModalPopupExtender ID="EventRequestMPE"
control if I set the property to false it no longer errors with the previous bodge applied, problem is i have lost the drop shadow.

I can recreate it in non ie browsers using css3
-moz-box-shadow: 5px 5px #000000;
-webkit-box-shadow: 5px 5px #000000;
box-shadow: 5px 5px #000000;

but its not ideal excluding i.e. also clicking the cancel button in the popup also throws a js error

Microsoft JScript runtime error: Sys.InvalidOperationException: Handler was not added through the Sys.UI.DomEvent.addHandler method.

Upload a sample

in addition everytime i click the button to show the pop up there is a comma added the the the text box on the popup even though in my codebehind i clear it on

Code:

---

protected void gvwEvents_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        GridView grid = (GridView)this.CourseAccordion.Panes[this.CourseAccordion.SelectedIndex].ContentContainer.FindControl("gvwEvents");       
        int primaryKey = Convert.ToInt32(grid.DataKeys[Convert.ToInt32(e.CommandArgument)].Value); 
        ViewState["CourseCode"] = primaryKey.ToString();
        EventRequestMPE.Show();
        this.txtContactID.Text = "";
    }

---

At no point do i try and populate the textbox otherwise.

What sample would you like?

Example simulating the error ?

FishGuy,

Are you able to provide a complete sample that illustrates your problem? This will really help with diagnosing the problem. This doesn't have to contain all your code, but certainly a stripped down version.

Gary