jquery tree view cache

How do I apply caching when using jquery treeview plugin. I need to show selected tree open when refreshed as well.

http://jquery.bassistance.de/treeview/demo/

Code

<div class="Content">
<%= javascript_include_tag "jquery.treeview" %>
<%= stylesheet_link_tag "jquery.treeview" %>

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("#page_tree").treeview({
         开发者_JAVA百科   persist: "location",
            collapsed: true
        });
    });
</script>

<ul id="page_tree">
<% @pages.each do |page| %>

  <li id ="title">
    <%= page.name %>
    <ul>
        <li><%= link_to "#{page.title}" %></li>
    </ul>
  </li>
<% end %>

I think you are looking for the persist option. You can view the documentation on what options are available here http://docs.jquery.com/Plugins/Treeview/treeview#options

Example

$(".selector").treeview({
    persist: "cookie",
   cookieId: "navigationtree"
})

Update

The example code that they use for cookie based persistence which works on the demo page - sample 3 (the location based is sample 2 and it doesn't seem to work) is as follows:

Javascript

<script type="text/javascript">
    jQuery(document).ready(function() {
        $('#page_tree').treeview({
            collapsed: true,
            persist: cookie
        })    
    })
</script>

HTML

<ul id="page_tree">
<% @pages.each do |page| %>
    <li id="title"><span> <%= page.name %> </span>
    <ul>
        <li> <%= link_to "#{page.title}" %> </li>
    </ul>    
    </li>
<% end %>
</ul>

My only other advice would be, if this does not work, try statically linking to the javascript/css files and see if that works, also you will want to use the cookie.js script.

<link rel="stylesheet" href="http://jquery.bassistance.de/treeview/jquery.treeview.css" />
<script type="text/javascript" src="http://jquery.bassistance.de/treeview/jquery.treeview.js" ></script>
<script type="text/javascript" src="http://jquery.bassistance.de/treeview/lib/jquery.cookie.js"></script>

<div class="Content">
  <%= javascript_include_tag "jquery.treeview" %>
  <%= stylesheet_link_tag "jquery.treeview" %>

  <script type="text/javascript">
    jQuery(document).ready(function(){
      jQuery("#page_tree").treeview({
        persist: "location",
        collapsed: true
      });
    });
  </script>

  <ul id="page_tree">
    <% @pages.each do |page| %>

      <li id ="title">
        <%= page.name %>
        <ul>
            <li><%= link_to "#{page.title}" %></li>
        </ul>
      </li>
    <% end %>
  </ul>

I know this is an old question about an outdated jQuery plugin, but I just encountered this problem today.

If you want to use persist: 'cookie' you NEED to include jquery.cookie.js. Otherwise the +/- icons will disappear and nothing will work.

This is old code, so I grabbed jquery.cookie.js from the treeview's git repo for compatibility: https://github.com/jzaefferer/jquery-treeview/tree/master/demo

Also, collapsed: true seems counter to the idea of persistence.

Include:

<link rel="stylesheet" href="/treeview/jquery.treeview.css" />
<script type="text/javascript" src="/treeview/jquery.treeview.js"></script>
<script type="text/javascript" src="/treeview/lib/jquery.cookie.js"></script>

JS:

jQuery(document).ready(function(){
    jQuery("#page_tree").treeview({
        persist: "cookie"
    });
});