What's New?

[FIXED] [1.7] [2.2] Panel IFrame content load

  1. #1
    Dec 03, 2012, 2:12 PM

    [FIXED] [1.7] [2.2] Panel IFrame content load

    Hello,
    I have an update request. I use IFrame as a Ext.Net.Panel content, and I use Ext.Net.History object to handle hash change and reload the content of IFrame. I have a problem when user presses browser's back button. First press do not change url of main window, but reloads IFrame. Second press changes url and fires direct event. This is normal behavior of IFrame.
    This can be fixed by changing javascript function "loadIFrame" of Ext.Net.Panel (I just assume it belongs to this object).
    Current function (line 7):
    ...
      this.iframe.dom.src = String.format("java{0}", "script:false");
      this.fireEvent("beforeupdate", this, {
         url: this.iframe.dom.src,
         iframe: this.iframe
      });
      this.iframe.dom.src=url; // !!! this causes that browser adds iframe url change to browsing history !!!
      this.beforeIFrameLoad(config);
...
    Updated function (line 7):
    ...
      this.iframe.dom.src = String.format("java{0}", "script:false");
      this.fireEvent("beforeupdate", this, {
         url: this.iframe.dom.src,
         iframe: this.iframe
      });
      window.frames[this.iframe.id].location.replace(url); // Or something like that. Important is to use replace function of window.location object.
      this.beforeIFrameLoad(config);
...
    I think this option should be in config, that enters to function "loadIFrame", and of cource to function "load" which calls "loadIFrame". And in the end, option should be in C# object "Ext.Net.LoadConfig", for example as property "IFrameLoadMode".

    I dont know, if this is possible to do, or if you are willing to do it, but i would appreciate it.
    Or... can you please give me an advice how to solve my problem with navigation in browsers history?

    Thanks a lot!
    Last edited by Daniil; Dec 10, 2012 at 5:59 AM. Reason: [FIXED] [1.7] [2.2]
  2. #2
    Dec 03, 2012, 11:50 PM
    Thank you for your report!

    Can you provide an example to reproduce?
  3. #3
    Dec 04, 2012, 7:19 AM
    Hello,
    I reduced my original code and made this example. It should give you an image what is wrong.
    <%@ Page Language="C#" %> 
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
 
