Using the Persist Argument in a TreeView jQuery Navigation System

Welcome to the fifth episode of a series covering how to build a hierarchical navigation system with the TreeView jQuery plug-in. Comprised of six parts, this series walks you through mastering the main features provided by this plug-in.

Among the huge variety of plug-ins that are currently available to use with the jQuery JavaScript library, there’s one that may be particularly appealing to many web designers wanting to include hierarchical menus into their web sites very quickly. Of course, in this case I’m talking about the “TreeView” package, a powerful jQuery add-on that allows you to create collapsible navigation systems by using only a few simple JavaScript methods along with some nested HTML lists.

Thus, if you feel curious and wish to learn how to put this library to work for you in a true effortless fashion, then don’t hesitate anymore and start reading this group of tutorials right now!

Now that you’re aware of the goal of this series, it’s time to review the concepts discussed in the previous tutorial. In that article, I explained how to utilize the “unique” option provided by the plug-in for restricting the behavior of a selected tree. When specified, the option permits only one of its branches to be opened at a time. 

I also discussed the use of the “toggle” argument for triggering a trivial JavaScript alert each time one branch of the targeted tree expanded and collapsed alternately. Naturally, the potential of the “toggle” option is remarkable; it can be utilized for invoking any type of callback function, including plain JavaScript code, jQuery statements and so forth. In this case, your imagination is the limit, believe me. 

However, it’s probable that at this moment you’re wondering if the “TreeView” library permits you to maintain the status of a given tree across several HTTP requests. Fortunately, the answer is a resounding yes! In reality, the plug-in offers another option called “persist” that “recalls” the settings of a tree, in this way implementing an effective persistent mechanism. 

Therefore, in this part of the series I’m going to show how to work with this option, by way of some illustrative code snippets. So, are you ready to continue exploring in detail this capability of the “TreeView” plug-in? Then let’s jump in right now! 

{mospagebreak title=Reviewing the unique and toggle options} 

In case you still haven’t had the opportunity to read the preceding part of this series, where I discussed how to use the “unique” and “toggle” arguments, in the next few lines I reintroduced the examples developed there, so you can see at a glance how to work with them. Here’s how those examples were created:

 

(example on using the ‘unique’ option)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on jQuery TreeView (using the unique option)</title>

<link rel="stylesheet" href="jquery.treeview.css" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.treeview.js"></script>

<script>

// build treeview after web page has been loaded

$(document).ready(function(){

$("#menu").treeview({

unique: true

});

});

</script>

</head>

<body>

<ul id="menu">

<li>Link 1

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 2

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 3

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 4

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 5

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

</ul>

</body>

</html>

 

 

(example on using the ‘toggle’ option)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on jQuery TreeView (using the toggle option)</title>

<link rel="stylesheet" href="jquery.treeview.css" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.treeview.js"></script>

<script>

// build treeview after web page has been loaded

$(document).ready(function(){

$("#menu").treeview({

toggle: function(){

alert(‘This list has been clicked on!’);

}

});

});

</script>

</head>

<body>

<ul id="menu">

<li>Link 1

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 2

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 3

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 4

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 5

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

</ul>

</body>

</html>

 

As depicted above, understanding how to use the “unique” and “toggle” arguments is a quite straightforward process. In this case, the first of the code samples shown before demonstrates how to utilize the “unique” option to limit the opening of a tree’s branches to only one at a time, while the second example shows how to display a basic JavaScript alert each time a branch is expanded and collapsed respectively. Simple to code and read, isn’t it? 

Well, now that you hopefully grasped the logic that drives the two previous examples, it’s the perfect moment to leap forward and continue exploring some other helpful features offered by the “TreeView” plug-in. As I expressed in the introduction, the plug-in comes bundled with another handy argument that allows you to recall the status of a targeted tree across different HTTP requests, which can be really useful for creating persistent hierarchical navigational menus. 

