Michelle A. Mestrovich

Navigation

Skip navigation.

Search

Site navigation

Email conversation

FromMichelle A. Mestrovich
ToMe
SubjectCollapsible list & nested list
Date30 April 2009 19:20
Mark,

I can get your script to work fine for me.  The problem I running into, and
I have run into this while using similar code, is that I'm updating the HTML
portion of the list via the server.  When I do that my list no longer
functions the way  it would if I just had the html on the initial page.  I'm
hoping you might have a suggestion or solution to my issue.

Basically, what I want to do is use the collapsible list to list out records
I have retrieved from the server.  The first header will just be something
like a permit #, etc.  Once someone sees the permit they want, they click on
it and it expands to show all the values for that record.

Thanks

Michelle
FromMe
ToMichelle A. Mestrovich
SubjectRe: Collapsible list & nested list
Date3 May 2009 08:44
Michelle,

> updating the HTML portion of the list via the server.  When I do that
> my list no longer functions the way  it would if I just had the html
> on the initial page.

Well, this is not something the script is really designed for. It is
possible to get it to work reliably with a list that is created at some
point after the page has loaded, simply by calling compactMenu after
your scripts have created the list.

However, a list whose contents can change at any point after the page
has loaded - that becomes a problem. The compactMenu function cannot
work with a list when part of the list is new, and the other part has
already been set up - it will not know that it has already set it up,
and will break the parts that already existed.

So if you need to replace parts of the list, you must instead replace
the whole list. Completely recreate the nested list, with its new
contents, and then call compactMenu to collapse it.

Of course, if the user has already expanded various branches, this will
then collapse them, and that would get very ugly. It would be possible
to use stateToFromStr to store the state, then replace the list with a
freshly updated copy, collapse it, then recover the state:

var storedstate = stateToFromStr('ID_OF_YOUR_LIST');
...code here that removes the existing list from the DOM, and replaces
it with an updated list...
compactMenu('ID_OF_YOUR_LIST',false,'± ');
stateToFromStr('ID_OF_YOUR_LIST',storedstate);

Unfortunately, changes to the list contents will almost certainly
confuse the recovery function, and cause it to expand the wrong
branches. There is no obvious way around that limitation. In any case,
it's generally not a good idea to modify something that the user is
interacting with, as there is always the risk that the item they are
about to click will suddenly disappear, or be moved by the appearance of
a new item, causing them to click the wrong thing.

Hope you can get something useful from that.


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.