<script runat="server">

    protected void history_Change(object sender, DirectEventArgs e)
    {
        try
        {
            string url = e.ExtraParams["url"].ToString();
            LoadPage(this.GetUrl(url), false);
        }
        catch (Exception ex)
        {
            
        }
    }
    protected string GetUrl(string url)
    {
        string retVal = string.Empty;
        string[] urlPart = url.Split('#');
        if (urlPart != null && urlPart.Length > 1 && !string.IsNullOrEmpty(urlPart[1]))
        {
            retVal = urlPart[1];
        }
        return retVal;
    }
    protected void FirstLoadContent_Render(object sender, DirectEventArgs e)
    {
        try
        {
            string url = e.ExtraParams["url"].ToString();
            LoadPage(this.GetUrl(url), true);
        }
        catch (Exception ex)
        {
            
        }
    }
    protected void LoadPage(string url, bool firstLoadShell)
    {        
        LoadConfig loadConfig = new LoadConfig();
        loadConfig.Mode = LoadMode.IFrame;
        // loadConfig.IFrameLoadMode = IFrameLoadMode.NoHistory;
        // or 
        // loadConfig.IFrameLoadMode = IFrameLoadMode.ReplaceUrl;
        loadConfig.ShowMask = true;
        loadConfig.Url = url;
        this.pnlContent.LoadContent(loadConfig);
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">    
        <ext:ResourceManager ID="resourceManager" runat="server" DirectMethodNamespace="Shell" />       
        <ext:History ID="history" runat="server">
            <DirectEvents>                                
                <Change OnEvent="history_Change">
                    <EventMask ShowMask="true" />           
                    <ExtraParams>
                        <ext:Parameter Name="url" Value="window.location.hash" Mode="Raw" />
                    </ExtraParams>
                </Change>            
            </DirectEvents>                    
        </ext:History>          
        <ext:Viewport ID="viewPort" runat="server" Layout="border">
            <Items>            
                <ext:TreePanel 
                    ID="TreePanel1"
                    runat="server"  
                    EnableDD="false"         
                    RootVisible="false"                
                    Region="West"                       
                    Width="200"                                 
                    ContainerScroll="true">
                    <Listeners>                
                        <Click Handler="if (!Ext.isEmpty(node.attributes.href)) { e.stopEvent(); window.location.hash = node.attributes.href; }" />              
                    </Listeners>                      
                    <Root>
                        <ext:TreeNode Text="Pages" Expanded="true">
                            <Nodes>
                                <ext:TreeNode Text="Sfera" Href="http://www.sfera.sk/sk.aspx"  />
                                <ext:TreeNode Text="Seminare" Href="http://www.seminare.sfera.sk/sk.aspx"  />
                                <ext:TreeNode Text="Energoforum" Href="http://www.energoforum.sk/sk"  />
                                <ext:TreeNode Text="External Color Picker" Href="http://www.colorpicker.com/"  />
                            </Nodes>
                        </ext:TreeNode>
                    </Root>                                               
                </ext:TreePanel>
                <ext:Panel ID="pnlContent" runat="server" Region="Center">                                                        
                    <DirectEvents>                        
                        <Render OnEvent="FirstLoadContent_Render">
                            <EventMask ShowMask="true" />                                                                                                                       
                            <ExtraParams>
                                <ext:Parameter Name="url" Value="window.location.hash" Mode="Raw" />
                            </ExtraParams>
                        </Render>
                    </DirectEvents>                                                              
                </ext:Panel>    
            </Items>
        </ext:Viewport>    
    </form>
    <script type="text/javascript">
        // Uncomment to make it work as it should work. Change of original Ext.Net code is on line 132.
        /*
        Ext.onReady(function () {
            pnlContent.loadIFrame = function (config) {
                var url = config.url; if (config.nocache === true) { url = url + ((url.indexOf("?") > -1) ? "&" : "?") + new Date().getTime(); }
                if (config.params) {
                    var params = {}, key; for (key in config.params) { var ov = config.params[key]; if (typeof ov === "function") { params[key] = ov.call(this); } else { params[key] = ov; } }
                    params = Ext.urlEncode(params); url = url + ((url.indexOf("?") > -1) ? "&" : "?") + params;
                }
                if (Ext.isEmpty(this.iframe)) {
                    var iframeObj = { tag: "iframe", id: this.id + "_IFrame", name: this.id + "_IFrame", cls: config.cls || "", src: url, frameborder: 0 }, layout = this.getLayout(); if (layout && layout.resizeTask && layout.resizeTask.cancel) { layout.resizeTask.cancel(); }
                    if (!this.layout || this.layout.type !== "fit") { layout = new Ext.Container.LAYOUTS.fit({}); this.setLayout(layout); }
                    this.removeAll(true); var p = this, iframeCt = new Ext.Container({
                        autoEl: iframeObj, listeners: {
                            render: function () {
                                p.iframe = this.el; if (config.monitorComplete) { p.startIframeMonitoring(); } else { this.el.on("load", p.afterLoad, p); }
                                p.fireEvent("beforeupdate", p, { url: url, iframe: this.el }); p.beforeIFrameLoad(config);
                            }
                        }
                    }); this.add(iframeCt); this.doLayout();
                } else { 
                    this.iframe.dom.src = String.format("java{0}", "script:false"); 
                        this.fireEvent("beforeupdate", this, { url: this.iframe.dom.src, iframe: this.iframe }); 
                        window.frames[this.iframe.id].location.replace(url); // here for example: if (config.iFrameLoadMode && config.iFrameLoadMode === "noHistory") { window.frames[this.iframe.id].location.replace(url); } else { this.iframe.dom.src=url; }
                        this.beforeIFrameLoad(config); 
                }
                if (Ext.isIE6 && !this.destroyIframeOnUnload) { this.destroyIframeOnUnload = true; if (window.addEventListener) { window.addEventListener("unload", this.destroy.createDelegate(this), false); } else if (window.attachEvent) { window.attachEvent("onunload", this.destroy.createDelegate(this)); } }
                return this;
            }
        });        
    </script>
</body>
</html>
    Scenario:
    Click to tree nodes on left side one by one. Then navigate backwards using browser's back button. Take a look at the URL after # and content of IFrame. You will notice this:
    1. IFrame reloads to page C, URL does not change
    2. IFrame reloads to page C (bacause of history object direct event), URL changes to page C
    3. IFrame reloads to page B, URL does not change
    2. IFrame reloads to page B (bacause of history object direct event), URL changes to page C
    4. ...so on

    Then try to uncomment JavaScript on the bottom (line 110). Now it works fine - URL change and good page reload at the same time.

    I hope this will help you to improve your great framework.
  4. #4
    Dec 05, 2012, 12:26 PM
    Hi @ambruslaco,

    Thank you for the kind words, the excellent report and the possible solution.

    We consider it a bug and fixed (using your suggestion) in the both Ext.NET versions: v1 and v2.

Similar Threads

  1. [CLOSED] Panel Load Content is not working in "Chrome"
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 26, 2011, 2:49 PM
  2. [CLOSED] Callbacks not invoked when Panel iframe Autload page renders pdf content
    By r_honey in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 02, 2010, 11:06 AM
  3. [CLOSED] How to use an IFrame to load a page without a panel or window?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 02, 2010, 5:21 PM
  4. [CLOSED] How to load a page using an IFrame istead of a panel?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 24, 2010, 6:27 PM
  5. [CLOSED] How to load a page from a Content or Panel using relative path?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 02, 2010, 10:32 AM

Tags for this Thread

Posting Permissions