AutoLoad Panel Populate Child Page Error

  1. #1

    AutoLoad Panel Populate Child Page Error

     Ok, here's what I'm trying to do:

    I have a borderlayout on a main page. The west panel contains links that, on click, should load the center panel with a new child page. I'm using the center panel's autoload feature to accomplish this.


    So far, so good. I have the center panel's autoload set to merge, the child page does not contain a "form" element, it does contain a scriptmanager and scriptcontainer (as recommended in these forums). The child page contains a panel element with text in its body.


    The links load the center panel's content in javascript by calling the "load" method, passing in the url.


    Now, the first time I click a link to load the center content, it works succesfully. However, if I click the same link again after the center content has been loaded, I get an error stating that "element is null". 




  2. #2

    RE: AutoLoad Panel Populate Child Page Error

    Hi camus92,

    Using the .AutoLoad property in Merge Mode can be tricky. The issues arise from loading the same base .js library files upon each request.

    If the Child Page contains Coolite controls, then setting RenderScripts="None" and RenderStyles="None" on the child ScriptManager should help get things working.

    I think the following code sample demonstrates what you described above.

    Example (Parent.aspx)

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        protected void Button1_Click(object sender, AjaxEventArgs e)
        {
            LoadConfig config = new LoadConfig();
            config.Url = "Child.aspx";
            config.Scripts = true;
            
            this.pnlCenter.Load(config);
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Coolite Toolkit Example</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        <ext:ViewPort ID="ViewPort1" runat="server">
            <Body>
                <ext:BorderLayout runat="server">
                    <West Collapsible="true" Split="true">
                        <ext:Panel runat="server" Title="West" Width="300">
                            <TopBar>
                                <ext:Toolbar runat="server">
                                    <Items>
                                        <ext:Button ID="Button1" runat="server" Text="Load (AjaxEvent)">
                                            <AjaxEvents>
                                                <Click OnEvent="Button1_Click" />
                                            </AjaxEvents>
                                        </ext:Button>
                                        <ext:Button ID="Button2" runat="server" Text="Load (Listener)">
                                            <Listeners>
                                                <Click Handler="pnlCenter.load({ scripts: true, url: 'Child.aspx' });" />
                                            </Listeners>
                                        </ext:Button>
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                        </ext:Panel>
                    </West>
                    <Center>
                        <ext:Panel ID="pnlCenter" runat="server" Title="Center" />
                    </Center>
                </ext:BorderLayout>
            </Body>
        </ext:ViewPort>
        </form>
    </body>
    </html>
    Example (Child.aspx)



    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <!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>Child Window</title>
    </head>
    <body>
        <ext:ScriptManager ID="ScriptManager1" runat="server" RenderScripts="None" RenderStyles="None" />
        
        <ext:Panel 
            ID="Panel1" 
            runat="server" 
            Title="Child Panel"
            Height="185"
            Width="300"
            BodyStyle="padding:5px;">
            <Body>
                <%= DateTime.Now.ToString() %>
            </Body>
        </ext:Panel>
    </body>
    </html>
    One gotcha of using the .load function is by default scripts on the Child are not executed upon the response of the url.

    Here's a couple related items from the extjs api docs:
    http://extjs.com/deploy/dev/docs/?cl...mp;member=load
    http://extjs.com/deploy/dev/docs/?cl...;member=update

    Hope this helps.

    Geoffrey McGill
    Founder & CEO
  3. #3

    RE: AutoLoad Panel Populate Child Page Error

     Thanks for your prompt reply, Geoffrey, that did the trick. 

    I had some concern on whether this would cripple any scripting functionality on the child page, but a quick test confirms that child scripts run and also communicate back to the parent page (calling a parent page function or element). 
  4. #4

    RE: AutoLoad Panel Populate Child Page Error

    I'm trying to use this example code with a child form which contains a data store. Using the example as shown works perfectly (of course), but as soon as I add the following I get the error "Microsoft JScript runtime error: Object expected";

    <ext:Store runat="server" ID="squadStore" AutoLoad="true">
        <Reader>
            <ext:JsonReader>
                <Fields>
                    <ext:RecordField Name="RecId" />
                    <ext:RecordField Name="Name" />     
                    <ext:RecordField Name="ManagerName" />     
                    <ext:RecordField Name="Email" />     
                    <ext:RecordField Name="Telephone" />     
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    The code highlighted by the debugger starts "this.squadStore=new Coolite.Ext.Store(....."

    To be clear - all I'm doing is adding the above code in between the script manager and panel tags of the example code exactly as shown above.

  5. #5

    RE: AutoLoad Panel Populate Child Page Error

    Hi chrisbranson,

    Please try adding the following empty Store tag to your Parent .aspx Page.


    Example


    <ext:Store runat="server" />

    As mentioned above, the AutoLoad property a tricky beast. At the moment, the required .js files for the Child must be handled manually. In your case, the "coolite-data.js" file is required by the child page, but is not being included by the Parent. If RenderScripts="None", then neither the Child nor Parent will automatically include the file. 


    Adding the empty <ext:Store> control to the Parent will automatically load the required coolite-data.js file upon initial Page_load. 


    Automatically managing the required child scripts during an AutoLoad is a feature we will be adding in the future.


    Hope this helps.




    Geoffrey McGill
    Founder & CEO
  6. #6

    RE: AutoLoad Panel Populate Child Page Error

    Perfect! Thank you very much for the ultra quick response - works perfectly :-)

Similar Threads

  1. Populate a TabPanel with AutoLoad and RenderTo
    By Tallmaris in forum 1.x Help
    Replies: 2
    Last Post: Jul 05, 2011, 10:30 AM
  2. Replies: 1
    Last Post: Jan 12, 2010, 9:30 PM
  3. Replies: 2
    Last Post: Jul 01, 2009, 1:06 PM
  4. [CLOSED] Error using AutoLoad in panel
    By Jurke in forum 1.x Help
    Replies: 4
    Last Post: Sep 11, 2008, 9:15 AM
  5. Replies: 3
    Last Post: Jul 11, 2008, 10:41 AM

Posting Permissions