This is a tricky/odd one. I am creating tabs and associated pageviews dynamically on the client-side. This works great. When the user closes the tab the tab and pageview are removed, again on the client-side. This also works great.
Here's the tricky part. I am creating an iframe inside the pageview. When the pageview is removed from the multipage, the iframe still exists on the page! This causes a problem because when you try to create another tab with the same ID I end up creating another iframe with the same ID and then FireFox gets confused and doesn't display the "correct" (newly created) iframe.
Here is a one page web site that demonstrates the problem. Run this page and click the "Check Tab" button first. You will see "123 not found" meaning that the iframe was not found. Click the "Add Tab" button then click "Check Tab" again. You will see "about:blank" which fine - the iframe exists and is displaying a blank page. Finally, click the "Close Tab" button then "Check Tab" again. You would expect to get "123 not found" but instead you get "null" - which indicates that the iframe still exists in the DOM.
Notice that it works as expected in IE and Chrome, but not in Fire Fox.
Any help and/or work-arounds are appreciated.
Here's the tricky part. I am creating an iframe inside the pageview. When the pageview is removed from the multipage, the iframe still exists on the page! This causes a problem because when you try to create another tab with the same ID I end up creating another iframe with the same ID and then FireFox gets confused and doesn't display the "correct" (newly created) iframe.
Here is a one page web site that demonstrates the problem. Run this page and click the "Check Tab" button first. You will see "123 not found" meaning that the iframe was not found. Click the "Add Tab" button then click "Check Tab" again. You will see "about:blank" which fine - the iframe exists and is displaying a blank page. Finally, click the "Close Tab" button then "Check Tab" again. You would expect to get "123 not found" but instead you get "null" - which indicates that the iframe still exists in the DOM.
Notice that it works as expected in IE and Chrome, but not in Fire Fox.
| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> |
| <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> |
| <!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> |
| <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> |
| <script type="text/javascript"> |
| function Main_GetTabStrip() { |
| return $find('<%= RadTabStrip1.ClientID %>'); |
| } |
| function Main_GetMainMultiPage() { |
| return $find('<%= RadMultiPage1.ClientID%>'); |
| } |
| function GetTab(tabId) { |
| var tabstrip = Main_GetTabStrip(); |
| return tabstrip.findTabByValue(tabId); |
| } |
| function GetPageView(tabId) { |
| var multipage = Main_GetMainMultiPage(); |
| return multipage.findPageViewByID(tabId); |
| } |
| function ShowTab(tabText, tabId, tabType) { |
| // See if the specified tab already exists. |
| var tab = GetTab(tabId); |
| if (!tab) { |
| // Tab doesn't exist, create a new one. |
| tab = new Telerik.Web.UI.RadTab(); |
| tab.set_value(tabId); |
| // Add the new tab to the tab strip. |
| var tabstrip = Main_GetTabStrip(); |
| tabstrip.get_tabs().add(tab); |
| } |
| // Set the tab text (title). |
| tab.set_text(tabText); |
| // "refresh" determines whether the tab contents must be refreshed. |
| // (e.g. new contents for an existing tab) |
| var refresh = false; |
| // See if the page view already exists. |
| var page = GetPageView(tabId); |
| if (!page) { |
| // Page view doesn't exist for this tab, create a new one. |
| page = new Telerik.Web.UI.RadPageView(); |
| page.set_id(tabId); |
| // Add the new page view to the multi-page. |
| var multipage = Main_GetMainMultiPage(); |
| multipage.get_pageViews().add(page); |
| // Create a hidden field inside the page view to hold the "TabType". |
| var dom = page.get_element(); |
| dom.style.width = "100%"; |
| dom.style.height = "100%"; |
| var s = '<input id="' + tabId + '_TabType" type="hidden" value="' + tabType + '" />'; |
| s += ' <iframe id="' + tabId + '_iframe" name="' + tabId + '_iframe" src="#" style="border: 0; width: 100%; height: 100%;" frameborder="0" height="100%" width="100%" scrolling="yes" />'; |
| dom.innerHTML = s; |
| // Since this is a new page view, the contents should be refreshed. |
| refresh = true; |
| } |
| else { |
| // Page already exists. See if we need to refresh the contents. |
| var x = document.getElementById(tabId + '_TabType'); |
| if (x.value != tabType) { |
| // The TabType of the existing tab doesn't match the tabType |
| // passed in to this function. That means that the same tab |
| // is being used for different content, so we need to "refresh" |
| // the tab contents. |
| refresh = true; |
| x.value = tabType; |
| } |
| } |
| // Make this tab the "selected" tab. Since the page view Id matches the |
| // tab Id, this also makes the associated page view visible. |
| tab.select(); |
| //if (refresh) { |
| //document.getElementById(tabId + '_FrameLoading').style.display = 'block'; |
| //document.getElementById(tabId + '_FrameContainer').style.display = 'none'; |
| //var ifrm = top.frames[tabId + '_iframe']; |
| //ifrm.src = '/Merchants/Members/TabLoader.aspx?TabType='+tabType+'&TabId='+tabId; |
| //ifrm.location = '/Merchants/Members/TabLoader.aspx?TabType=' + tabType + '&TabId=' + tabId; |
| //} |
| } |
| function CloseTab(tabId) { |
| var seltab = null; |
| var tab = GetTab(tabId); |
| if (tab) { |
| if (tab.get_nextSibling() != null) |
| seltab = tab.get_nextSibling(); |
| else if (tab.get_previousSibling() != null) |
| seltab = tab.get_previousSibling(); |
| var tabstrip = Main_GetTabStrip(); |
| tabstrip.get_tabs().remove(tab); |
| } |
| var page = GetPageView(tabId); |
| if (page) { |
| var multipage = Main_GetMainMultiPage(); |
| multipage.get_pageViews().remove(page); |
| } |
| if (seltab != null) |
| seltab.select(); |
| } |
| function CheckTab(tabId) { |
| var ifrm = top.frames[0]; |
| if (ifrm) { |
| alert(ifrm.location); |
| } |
| else { |
| alert(tabId + ' not found'); |
| } |
| } |
| </script> |
| </telerik:RadScriptBlock> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server"> |
| </asp:ScriptManager> |
| <div> |
| <asp:Button id="AddTabButton" runat="server" OnClientClick="ShowTab('New Tab', '123','Test'); return false;" Text="Add Tab" /> |
| <asp:Button id="CloseTabButton" runat="server" OnClientClick="CloseTab('123'); return false;" Text="Close Tab" /> |
| <asp:Button id="CheckTabButton" runat="server" OnClientClick="CheckTab('123'); return false;" Text="Check Tab" /> |
| </div> |
| <div style="padding-top: 25px;"> |
| <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"> |
| <Tabs> |
| <telerik:RadTab runat="server" Text="Default Tab"> |
| </telerik:RadTab> |
| </Tabs> |
| </telerik:RadTabStrip> |
| <telerik:RadMultiPage ID="RadMultiPage1" Runat="server"> |
| <telerik:RadPageView ID="RadPageView1" runat="server"> |
| Default Page View (static) |
| </telerik:RadPageView> |
| </telerik:RadMultiPage> |
| </div> |
| </form> |
| </body> |
| </html> |
Any help and/or work-arounds are appreciated.
2 Answers, 1 is accepted
0
Hi Scott,
Please modify your CloseTab() method in order to remove the iframe before removing pageview like this:
Regards,
Yana
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Please modify your CloseTab() method in order to remove the iframe before removing pageview like this:
| function CloseTab(tabId) { |
| var seltab = null; |
| var tab = GetTab(tabId); |
| if (tab) { |
| if (tab.get_nextSibling() != null) |
| seltab = tab.get_nextSibling(); |
| else if (tab.get_previousSibling() != null) |
| seltab = tab.get_previousSibling(); |
| var tabstrip = Main_GetTabStrip(); |
| tabstrip.get_tabs().remove(tab); |
| } |
| var page = GetPageView(tabId); |
| if (page) { |
| page.get_element().removeChild(page.get_element().children[1]); |
| var multipage = Main_GetMainMultiPage(); |
| multipage.get_pageViews().remove(page); |
| } |
| if (seltab != null) |
| seltab.select(); |
| } |
Regards,
Yana
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Scott R
Top achievements
Rank 1
Rank 1
answered on 10 Oct 2008, 04:15 PM
Hi Yana,
First, the code you posted gives a javascript error in FireFox 3. I think "page.get_element().children[1]" should be "page.get_element().childNodes[1]".
Second, that still doesn't solve the problem. The sample page above still gives the same results.
It appears that the problem ultimately stemmed from the use of the "frames" array. Evidently FireFox doesn't maintain the array in a timely manner when frames are added/removed dynamically. I abandoned use of the "frames" array and just use document.getElementById() and now everything seems to be working in all browsers.
For anyone who may be interested, here is the link that ended up leading me to a solution: http://www.quirksmode.org/js/iframe.html
Scott
First, the code you posted gives a javascript error in FireFox 3. I think "page.get_element().children[1]" should be "page.get_element().childNodes[1]".
Second, that still doesn't solve the problem. The sample page above still gives the same results.
It appears that the problem ultimately stemmed from the use of the "frames" array. Evidently FireFox doesn't maintain the array in a timely manner when frames are added/removed dynamically. I abandoned use of the "frames" array and just use document.getElementById() and now everything seems to be working in all browsers.
For anyone who may be interested, here is the link that ended up leading me to a solution: http://www.quirksmode.org/js/iframe.html
Scott