locked
Can not open modalpopup_extender RRS feed

  • Question

  • User-1719671795 posted

    Dear firends,

    I simply put a panel and modalpopup_extender on a page and tried to open it via javascript.

    On stand-alone page (without masterpage) it works fine. But when I put the code on a child page (with a master page) javascript code does not open tme modal...

    You will find code attached below. 

    Thanks in advance...

    CODE IN THE STAND-ALONE PAGE

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="deneme.aspx.vb" Inherits="Uyeler_deneme" %>
    <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
         <script type="text/javascript">
    		<!--
    		function alarm(){
    		   
    		    $find('OyunModal').show();
            }
           
    
    		-->
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
         <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" CombineScripts="false">
        <Scripts>
                    <asp:ScriptReference Path="~/Scripts/webkit.js" />
        </Scripts>
        </cc1:ToolkitScriptManager>
        <div>
        
         <a href="#" 
       onclick="return false" ID="dummyLink" runat="server">dummy</a>
        
        
            <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
            <div id="Div1">Deneme</div>
            <asp:HyperLink ID="HyperLink1" runat="server">HyperLink</asp:HyperLink>
            </asp:Panel>
            
        <div onmousedown="alarm()">Tıkla ve aç</div>
         
         <cc1:ModalPopupExtender ID="OyunModal" runat="server"
            DynamicServicePath="" 
            Enabled="True" 
            TargetControlID="dummyLink" 
            PopupControlID="Panel1"
            CancelControlID="HyperLink1"
            BackgroundCssClass="modalBackground">
         </cc1:ModalPopupExtender>   
         
        </div>
        </form>
    </body>
    </html>
    


    CODE ON THE CHILD PAGE WITH A MASTER PAGE:

    <%@ Page Title="" Language="VB" MasterPageFile="~/Uyeler/Uye.master" AutoEventWireup="false" CodeFile="deneme2.aspx.vb" Inherits="Uyeler_deneme2" %>
    <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
    		<!--
        function alarm() {
    
            $find('OyunModal').show();
        }
           
    
    		-->
    </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <a href="#" 
       onclick="return false" ID="dummyLink" runat="server">dummy</a>
        
        
            <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
            <div id="Div1">Deneme</div>
            <asp:HyperLink ID="HyperLink1" runat="server">HyperLink</asp:HyperLink>
            </asp:Panel>
            
        <div onmousedown="alarm()">Tıkla ve aç</div>
        <asp:Button ID="Button1" runat="server" Text="Button" />
         <cc1:ModalPopupExtender ID="OyunModal" runat="server"
            DynamicServicePath="" OnOkScript="onOk()" 
            Enabled="True" 
            TargetControlID="dummyLink" 
            PopupControlID="Panel1"
            CancelControlID="HyperLink1"
            BackgroundCssClass="modalBackground">
         </cc1:ModalPopupExtender>   
         
    </asp:Content>
    



    Friday, October 18, 2013 6:39 PM

Answers

  • User-1392847221 posted

    Hi,

    could you please try to add BehaviourId and the try to use same method with behaviour id.

     

    $get("OyunModal").show();

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, October 19, 2013 6:49 AM

All replies

  • User-1392847221 posted

    Hi,

    could you please try to add BehaviourId and the try to use same method with behaviour id.

     

    $get("OyunModal").show();

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, October 19, 2013 6:49 AM
  • User-376018714 posted

    Hi

    here is your problem:

    In ASP.NET WebForm world - whenever you have the case of Master Pages, the controls inside the child page is usually appended with the MasterPage content place holder id. so for e.g. if the content place holder id of your master page was "MainContent" and you created a default.aspx and placed a button lets say "button1" - when the page gets rendered on the client side the button will have its id = "MainContent_button1". This is a mechanism that WebForms engine employs to make sure that IDs of each control is unique. 

    You dont face this problem when you have a standalone page without a Master page.

    In order to solve this problem all you need to do is - add a property called ClientIDMode and provide a value=static. Here is the code :

     <asp:ModalPopupExtender ID="OyunModal" ClientIDMode=Static runat="server"
                                        OnOkScript="onOk()" 
                                        Enabled="True" 
                                        TargetControlID="dummyLink" 
                                        PopupControlID="Panel1"
                                        CancelControlID="HyperLink1"
                                        BackgroundCssClass="modalBackground"></asp:ModalPopupExtender>

    With this what happens is - when the page gets rendered on the client side - your modal popup will be named as "OyunModal" and in JavaScript when you do $find('OyunModal') - it will be able to find the control.

    In your current code since the id on the client side is ContentPlaceHolder1_OyunModal - your JavaScript code to $find() is failing...

    ~

    Lohith

    Saturday, October 19, 2013 7:49 AM
  • User-1719671795 posted

    Hi,
    could you please try to add BehaviourId and the try to use same method with behaviour id.
     
    $get("OyunModal").show();
    

    Thansk for your response but it does not work.

    :(

    Saturday, October 19, 2013 2:48 PM
  • User-1719671795 posted

    Hi
    here is your problem:
    In ASP.NET WebForm world - whenever you have the case of Master Pages, the controls inside the child page is usually appended with the MasterPage content place holder id. so for e.g. if the content place holder id of your master page was "MainContent" and
     you created a default.aspx and placed a button lets say "button1" - when the page gets rendered on the client side the button will have its id = "MainContent_button1". This is a mechanism that WebForms engine employs to make sure that IDs of each control is
     unique. 
    You dont face this problem when you have a standalone page without a Master page.
    In order to solve this problem all you need to do is - add a property called ClientIDMode and provide a value=static. Here is the code :
    <asp:ModalPopupExtender ID="OyunModal" ClientIDMode=Static runat="server"
                                        OnOkScript="onOk()"
                                        Enabled="True"
                                        TargetControlID="dummyLink"
                                        PopupControlID="Panel1"
                                        CancelControlID="HyperLink1"
                                        BackgroundCssClass="modalBackground"></asp:ModalPopupExtender>

    With this what happens is - when the page gets rendered on the client side - your modal popup will be named as "OyunModal" and in JavaScript when you do $find('OyunModal') - it will be able to find the control.

    In your current code since the id on the client side is ContentPlaceHolder1_OyunModal - your JavaScript code to $find() is failing...

    ~

    Lohith

    Thanks for detailed response but control deos not support "ClientIDMode" tag and it causes error.

    Saturday, October 19, 2013 2:50 PM
  • User-1719671795 posted

    Hi,
    could you please try to add BehaviourId and the try to use same method with behaviour id.
     
    $get("OyunModal").show();
    

    Dear Rajat,

    I've tested lots of combinations and finally.. It worked. I just changed $get to $find.

     $find("DenemeBehaviour").show();

    Thanks for your support..

    Regards,

    Saturday, October 19, 2013 6:05 PM
  • User-376018714 posted

    ardilo

    sorry that i did not ask you which version of ASP.NET are you on. The ClientIDMode is supported from ASP.NET 4.0 onwards. If you are on 2.0 its not supported.

    Nevertheless, the simplest way to address your solution is to do the following:

     function alarm() {
    
            $find('ContentPlaceHolder1_OyunModal').show();
        }
           

    I have appended the container name to the control name - thats how control ids were generated prior to 4.0 introduction of ClientIDMode.

    Let me know if the above worked for you

    Monday, October 21, 2013 1:10 AM