[CLOSED] Page Load Is Firing Twice

  1. #1

    [CLOSED] Page Load Is Firing Twice

    Hi Community !

    I have a problem using the Toolbar and TabMenu controlers: when clicking over a menu option, the app is actualizing twice.

    A point of interruption must be inserted in the event Page_Load for the app TstComboBox.aspx, to recreate my problem.

    Please check the code sample below:

    
    <%@ Page Language="C#" AutoEventWireup="true"  %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                if (!X.IsAjaxRequest)
                {
                    btnPerfiles.StyleSpec = "color:#FFF;";
                    btnPerfiles.OverCls = "overbutton";
                    DesplegarMenu();
                }
            }
            catch (Exception)
            {
            }
        }
    
        private void DesplegarMenu()
        {
            Ext.Net.MenuItem theMenuItem1 = new Ext.Net.MenuItem() { ID = "Modulo1", Text = "Modulo1" };
            Ext.Net.Menu theMenu11 = new Ext.Net.Menu();
    
            Ext.Net.MenuItem theMenuItem11 = new Ext.Net.MenuItem() { ID = "SubModulo11", Text = "SubModulo11" };
            Ext.Net.MenuItem theMenuItem12 = new Ext.Net.MenuItem() { ID = "SubModulo12", Text = "SubModulo12" };
    
            // theMenuItem11.Listeners.Click.Handler = "App.direct.CreaTab('TstGridPanelwithCheckbox','IdApp1','TstGridPanelwithCheckbox.aspx');";
            theMenuItem12.Listeners.Click.Handler = "App.direct.CreaTab('TstComboBox','IdApp2','TstComboBox.aspx');";
    
            theMenu11.Items.Add(theMenuItem11);
            theMenu11.Items.Add(theMenuItem12);
    
            theMenuItem1.Menu.Add(theMenu11);
            menuModulo.Items.Add(theMenuItem1);
        }
    
        [DirectMethod]
        public void CreaTab(string pstrTitlePanel, string pstrIdComponentLoader, string pstrLink)
        {
            try
            {
                Ext.Net.ComponentLoader theComponentLoader = new Ext.Net.ComponentLoader();
                Ext.Net.Panel thePanel = new Ext.Net.Panel();
    
                theComponentLoader.ID = "cmp" + pstrIdComponentLoader;
                theComponentLoader.Url = pstrLink;
                theComponentLoader.LoadMask.ShowMask = true;
                theComponentLoader.LoadMask.Msg = "Cargando... ";
                theComponentLoader.Mode = LoadMode.Frame;
    
                thePanel.ID = "pnl" + pstrIdComponentLoader;
                thePanel.Title = pstrTitlePanel;
                thePanel.Closable = true;
                thePanel.FocusOnToFront = false;
                thePanel.Reorderable = true;
                thePanel.Border = false;
                thePanel.Loader = theComponentLoader;
    
                thePanel.Height = 550;
                thePanel.Layout = "Fit";
                thePanel.LoadContent();
                thePanel.AddTo(tbContenido);
                thePanel.Render();
                tbContenido.SetActiveTab(thePanel);
            }
            catch (Exception)
            {
            }
        }
        </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Launch Pad del Módulo  A& T</title>
        
    </head>
    
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Static" Theme="Neptune">
        </ext:ResourceManager>
    
        <ext:Toolbar ID="MainMenuBar" runat="server" Hidden="false">
            <Items>            
                <ext:Button ID="btnPerfiles" runat="server" Text="Perfiles">               
                    <Menu >                    
                        <ext:Menu runat="server" ID="menuModulo" >                                                        
                        </ext:Menu>                    
                    </Menu>
                </ext:Button>
                <ext:ToolbarSeparator/>
            </Items>
        </ext:Toolbar>
    
        <ext:TabPanel ID="tbContenido" runat="server"
            Region="Center"
            Border="false">
            <Plugins>
                <ext:BoxReorderer ID="BoxReorderer1" runat="server" />
            </Plugins>
        </ext:TabPanel>
    </body>
    </html>
    TstComboBox.aspx

    
    <%@ Page Language="C#" AutoEventWireup="true"  %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store1.DataSource = new object[]
                        {
                            new {Text = "One", Value = 1},
                            new {Text = "Two", Value = 2},
                            new {Text = "Three", Value = 3},
                            new {Text = "Four", Value = 4},
                            new {Text = "Five", Value = 5},
                        };
                Store1.DataBind();
            }
        }
        </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Edit Form View - Ext.NET Examples</title>
    </head>
    
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:Window ID="FormWindow" runat="server" 
                    Title="Form View" 
                    Width="440" 
                    Height="310"           
                    BodyPadding="15" 
                    Resizable="false" 
                    Closable="false"
                    Layout="Fit">
                <Items>
                    <ext:FormPanel ID="FormPanel1" runat="server" 
                            Border="false" 
                            Layout="Form">
                        <Items>
                            <ext:ComboBox ID="ComboBox1" runat="server"
                                    Name="Name1" 
                                    MsgTarget="Side" 
                                    AllowBlank="false"
                                    ValueField="Value"    
                                    DisplayField="Text"
                                    BlankText="Campo Number es obligatorio"
                                    EmptyText="Seleccionar Number..." 
                                    FieldLabel="Field ComboBox1" >
                                <Store>
                                    <ext:Store ID="Store1" runat="server" AutoLoad="false" >               
                                        <Model>
                                            <ext:Model ID="Model1" runat="server">
                                                <Fields>
                                                    <ext:ModelField Name="Value"/>
                                                    <ext:ModelField Name="Text" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                                <Triggers>
                                    <ext:FieldTrigger Icon="Clear" Hidden="true" QTip="Limpia Selección" />
                                </Triggers>
                                <Listeners>
                                    <BeforeQuery Handler="this.getTrigger(0)[this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                    <Change Handler="this.getTrigger(0).show();" /> 
                                    <TriggerClick Handler="if (index == 0) 
                                                                        { 
                                                                            this.reset();
                                                                            this.getTrigger(0).hide();
                                                                        }
                                                                        "/>
                                </Listeners>
                            </ext:ComboBox>
                        </Items>
                    </ext:FormPanel>
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    Any help would be appreciated

    Regards.
    Last edited by fabricio.murta; Nov 17, 2017 at 4:25 PM.
  2. #2
    Hello @opendat2000!

    I have checked your test code sample here and it works great! So great I can't reproduce the issue.

    Do you mean I need to add a breakpoint within TstComboBox.aspx file in order to reproduce it? Maybe you are adding the breakpoint outside or exactly around the !X.IsAjaxRequest?

    The Page_Load event is called whenever any ajax request or postback happens, and that's why you always see either X.IsAjaxRequest or IsPostBack tests in examples that do something on load within the Page_Load method. If you browse our Examples Explorer, for instance, most examples there will have this.

    That means that if you place a breakpoint or run a command (like returning a script to print to the console, or resetting a store) in your Page_Load event/method, and do not check for post back, you will not only notice the code run two times, but an arbitrary number of times as you interact with the page on anything that requests server feedback from the same page.

    To double check whether the page was not being loaded twice, I've changed the first part of TstComboBox.aspx to this:

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                
                X.AddScript("if (parent) console.log('EN hey');");
                Store1.DataSource = new object[]
                        {
                            new {Text = "One", Value = 1},
                            new {Text = "Two", Value = 2},
                            new {Text = "Three", Value = 3},
                            new {Text = "Four", Value = 4},
                            new {Text = "Five", Value = 5},
                        };
                Store1.DataBind();
            }
        }
        </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Edit Form View - Ext.NET Examples</title>
        <script type="text/javascript">
            if (parent) parent.console.log("hey");
        </script>
    </head>
    And I got just this output when I open the page.

    hey
    EN hey
    I would like to add that in this case a more detailed step-thru would be rather useful to ensure I'm doing what it takes to reproduce the issue. It may sound obvious for you, but we never know, maybe I'm just trying to reproduce the issue the wrong way here when I click the "Perfiles" menu button and choose "Modulo1" then "SubModulo12".

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabricio !!

    I've added the lines you suggested in the code (thanks)

    Previous Step.
    Adding a breakpoint in the following codeline

    Click image for larger version. 

