Problems with accordion and multiple controls

[FishGuy]

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

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?

[danasegarane]

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

[FishGuy]

<%@ 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>

[danasegarane]

Did you check this one ?

[FishGuy]

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.

[danasegarane]

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

[FishGuy]

'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.

[danasegarane]

Upload a sample

[FishGuy]

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

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?

[danasegarane]

Example simulating the error ?

[gep13]

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