Our developer ran into a problem when trying to set up a refresh button on
an async treeview implementation. Our tree contents will be changing all the
time. Basically, we need to know how to blow away the contents of the UL and
then re-insert them.
For the refresh button click, currently we're using $('#myTreeID').empty();
then to re-initialize:
$('#myTreeId').treeview({ url: "CalcBldrOpenExisting.ashx" }); ------
after the initial load, the markup looks something like this: <ul
class="treeList treeview" id="openExistingTree"> <li class="hasChildren
expandable" id="3"> <div class="hitarea hasChildren-hitarea
expandable-hitarea"></div> <span></span> <ul></ul> </li> <li
class="hasChildren expandable" id="4"> <div class="hitarea
hasChildren-hitarea expandable-hitarea"></div> <span></span> <ul></ul> </li>
<li class="hasChildren expandable lastExpandable" id="5"> <div
class="hitarea hasChildren-hitarea expandable-hitarea
lastExpandable-hitarea"></div> <span></span> <ul></ul> </li> </ul>
but after clearing and re-intializing, we get extra divs in the markup, like
so:
<ul class="treeList treeview" id="openExistingTree"> <li class="expandable"
id="3"> <div class="hitarea hasChildren-hitarea expandable-hitarea"></div>
<div class="hitarea hasChildren-hitarea expandable-hitarea"></div>
<span></span> <ul></ul> </li> <li class="expandable" id="4"> <div
class="hitarea hasChildren-hitarea expandable-hitarea"></div> <div
class="hitarea hasChildren-hitarea expandable-hitarea"></div> <span></span>
<ul></ul> </li> <li class="hasChildren expandable lastExpandable" id="5">
<div class="hitarea hasChildren-hitarea expandable-hitarea
lastExpandable-hitarea"></div> <div class="hitarea hasChildren-hitarea
expandable-hitarea"></div> <span></span> <ul></ul> </li> </ul>
Also, I notice that the LI's are not getting 'hasChildren' class
-------------
Notes from the developer:
The initial json returned is: "[{'text': 'Private Drafts','id': 3,
'hasChildren': true},{'text': 'Shared Drafts','id': 4, 'hasChildren':
true},{'text': 'Published Calculations','id': 5, 'hasChildren': true}]"
Then, when the user clicks on 'Private Drafts', I return the following: "[{
'text': '<a class=\"openExisting\" title=\"Matthews test calc\"
href=\"javascript:void(0);\" elemName=\"Matthews test calc\"
onclick=\"Apd.CalcBuilder.openCalc(this, 1);\">Matthews test calc</a>
<br/><span class=\"resolution\">Hour, Location, Participant</span>'}]" After
clearing the tree list, I reinitialize and the returned json is IDENTICAL to
that shown above, but the treeview jquery code does not interpret it the
same way.
------------
Any clues as to what's happening?
Thanks!
