Trigger page_load in child iframe page when calling parent direct method

  1. #1

    Trigger page_load in child iframe page when calling parent direct method

    Hello!

    We are using version 4.8.3 of ext.net.

    When the child iframe called the directmethod of the parent, the page_load in the child page was triggered. But when I downgraded to version 4.2, page_load was not triggered in the child page, do you have any solution to this problem?

    We have also checked that page_load was triggered twice in IE 11 only, it works fine in firefox and chrome.
    For version 4.2, it works normally in IE 11 and other browsers.

    Thank you for your help in advance.

    Below is the sample code for your reference:

    Child
    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Console.WriteLine("First Load");
            }
        }
    
    </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager" runat="server"  Locale="en-US" DisableViewState="true" ScriptMode="Release" />
            <div>
                <ext:Button runat="server" Text="Test" MarginSpec="0 5 0 0" Handler="parent.test();">
                </ext:Button>
            </div>
        </form>
    </body>
    </html>

    Parent
    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Console.WriteLine("First Load");
            }
        }
    	
    	 [DirectMethod]
            public void Test()
            {
                X.Msg.Alert("Test", "Test").Show();
            }
    
    </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    	
    	<script type="text/javascript">
    
    
            var test = function () {
                App.direct.Test({
                    eventMask: {
                        showMask: true
                    }
                });
            };
    		</script>
    	
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager" runat="server" />
            <div>
                <ext:TabPanel ID="CenterPanel" runat="server" Region="Center">
                            <Items>
                                <ext:Panel runat="server" ID="Tab" Title="Ajax Tab" Width="600"
                                    Height="250">
                                    <Loader runat="server" Mode="Frame" Url="Child.aspx">
                                    </Loader>
                                </ext:Panel>
                            </Items>
                 </ext:TabPanel>
    					
            </div>
        </form>
    </body>
    </html>
    Last edited by kwcitadmin; Jan 23, 2020 at 7:38 AM.
  2. #2
    Thanks for providing the excellent samples. We will investigate and try to figure out what's going on here. Your code looks correct, so this should work as expected.
    Geoffrey McGill
    Founder & CEO
  3. #3
    Hello Geoffrey and @kwcitadmin!

    I cannot reproduce the scenario. I slightly modified the sample to call X.Toast() to display messages as the server-sides are called. The modified code is as follows:

    62830-ParentPage.aspx
    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                X.Toast("First Load parent");
            }
        }
    	
    	[DirectMethod]
        public void Test()
        {
            X.Toast("Direct Method");
        }
    </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    	
    	<script type="text/javascript">
            var test = function () {
                App.direct.Test({
                    eventMask: {
                        showMask: true
                    }
                });
            };
    		</script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager" runat="server" />
            <div>
                <ext:TabPanel ID="CenterPanel" runat="server" Region="Center">
                    <Items>
                        <ext:Panel runat="server" ID="Tab" Title="Ajax Tab" Width="600"
                            Height="250">
                            <Loader runat="server" Mode="Frame" Url="62830-ChildPage.aspx">
                            </Loader>
                        </ext:Panel>
                    </Items>
                 </ext:TabPanel>
            </div>
        </form>
    </body>
    </html>
    62830-ChildPage.aspx
    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                X.Toast("First Load child");
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager" runat="server"  Locale="en-US" DisableViewState="true" ScriptMode="Release" />
            <div>
                <ext:Button runat="server" Text="Test" MarginSpec="0 5 0 0" Handler="parent.test();">
                </ext:Button>
            </div>
        </form>
    </body>
    </html>
    I always receive the pop ups in this sequence, if I click the 'test' button twice after the page is loaded:

    1. First Load parent
    2. First Load child
    3. Direct Method
    4. Direct Method

    Tested in:
    - Ext.NET 4.8.3
    - Ext.NET 5.1.0 (to be released)
    - Chrome 79.0.3945.117
    - Firefox 72.0.2
    - MS-Edge 18.17763
    - MS-IE 11.737.17763.0, update 11.0.145

    All browsers, the same behavior. Am I missing anything, I don't see how I could have tainted the repro case with just replacing a call to Console.WriteLine into the response script issuing a call to Ext.toast().
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Thank you Geoffrey and Fabricio for the prompt reply and detailed testing!

    I just checked my sample and notice that I oversimplified it. I have tried to comment out the fileUploadField in the parent page, and the double loading issue is gone in IE. Could you please help to investigate?

    Parent Page with file upload field added:
    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                X.Toast("First Load parent");
            }
        }
    	
    	[DirectMethod]
        public void Test()
        {
            X.Toast("Direct Method");
        }
    </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    	
    	<script type="text/javascript">
            var test = function () {
                App.direct.Test({
                    eventMask: {
                        showMask: true
                    }
                });
            };
    		</script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager" runat="server" />
            <div>
                <ext:FileUploadField ID="FileUploadImage" runat="server" Width="400" Icon="Attach">
                                                    <Listeners>
                                                        <Change Handler="uploadImage();" />
                                                    </Listeners>
                                                </ext:FileUploadField>
                <ext:TabPanel ID="CenterPanel" runat="server" Region="Center">
                    <Items>
                        <ext:Panel runat="server" ID="Tab" Title="Ajax Tab" Width="600"
                            Height="250">
                            <Loader runat="server" Mode="Frame" Url="62830-ChildPage.aspx">
                            </Loader>
                        </ext:Panel>
                    </Items>
                 </ext:TabPanel>
            </div>
        </form>
    </body>
    </html>
  5. #5
    Thanks for the help. We have moved the form tag to cover only the FileUploadField and the case is solved!

    
    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                X.Toast("First Load parent");
            }
        }
    	
    	[DirectMethod]
        public void Test()
        {
            X.Toast("Direct Method");
        }
    </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    	
    	<script type="text/javascript">
            var test = function () {
                App.direct.Test({
                    eventMask: {
                        showMask: true
                    }
                });
            };
    		</script>
    </head>
    <body>
        
            <ext:ResourceManager ID="ResourceManager" runat="server" />
            <div>
    <form id="form1" runat="server">
                <ext:FileUploadField ID="FileUploadImage" runat="server" Width="400" Icon="Attach">
                                                    <Listeners>
                                                        <Change Handler="uploadImage();" />
                                                    </Listeners>
                                                </ext:FileUploadField>
        </form>
                <ext:TabPanel ID="CenterPanel" runat="server" Region="Center">
                    <Items>
                        <ext:Panel runat="server" ID="Tab" Title="Ajax Tab" Width="600"
                            Height="250">
                            <Loader runat="server" Mode="Frame" Url="62830-ChildPage.aspx">
                            </Loader>
                        </ext:Panel>
                    </Items>
                 </ext:TabPanel>
            </div>
    
    </body>
    </html>
  6. #6
    Hello, @kwcitadmin!

    This makes sense; if there's a FileUploadField in the form, the submission (whenever it needs a post back or ajax call), is made differently to allow the potential upload of the file. So you probably just fell in that scenario. By just adding the upload field here I still am not reproducing the Page_Load()'s trigger of the "guarded" code.

    Anyway, if it works for you, all should be fine; thanks for sharing the approach that worked for your scenario!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 5
    Last Post: Feb 10, 2014, 4:16 AM
  2. Replies: 11
    Last Post: Nov 02, 2013, 11:15 AM
  3. Replies: 2
    Last Post: Apr 18, 2013, 3:49 AM
  4. How to close windows from a child iFrame button?
    By metallica87 in forum 2.x Help
    Replies: 2
    Last Post: Nov 14, 2012, 5:30 AM
  5. Replies: 1
    Last Post: Sep 04, 2009, 1:26 PM

Posting Permissions