CODEWITHSUNDEEP
jqueryiframetabs
Silverburch
Silverburch

Reputation: 477

iframe in selected tab not displaying on page refresh

There are a few similar posts, but none seem to refer to the iframe issue. My jquery container has an iframe in each tab which loads on tab click. As default, the first tab's iframe displays when container refreshed. Using local storage I want to memorise the User's last selected tab. My code in the 'Memorise tab' section (see fiddle: https://jsfiddle.net/01jurvpw/ ) works well in remembering the tab, but I can't get the iframe of that tab to immediately display on page refresh. I probably need to .push the iframe somewhere, but I've really managed to confuse myself over how to adjust the code. Any help greatly appreciated.

https://code.jquery.com/jquery-1.12.4.js
https://code.jquery.com/ui/1.12.1/jquery-ui.js
https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css



$(function() {

var mytabs = $('#RH_TabsTableShell').tabs();

function getSelectedTabIndex() {
  return mytabs.tabs('option', 'active'); }

beginTab = $("#RH_TabsTableShell ul li:eq(" + getSelectedTabIndex() + ")").find("a");
loadTabFrame($(beginTab).attr("href"), $(beginTab).attr("rel"));

$("a.tabref").click(function() {
  loadTabFrame($(this).attr("href"), $(this).attr("rel")); });

//tab switching function.  This grabs the “rel” attributes content when we click an <a> tag
function loadTabFrame(tab, url) {

  if ($(tab).find("iframe").length == 0) {
    var html = [];
    html.push('<div class="tabIframeWrapper">');
    html.push('<iframe class="iframetab" width="2000" scrolling="yes" src="' + url + '">Sorry, but your browser does not support frames.</iframe>');
    html.push('</div>');
    $(tab).append(html.join(""));
    $(tab).find("iframe").height($(window).height() - 80);
  }
  return false;
}

// ---------

// Memorise tab
$("#RH_TabsTableShell").tabs({
    activate: function( event, ui ) {
        localStorage.selectedTab = ui.newTab.index() + 1;
    },
    active: localStorage.selectedTab ? localStorage.selectedTab - 1 : 0
});

})






<div id="RH_TabsTableShell">

    <ul id="RH_TabsTable" class="nav nav-tabs">
      <li><a class="tabref" href="#Table1" rel="https://bing.com">Table1</a></li>
      <li><a class="tabref" href="#Table2" rel="https://jsfiddle.net">Table2</a></li>
      <li><a class="tabref" href="#Table3" rel="https://jqueryui.com/demos/tabs">Table3</a></li>
    </ul>

    <div id="Table1"> </div>
    <div id="Table2"> </div>
    <div id="Table3"> </div>

</div>

Upvotes: 0

Views: 985

Answers (1)

Roamer-1888
Roamer-1888

Reputation: 19288

tabs natural behaviour will do much of what's necessary without needing to attach your own event handlers to the tabs.

However, it is convenient to attach custom event handlers to the panel elements, #Table1 etc. so that the panels can be commanded to load their own content.

Also,

  • window.localStorage can only be addressed via two methods .setItem() and .getItem().
  • the activate callback does not fire for the initial tab, and you need to have a create callback which loads the initial content.
$(function() {
    var preloadPanelContent = false; // set to true or false;

    var $panels = $("[id^='Table']").each(function(index) {
        $(this).on('loadContent', function(e) { // 'loadContent' is a custom event
            var src = $("#RH_TabsTable li a").get(index).rel;
            if (!$(this).find('iframe').length) {
                $(this).html('<div class="tabIframeWrapper"><iframe class="iframetab" width="2000" scrolling="yes" src="' + src + '">Sorry, but your browser does not support frames.</iframe></div>').find('iframe').height($(window).height() - 80);
            }
        });
    });

    $('#RH_TabsTableShell').tabs({
        'active': window.localStorage.getItem('selectedTab') || 0,
        'activate': function(event, ui) {
            ui.newPanel.trigger('loadContent'); // tell the panel to load its content (if not already loaded).
            window.localStorage.setItem('selectedTab', ui.newTab.index());
        },
        'create': function(event, ui) {
            ui.panel.trigger('loadContent'); // tell the initial panel to load its content (if not already loaded).
        }
    });

    if(preloadPanelContent) {
        $panels.trigger('loadContent');
    }
});

DEMO

Upvotes: 1

Related Questions