Question

I have the following html table

   <table id="{64ED3A94-5833-4CC7-869F-CCE583B498BE}" class="ms-listviewtable"
            width="100%" cellspacing="0" cellpadding="1" border="0" 
            xmlns:o="urn:schemas-microsoft-com:office:office" dir="none">
       <tbody id="tbod23-1__" isloaded="true" style="display: none;"></tbody>
       <tbody id="tbod23-2__" isloaded="true" style=""></tbody>
       <tbody id="tbod23-3__" isloaded="true" style="display: none;"></tbody>
       <tbody id="tbod23-4__" isloaded="true" style=""></tbody>
       <tbody id="tbod23-5__" isloaded="true" style="display: none;"></tbody>
       <tbody id="tbod23-6__" isloaded="true" style="display: none;"></tbody>
       <tbody id="tbod23-7__" isloaded="true" style="display: none;"></tbody>
    </table>

This table is autogenerated by a sharepoint xsltlistviewwebpart (didnt post in sharepoint as the question is more jquery+html related).

this is a treeview with nodes, when i expand a collapsed node it changes style from

style="display: none;" 

to

style=""

The problem: the webpart does not remember which nodes were collapsed, so on each postback it resets all to expanded. What I need to do, is to remember the node state (expanded or collapsed) in a jquery cookie, and to retrieve it on postbacks (so, to persist the node state).

So far I got:

<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("RememberClickedState");

function RememberClickedState()
{
var dv = $('.ms-listviewtable');
var items = [];
items = dv.find('tbody[id^="tbod"]');
$.cookie("itemListState", items);
    alert(items[0]);
    alert(items[1]);
 }

 </script>

Can anyone please provide some pointers on how to do this. Im a bit dazed and confused about the events themselves, on page_load I should save the cookie but also retrieve it somehow.

Also “items” array stored all 7 elements which is good, but when i try alert(items[0]); I get undefined.

Thank you

Answer 1

I suggest you to create string of this and then parse this string back… kind of like that:

var items = '';
function RememberClickedState() {
    $('.ms-listviewtable tbody').each(function(){
        tid = $(this).attr('id');
        tvisible = $(this).is(':visible');
        items += tid+':'+tvisible+','
    })
    //$.cookie("itemListState", items);
    $('body').append(items+'<br/>');
}
function RestoreClickedState() {
    //string = $.cookie("itemListState")
    var string = items; //temporary
    var cookies = string.split(',');
    $.each(cookies, function(i, val){
        val = val.split(':');
        show = (val[1] == 'true' ? true:false);
        item = $('.ms-listviewtable').find('#'+val[0]);
        show ? item.show() : item.hide();
        $('body').append('#'+val[0]+' is '+ 'display:'+show+'<br/>');
    })
}
$(document).ready(function(){
    RememberClickedState();
    RestoreClickedState();
})

Here is DEMO:
http://jsfiddle.net/MYexv/3/