Name:	Page Load Twice 1.JPG 
Views:	76 
Size:	36.4 KB 
ID:	25076

    Step 1. Run the test case.
    Step 2. Click the "Perfiles" menu button and choose "Modulo1" then "SubModulo12".
    Paso 3. The app will stop at the breakpoint.

    Click image for larger version. 

Name:	Page Load Twice 2.JPG 
Views:	60 
Size:	92.3 KB 
ID:	25077

    Step 4. The app will stop again at the breakpoint

    Click image for larger version. 

Name:	Page Load Twice 3.JPG 
Views:	79 
Size:	99.5 KB 
ID:	25078

    Final Result.

    Click image for larger version. 

Name:	Page Load Twice 4.JPG 
Views:	98 
Size:	56.9 KB 
ID:	25079

    I don't understand why this happens, but it's the combination between the Toolbar and the TabMenu because the problem doesn't happen when you enter the app directly in the browser.

    Regards.
    Mauricio
  4. #4
    Hello Mauricio!

    I got it now! Alright, just set your loader not to AutoLoad or let it auto load and don't cal LoadContent() and it will load the page just once. It probably does not run the returned code twice because it does not wait the first request to load before it makes the second. So, client-side, the call is always one even though it get to server-side request twice.

    Thanks for detailing the step-thru in the test case, I'm very confident this will do for you (at least it now triggers the breakpoint only once, since I set the loader to not AutoLoad).

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi FabrÃ*cio !!

    Thanks a lot for your reply.

    Please close the thread.

    Saludos
    Mauricio.
  6. #6
    Hello Mauricio! Thanks for the feedback, then I presume the answer helped you to solve the issue, right? Glad it helped!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] How to restrict the Change listener event from firing in page load.
    By arjunrvasisht in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 01, 2015, 1:14 PM
  2. [CLOSED] Row Select event Firing Twice when page load
    By Vamsi in forum 3.x Legacy Premium Help
    Replies: 1
    Last Post: May 19, 2015, 10:40 PM
  3. beforeload and load listeners are not firing
    By yash.kapoor in forum 2.x Help
    Replies: 0
    Last Post: Jan 11, 2013, 7:01 AM
  4. Replies: 1
    Last Post: Dec 12, 2012, 3:21 PM
  5. [CLOSED] Stop treepanel to load data on page load
    By inayath in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 11, 2011, 10:17 AM

Posting Permissions