[CLOSED] Reload a tab content in a center region IFrame

  1. #1

    [CLOSED] Reload a tab content in a center region IFrame

    Hi

    A problem that has troubled me for a while is with ability to reload tabs content.

    For instance, please look the below sample extracted from Coolite samples and this thread.

    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ 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 id="Head1" runat="server">
        <title>SiteMap - Coolite Toolkit Examples</title>
        
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                SiteMapNode siteNode = SiteMap.RootNode;
                Coolite.Ext.Web.TreeNode root = this.CreateNode(siteNode);
                TreePanel1.Root.Add(root);
            }
            
            //page tree node loader handler
            protected void LoadPages(object sender, NodeLoadEventArgs e)
            {
                if (!string.IsNullOrEmpty(e.NodeID))
                {
                    SiteMapNode siteMapNode = SiteMap.Provider.FindSiteMapNodeFromKey(e.NodeID);
    
                    SiteMapNodeCollection children = siteMapNode.ChildNodes;
                    if (children != null &amp;&amp; children.Count > 0)
                    {
                        foreach (SiteMapNode mapNode in siteMapNode.ChildNodes)
                        {
                            e.Nodes.Add(this.CreateNodeWithOutChildren(mapNode));
                        }
                    }
                }
            }
            
            //dynamic node creation
            private Coolite.Ext.Web.TreeNodeBase CreateNodeWithOutChildren(SiteMapNode siteMapNode)
            {
                Coolite.Ext.Web.TreeNodeBase treeNode;
    
                if (siteMapNode.ChildNodes != null &amp;&amp; siteMapNode.ChildNodes.Count>0)
                {
                    treeNode = new Coolite.Ext.Web.AsyncTreeNode();
                }
                else
                {
                    treeNode = new Coolite.Ext.Web.TreeNode();
                    treeNode.Leaf = true;
                }
                
                if (!string.IsNullOrEmpty(siteMapNode.Url))
                {
                    treeNode.Href = this.Page.ResolveUrl(siteMapNode.Url);
                }
    
                treeNode.NodeID = siteMapNode.Key;
                treeNode.Text = siteMapNode.Title;
                treeNode.Qtip = siteMapNode.Description;
    
                return treeNode;
            }
    
            //static node creation with children
            private Coolite.Ext.Web.TreeNode CreateNode(SiteMapNode siteMapNode)
            {
                Coolite.Ext.Web.TreeNode treeNode = new Coolite.Ext.Web.TreeNode();
                if (!string.IsNullOrEmpty(siteMapNode.Url))
                {
                    treeNode.Href = this.Page.ResolveUrl(siteMapNode.Url);    
                }
                treeNode.NodeID = siteMapNode.Key;
                treeNode.Text = siteMapNode.Title;
                treeNode.Qtip = siteMapNode.Description;
    
                SiteMapNodeCollection children = siteMapNode.ChildNodes;
                if (children != null &amp;&amp; children.Count > 0)
                {
                    foreach (SiteMapNode mapNode in siteMapNode.ChildNodes)
                    {
                        treeNode.Nodes.Add(this.CreateNode(mapNode));
                    }
                }
                
                return treeNode;
            }
        </script>
        
        <script type="text/javascript">
            var addTab = function (tbPanelName, tabName, id, url) {
                var tabPanel = null;
                if (window.parent.Ext != null) {
                    tabPanel = window.parent.Ext.getCmp(tbPanelName);
                } else {
                    tabPanel = Ext.getCmp(tbPanelName);
                }
                var tab = tabPanel.getItem(id);
                if (!tab) {
                    tab = tabPanel.add({
                        id: id,
                        title: tabName,
                        closable: true,
                        autoLoad: {
                            showMask: true,
                            url: url,
                            mode: 'iframe',
                            maskMsg: 'Loading ' + tabName + '...'
                        },
                        listeners: {
                            update: {
                                fn: function(tab, cfg) {
                                    cfg.iframe.setHeight(cfg.iframe.getSize().height - 20);
                                },
                                scope: this,
                                single: true
                            }
                        }
                    });
                }
                else {
                    tab.loadIFrame(url);
                }
                tabPanel.setActiveTab(tab);
                //tab.loadIFrame(url);
            }    
        
            var loadPage = function(tabPanel, node) {
                var tab = tabPanel.getItem(node.id);
                if (!tab) {
                    tab = tabPanel.add({
                        id: node.id,
                        title: node.text,
                        closable: true,
                        autoLoad: {
                            showMask: true,
                            url: node.attributes.href,
                            mode: 'iframe',
                            maskMsg: 'Loading ' + node.attributes.href + '...'
                        },
                        listeners: {
                            update: {
                                fn: function(tab, cfg) {
                                    cfg.iframe.setHeight(cfg.iframe.getSize().height - 20);
                                },
                                scope: this,
                                single: true
                            }
                        }
                    });
                }
                else {
                    tab.loadIFrame(node.attributes.href);
                }
                tabPanel.setActiveTab(tab);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
            
            <ext:ViewPort ID="ViewPort1" runat="server">
                <Body>
                    <ext:BorderLayout ID="BorderLayout1" runat="server">
                        <West>
                            <ext:TreePanel ID="TreePanel1" runat="server" Width="300" Title="Site Map - preloaded tree" Icon="ChartOrganisation">            
                                <Listeners>
                                    <%--<Click Handler="if(node.attributes.href){e.stopEvent();loadPage(#{Pages}, node);}" />--%>
                                    <Click Handler="if(node.attributes.href){e.stopEvent();addTab(#{Pages}.id, node.text, node.text, node.attributes.href);}" />
                                </Listeners>
                            </ext:TreePanel>
                        </West>
                        
                        <Center>
                           <ext:TabPanel ID="Pages" runat="server" EnableTabScroll="true">
                           </ext:TabPanel>
                        </Center>
                        
                        <East Collapsible="true">
    
                        </East>
                    </ext:BorderLayout>
                </Body>
            </ext:ViewPort>
        </form>
    </body>
    </html>
    I am putting also a addTab function that is different from yours loadPage, but ignore if you want.

    All my problem lies in this bit here:


                if (!tab)
                {
                    ...
                }
                else
                {
                    tab.loadIFrame(url);
                    //tab.reload();
                }
    I can't really reproduce the exact same problem here, but I will give as much information as I can hoping you can help me.
    In my application, when I click on a Node for a TabPanel that has been loaded previously, it clears completly my iframe and just write "false" with no Firebug error, anything, any clue. Again, it is not what happens on this example here, but I am really struggling to reproduce here in this example.

    A thing I noticed is in my "real world" scenario where the error happens is that I can prevent this problem happen if I use the URL as a ID for the Tab created. But that does not help me because I have different querystring which would open different tabs for the same page.

    I suspect it is some issues with this bit:

     tab = tabPanel.add({
    
                        id: node.id,
    And I am just saying this because I noticed if I use the page url as id the problem does not happen.

    I tested with loadIFrame &amp; reload(), with same results.

    Your help is much much appreciated.

    Thanks
    Leo


  2. #2

    RE: [CLOSED] Reload a tab content in a center region IFrame

    Hi,

    If use the following function (search tab by url) instead 'getItem' then does it fix your issue?
    var excludeQuery = function(url){
                return url.replace(/\?.*$/, "");
            };
            
            var findTab = function(tabPanel, url){
                var foundTab = null;
                url = excludeQuery(url);
                tabPanel.items.each(function(tab){
                    if(tab.autoLoad &amp;&amp; excludeQuery(tab.autoLoad.url) == url){
                        foundTab = tab;
                        return false;
                    }
                });
                
                return foundTab != null ? foundTab : undefined;
            };
     var tab = findTab(tabPanel, url);
  3. #3

    RE: [CLOSED] Reload a tab content in a center region IFrame

    Hi Vlad,

    Thank you very much for your quick reply.
    No unfortunately it does not solve my problem. The same happens.

    But the good news is that I found a workaround.
    This peace of code works:

       
        if (!tab) {
          ...
        }
        else {
            url2 = url.replace('#', '&amp;_dc=' + new Date().getTime() + '#');
            tab.loadIFrame(url2);
        }
    So that makes me think it somehow is related with browser cache or something.
    I used a similar solution to refresh a <img tag by replacing scr and force the browser to update it.

    While debugging I noticed that within the reload function it expects nocache which is always undefined in my case.

        reload : function (nocache) {
    
            this.getAutoLoad().nocache = nocache || this.autoLoad.nocache;
    
            this.load(this.getAutoLoad());
    
        }
    I was just wondering if you know how to set to no cache and pehaps (not sure though) it would also solve my problem without using any timestamp?

    Does it makes sense to you?

    This thread can now be marked as solved.
    Hope it helps other people passing throw the same problem.

    Thanks a lot.
    Leo
  4. #4

    RE: [CLOSED] Reload a tab content in a center region IFrame

    Hi Vlad,

    Just found out that the following like would solve my problem (NoCache="true" DiscardUrl="true"):

    <ext:Tab runat="server" ID="CenterFrame" name="CenterFrame" Title="Home" Border="false"
                                                Closable="false" Frame="false">
                                                <AutoLoad Url="Index.aspx" Mode="IFrame" NoCache="true" DiscardUrl="true" />
                                            </ext:Tab>

    Please, let me ask you something else in this scenario:

    Is it possible to know if the key (Keymap Ctrl or shift or something) is pressed within that loadPages or addTab?
    I've got a KeyMap outside of my main viewport, but how would I handle something like: Shilft Key pressed + click open a new tab?

    Thanks
    Leo.
  5. #5

    RE: [CLOSED] Reload a tab content in a center region IFrame

    Hi,

    If you want to intercept mouse click which was inside iframe then please see the following sample
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" 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></title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        
         <ext:ResourcePlaceHolder runat="server" />
         
         <script type="text/javascript">
            var addTab = function (tabPanel, id, url) {
                var tab = tabPanel.getComponent(id);
    
                if (!tab) {
                    tab = tabPanel.add({ 
                        id       : id, 
                        title    : url, 
                        closable : true,                    
                        autoLoad : {
                            showMask : true,
                            url      : url,
                            mode     : "iframe",
                            maskMsg  : "Loading " + url + "..."
                        },
                        listeners:{
                            update: function(){
                                var doc = Ext.isIE ? this.iframe.dom.contentwindow.document : (this.iframe.dom.contentDocument || this.iframe.dom.contentwindow.document);
                                Ext.EventManager.removeAll(doc);
                                Ext.EventManager.on(doc, {
                                    click: function(e){
                                        var withShift = !!e.shiftKey;
                                        alert('click = '+url+(withShift ? "\nShift is pressed":""));
                                    }
                                });
                            }
                        }
                    });
    
                    tab.on("activate", function () {
                        var item = MenuPanel1.menu.items.get(id + "_item");
                        
                        if (item) {
                            MenuPanel1.setSelection(item);
                        }
                    }, this);
                }
                
                tabPanel.setActiveTab(tab);
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:Window runat="server" Width="700" Height="500" Icon="Link" Title="Adding tab">
                <Items>
                    <ext:BorderLayout runat="server">
                        <West>
                            <ext:MenuPanel ID="MenuPanel1" runat="server" Width="200">
                                <Menu runat="server">
                                    <Items>
                                        <ext:MenuItem runat="server" Text="Page1">
                                            <Listeners>
                                                <Click Handler="addTab(#{TabPanel1}, 'page1', 'Pag1.aspx');" />
                                            </Listeners>
                                        </ext:MenuItem>
                                        
                                        <ext:MenuSeparator />
                                        
                                        <ext:MenuItem runat="server" Text="Page2">
                                            <Listeners>
                                                <Click Handler="addTab(#{TabPanel1}, 'page2', 'Page2.aspx');" />
                                            </Listeners>
                                        </ext:MenuItem>
                                        
                                        <ext:MenuSeparator />
                                        
                                        <ext:MenuItem runat="server" Text="Page3">
                                            <Listeners>
                                                <Click Handler="addTab(#{TabPanel1}, 'page3', 'page3.aspx');" />
                                            </Listeners>
                                        </ext:MenuItem>
                                    </Items>
                                </Menu>
                            </ext:MenuPanel>
                        </West>
                        <Center>
                            <ext:TabPanel ID="TabPanel1" runat="server" />                               
                        </Center>
                    </ext:BorderLayout>
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    Please note that iframe pages must be located in the same domain
  6. #6

    RE: [CLOSED] Reload a tab content in a center region IFrame

    Hi,

    Thanks for this Vlad, but it is not quite what I meant.
    Taking the same example I sent you previously on this thread using TreePanel.
    I would like to intercept the shift + click on the Tree Node.

    I think it would be something very close of what you sent me, but I could not figure out.
    The only difference in my "real" scenario is that I don't have the TreePanel on markup. My TreePanel is within the West region and within an accordion.
    My nodes are included on code-behind and I don't have listeners click defined.
    The url of the nodes already point to: addTab(...);

    <ext:TreePanel ID="TreePanel1" runat="server" Width="300" Title="Site Map - preloaded tree" Icon="ChartOrganisation">            
        <Listeners>
             <Click Handler="if(node.attributes.href){e.stopEvent();addTab(#{Pages}.id, node.text, node.text, node.attributes.href);}" />
        </Listeners>
    </ext:TreePanel>
    So I change your code for something like (just to test):

    , listeners: {
        update: function() {
            //var doc = Ext.isIE ? tab.iframe.dom.contentwindow.document : (tab.iframe.dom.contentDocument || tab.iframe.dom.contentwindow.document);
            var doc = Ext.isIE ? this.getBody() : this.getDoc();
            Ext.EventManager.removeAll(doc);
            Ext.EventManager.on(doc, {
                click: function(e) {
                    var withShift = !!e.shiftKey;
                    alert('click = ' + url + (withShift ? "Shift is pressed" : ""));
                }
            });
        }
    }
    this is very, very close of what I am trying to accomplish.
    I placed a breakpoint where "var doc" is created and it hits the breakpoint correcly.
    Var doc get set accordingly, but it never enters on EventManager.on(...).
    How can I intercept the node that has been clicked?

    If the shift click is clicked on the node, I will open a new tab on my tabpanel (iframe - center).

    Did you follow me?

    Thanks
    Leo.
  7. #7

    RE: [CLOSED] Reload a tab content in a center region IFrame

    Hi,

    That TreePanel inside main page west region?
    If yes then you have to add click listener to the TreePanel and call addTab from that handler. To determine shift key in the click listener use
    e.shiftKey
  8. #8

    RE: [CLOSED] Reload a tab content in a center region IFrame

    Hi Vlad,

    Yes, it is TreePanel inside main page west region.

    My problem is really that it is problem for me to add click listener to the TreePanel and call addTab from that handler.

    The reason it is a problem is because when I am creating the nodes using TreeNode loader handler I have all information I need to create a tab on the center area. Most of this information I don't have on the node when it is clicked. For instance, imagine the Node 1 when clicked sometimes will open a tab with parent node name, and sometimes with grand-parent name. Few other logic that it is already set on url when I click on the node.

    I do believe it is possible to keep most of this information to some sort of attributes collection for each node.
    I will try do do this, because I totally agree with you that the correct moment of handling click is on TreePanel Click handler.

    Let me think about it and I will get back to you on this one.

    Thanks a lot

    Leo

Similar Threads

  1. Replies: 2
    Last Post: Jun 18, 2012, 6:43 PM
  2. [CLOSED] Center GridPanel cell column content
    By deejayns in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 04, 2012, 10:24 AM
  3. Replies: 5
    Last Post: Mar 22, 2012, 2:12 PM
  4. [CLOSED] Reload an iframe within a panel
    By jeremyl in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 05, 2009, 12:55 PM
  5. [CLOSED] Dinamically add Tab from the IFrame Center region
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Feb 23, 2009, 12:37 PM

Posting Permissions