jQuery UI Widgets Forums Navigation Tabs Saving Tabs in Cookies

This topic contains 5 replies, has 3 voices, and was last updated by  Dimitar 9 years, 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Saving Tabs in Cookies #13595

    shimmoril
    Participant

    I’m trying to implement the save/load tabs from cookies option, but when I add the code from the example, nothing is happening. Can someone help me w/ the code?

    <html>
    <head>
    <link rel="stylesheet" href="/javascript/jqwidgets/2.6.0/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="/user/includes/font-awesome/3.0.0/css/font-awesome.css">
    <script type="text/javascript" src="/Javascript/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxcore.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxdata.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxbuttons.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxpanel.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxtree.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxtabs.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxsplitter.js"></script>
    <script type="text/javascript">
    var current_tab = 0;
    $(document).ready(function () {
    var theme = '';
    var index = $.jqx.cookie.cookie("jqxTabs_jqxWidget");
    if (undefined == index) index = 0;
    $("#splitter").jqxSplitter({
    theme: theme,
    panels: [{min: 190, max: 290, size: '25%'}, {min: 570, max: 870, size: '75%'}],
    height: '100%'
    });
    $('#jqxTabs').jqxTabs({
    theme: theme,
    width: '100%',
    height: '100%',
    position: 'top',
    showCloseButtons: true,
    reorder: true,
    scrollPosition: 'both',
    selectionTracker: true
    });
    $('#jqxTabs').bind('selected', function(event){
    current_tab = event.args.item;
    // save the index in cookie.
    $.jqx.cookie.cookie("jqxTabs_jqxWidget", event.args.item);
    });
    $('#nav_tree').jqxTree({
    theme: theme,
    width: '100%',
    height: '500px'
    });
    $('#nav_tree').bind('select', function(event){
    var src = '';
    var args = event.args;
    //get the clicked tree item
    var item = $('#nav_tree').jqxTree('getItem', args.element);
    //get the clicked tree item's label (text) so the tab title can be set
    var treeLabel = item.label;
    var length = $('#jqxTabs').jqxTabs('length');
    //add the new tab to the end
    $('#jqxTabs').jqxTabs('addLast', '<i class="fa-icon-info-sign"></i>' + treeLabel, '<div style="height: 100%;"><iframe id="rcr-iframe" src="http://www.jqwidgets.com" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" /></div>');
    //make sure the newly added tab is visible in the tab bar
    $('#jqxTabs').jqxTabs('ensureVisible', length);
    })
    });
    function renameTab() {
    //this will be called from the iframes on a successful save; changes the name of the tab to match what was saved
    $('#jqxTabs').jqxTabs('setTitleAt', current_tab, '<i class="fa-icon-ok-sign"></i> New tab name ' + current_tab);
    //the close button disappears on rename; re-show it
    $('#jqxTabs').jqxTabs('showCloseButtonAt', current_tab);
    }
    </script>
    </head>
    <body>
    <div>
    <div id="splitter">
    <div class="tree-navigation">
    <div id="nav_tree">
    <ul>
    <li value="10">
    Item 1
    <ul>
    <li>Child 1</li>
    <li>Child 2</li>
    </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    </ul>
    </div>
    </div>
    <div id="ContentPanel">
    <div id='jqxTabs'>
    <ul id="unorderedList">
    <li>First Tab</li>
    </ul>
    <div style="height: 100%!important;">
    <iframe id="lm-iframe" src="http://www.jqwidgets.com" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" width="100%"></iframe>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    Saving Tabs in Cookies #13615

    Dimitar
    Participant

    Hello shimmoril,

    The thing you should do is set the selectedItem property at the initialization of the tab, i.e.:

                $('#jqxTabs').jqxTabs({
    selectedItem: index,
    theme: theme,
    width: '100%',
    height: '100%',
    position: 'top',
    showCloseButtons: true,
    reorder: true,
    scrollPosition: 'both',
    selectionTracker: true
    });

    Note that it will work only for the initial tabs and not for any tabs you add dynamically via the tree on the left.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Saving Tabs in Cookies #13643

    shimmoril
    Participant

    Thanks Dimitar. Is there a particular reason it won’t work for the dynamically-created tabs? Unless we can get that to work, this option is basically useless to us. The whole point is to maintain the user’s selections if the page refreshes.

    • This reply was modified 11 years, 5 months ago by  shimmoril.
    Saving Tabs in Cookies #13697

    Dimitar
    Participant

    Hi shimmoril,

    When you refresh the page, all the programmatically created tabs (created by a button or tree item click) are lost. Thus, while the cookies will have the information of the last selected tab, there might not be such an item any more.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Saving Tabs in Cookies #68917

    ggg
    Participant

    Is the new version handling this. I have to remember tabs loaded dynamically.

    Thank You.

    Saving Tabs in Cookies #68928

    Dimitar
    Participant

    Hello ggg,

    Unfortunately, this cannot be achieved. Cookies only store the index of the tab that was selected last, they do not recreate dynamically added tabs.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.