Saving Tabs in Cookies - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: add, cookies, dynamically, jqxTabs, remembering tags, restore, selection, store, tab, Tabs

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

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

Author

Saving Tabs in Cookies Posts

January 14, 2013 at 6:10 pm Saving Tabs in Cookies #13595

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>

January 15, 2013 at 7:05 am 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/

January 15, 2013 at 2:53 pm 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.

January 16, 2013 at 1:04 pm 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/

March 20, 2015 at 6:05 pm Saving Tabs in Cookies #68917

ggg

Participant

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

Thank You.

March 21, 2015 at 6:32 am 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/

Author

Posts

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

You must be logged in to reply to this topic.