Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

asp modal popup extender duplicate component id error

Posted on 2010-09-10
4
Medium Priority
?
1,681 Views
Last Modified: 2012-05-10
Modal Popup Extender Error
Page-Title.doc
0
Comment
Question by:arvee2003
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 15

Expert Comment

by:rajeeshmca
ID: 33659649
can u tell wht the error is... i am not able to see the attachmnet
0
 

Author Comment

by:arvee2003
ID: 33665326
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
 
LVL 15

Expert Comment

by:rajeeshmca
ID: 33669279
Are u calling the user control twice in the page
0
 

Accepted Solution

by:
arvee2003 earned 0 total points
ID: 33678868

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the ASP.NET AJAX ModalPopupExtender control. In this article we will show how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, how to show/display/cal…
I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …
Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…

704 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question