• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1710
  • Last Modified:

asp modal popup extender duplicate component id error

Modal Popup Extender Error
Page-Title.doc
0
arvee2003
Asked:
arvee2003
  • 2
  • 2
1 Solution
 
rajeeshmcaCommented:
can u tell wht the error is... i am not able to see the attachmnet
0
 
arvee2003Author Commented:
This is my main page in which I have collapisible panel and my phone gridview is contained in it.

I am getting duplicate component id error ( screen shots at the end).First time on click it opens
with modal popup correctly. But when I tried to cancel (hide the popup) it gives two components with
same id error.

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

I tried setting ScriptMode=”release”
the duplicate component error goes away but the modal up shows up more than 1 instance of the popup.During
first popup only one is shows and during subsequent it keeps on adding modal popups. (second click it has
2 and so on).

My requirements.
1.      to get rid of these errors
2.      to close the modal popup on cancel which is contained with in the <edititemtemplate> of formview
modal popup.

Main GridView User Control Page.
-------------------------------

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/basemaster.master" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ Register TagPrefix="ucophone" TagName="ucopsphone" Src="~/UserControls/online_app_phone_gv.ascx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>
         <asp:CollapsiblePanelExtender
             ID="CollapsiblePanelExtenderPhone" runat="server"  
             TargetControlID="PanelContentPhone"
             SuppressPostBack="True" >
         </asp:CollapsiblePanelExtender>
         <asp:Panel ID="PanelContentPhone" runat="server" CssClass="collapsePanel">
            <div style="margin-left:65px;">
               <ucophone:ucopsphone id="ucopsphone" runat="server" />              
             </div>
         </asp:Panel>      
       </ContentTemplate>
     </asp:UpdatePanel>
  </div>
  </asp:Content>


Gridview UserControl(ascx) which contains modalpopup

<%@ Control Language="C#" ClassName="online_app_phone_gv" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ import Namespace="Oracle.DataAccess.Client" %>
<%@ import Namespace="Oracle.DataAccess.Types" %>

<script runat="server">

     protected void GridViewAppPhone_RowCommand(object sender, GridViewCommandEventArgs e)
     {
         switch (e.CommandName)
         {
             case ("Insert"):
                 doEditViewPhone(strkey1, strkey2, "Insert");
                 break;
             case ("View"):
                 doEditViewPhone(strkey1, strkey2, "View");
                 break;
             case ("Select"):
                 doEditViewPhone(strkey1, strkey2, "Select");
                 break;                                                            
             default:
                 break;            
         }
     }
 
     protected void FormViewOnlinePhone_ItemCommand(object sender, FormViewCommandEventArgs e)
     {
         FormViewRow row = FormViewOnlinePhone.Row;
         if (e.CommandName == "Update")
         {
              // call update procedure
         }

         if (e.CommandName == "Insert")
         {

                            // call insert procedure

         }

         if (e.CommandName == "Cancel")
         {

             // Hide Popup
         }
     }    
</script>  
<script type="text/javascript">
    function cancelClick()
    {
      this._popup = $find('mdlPopup');
      this._popup.hide();
    }
</script>
<asp:UpdatePanel id="updPnlPhoneList" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
       <asp:GridView ID="GridViewAppPhone" runat="server"  >
            <asp:TemplateField ShowHeader="false" HeaderText="Commands">
                <ItemTemplate>
<asp:LinkButton id="btnViewPhoneDetails" CommandName="View" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" Text=”Edit"  CausesValidation="False" runat="server" ToolTip="View Record"></asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>  
       </asp:GridView>
       <asp:SqlDataSource ID="SqlDataSourcePhone" runat="server </asp:SqlDataSource>
  </ContentTemplate>
 </asp:UpdatePanel>
 

 <asp:Panel ID="pnlPopupPhone" runat="server" CssClass="modalPopupBackground">
     <asp:UpdatePanel ID="updPnlPhoneDetail" runat="server"   UpdateMode="Conditional"
                        ChildrenAsTriggers="true">
         <ContentTemplate>
              <asp:Button ID="btnShowPopupPhone" runat="server" style="display:none"
                           usesubmitbehavior="false" />
              <asp:ModalPopupExtender ID="mdlPopupPhone" runat="server"
                     PopupControlID="pnlPopupPhone"
                     TargetControlID="btnShowPopupPhone"
                     Enabled="True">
              </asp:ModalPopupExtender>
              <asp:FormView ID="FormViewOnlinePhone" runat="server"
                    DataSourceID="ObjectDataSource1"
                    DefaultMode="Edit" OnItemCommand="FormViewOnlinePhone_ItemCommand">  
                  <EditItemTemplate>
                     <div style=" text-align:right;width:400px;">
                            <asp:LinkButton ID="LinkButton1" runat="server" usesubmitbehavior="false"  
                             CausesValidation="True"  CommandName="Update" Text="Update" />&nbsp;
                        <asp:LinkButton ID="LinkButton2" runat="server"   CausesValidation="False"
                             CommandName="Cancel" Text="Cancel" usesubmitbehavior="false" />
                     </div>      
                  </EditItemTemplate>
              </asp:FormView>
          </ContentTemplate>      
     </asp:UpdatePanel>
     <div style=" text-align:right;width:420px;">
        <asp:Button ID="btnClose" styel=”display:none;" runat="server"
                    CausesValidation="False"  Text="Cancel" usesubmitbehavior="false” />
      </div>    
</asp:Panel>
<asp:TextBox id="txtAppId" Text="" runat="server" Visible
0
 
rajeeshmcaCommented:
Are u calling the user control twice in the page
0
 
arvee2003Author Commented:

Temporarily Solved.

I removed Update panel which was housing the collapsible panel and the error were gone.

Looks like too much panels and update panel is causing errors

Thanks
Suresh
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now