Therefore, in the following segment I’m going to explain in more detail how to take advantage of this feature. Please click on the link shown below and read the section to come. 

{mospagebreak title=Creating persistent hierarchical menus with the persist parameter} 

Fortunately, the “ViewTree” plug-in provides a handy option that allows us to recall the settings of a targeted tree across several HTTP requests. What this means, basically, is that if the branches of the tree have been expanded and collapsed on one particular web page, this configuration will be maintained when visiting another one. 

Also, it’s valid to mention that this persistent mechanism can be implemented via another argument called “persist,” which comes in two different flavors: “location” and “cookie.” When the first argument is used, the state of the tree will be maintained in accordance with the web page location, while the second option simply will save the settings of the tree on a cookie. 

That being said, let me show you an example that demonstrates the use of the “persists” option when invoked with the “location” value. Here it is:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on jQuery TreeView (using the persist: location option)</title>

<link rel="stylesheet" href="jquery.treeview.css" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.treeview.js"></script>

<script>

// build treeview after web page has been loaded

$(document).ready(function(){

$("#menu").treeview({

persist: "location"

});

});

</script>

</head>

<body>

<ul id="menu">

<li>Link 1

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 2

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 3

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 4

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 5

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

</ul>

</body>

</html>

 

As illustrated above, the previous code sample shows how to save the status of a tree across a number of HTTP requests via the “persist: location” option. In this particular case, if a few hyperlinks were included into some of the nested HTML lists that compose the tree, then their “href” attribute would be used to maintain the tree’s configuration. 

Of course, a better way to understand how the “persist” option works is by trying out the prior example on your own browser, and adding to the HTML lists some links that point to real files. You’ll be surprised at how sweetly this persistent mechanism functions, believe me. 

Now that you’ve grasped how to save the state of a hierarchical tree by using the “persist” argument with the “location” value, the last thing that I’m going to show you in this tutorial will consist of utilizing the same option, but this time with the “cookie” value assigned to it. 

Want to learn how this will be accomplished in a few simple steps? Then click on the link below and read the last section. We’re almost finished!

 

{mospagebreak title=Saving the status of a tree with cookies with the persist: cookie argument} 

In the previous segment, you learned how to save the state of a tree via the “persist: location” option, something that should be quite easy to grasp. However, as I explained earlier, the “TreeView” plug-in allows us to perform a similar task by assigning a “cookie” value to this option, meaning that the status of the tree will be maintained simply by setting some cookies. 

The following example shows how to use this argument in a concrete case. Check it out, please:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on jQuery TreeView (using the persist: cookie option)</title>

<link rel="stylesheet" href="jquery.treeview.css" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.treeview.js"></script>

<script>

// build treeview after web page has been loaded

$(document).ready(function(){

$("#menu").treeview({

persist: "cookie"

});

});

</script>

</head>

<body>

<ul id="menu">

<li>Link 1

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 2

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 3

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 4

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 5

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

</ul>

</body>

</html>

 

See how simple it is to save the settings of a targeted tree via the “persist: cookie” option? I bet you do. As I explained before, when this option is specified, both the opened and collapsed branches of the tree will maintain their state directly with cookies, so if you’re planning to use this argument when building your own hierarchical menus for your web site, be aware that the browsers of your visitors should be set to accept cookies. 

And with this last hands-on example, I’m finishing this fifth tutorial of the series. As with all of the preceding articles, feel free to edit all of the code samples that you learned before, so you can sharpen your skills when working with the “TreeView” jQuery plug-in.

Final thoughts 

In this fifth installment of the series, I provided you with a quick overview on using the “persist” option included with the “TreeView” jQuery plug-in for saving the state of a targeted tree across different HTTP requests. 

However, we’re not done yet with this series of articles. In the final part I’m going to explain how to  dynamically add elements to the branches of a tree with JavaScript. Thus, now that you know what to expect from the last tutorial, I hope you don’t miss it!

[gp-comments width="770" linklove="off" ]

chat