Jquery treeview nodes will not toggle after an ajax call

Question

I have two dialog boxes within my view. Each of these dialog boxes have ajax commands within them for instance the first one does a POST and second one does a LOAD.

The issue is after I select from a checkbox list in dialog box 1 and hit UpdatePage button, my model gets updated just fine. However, The second dialog box containing the tree view with another checbobox list/nodes will not toggle at all. It does retain its previous state though: The checkboxes selected previosuly are checked but it will not toggle at all.

The following function creates the dialog box 1 and upon successful completion of the post command in this dialog box that the second dialog box and the treeview within, will not toggle.

function initDailog() {

        RunDialog = $("#runDatestreeview").dialog({ closeOnEscape: true, stack: false, autoOpen: true,
            modal: false, resizable: true, draggable: true, title: 'Select Run Dates to Auto-Populate Form Fields & Test Exceptions:',
            width: 600, height: 500, position: 'center',
            open: function (type, data) {
            },
            buttons: { UpdatePage: function () {
                //storing the value of treeview selections in dialog box 2
                var originalContent = $("#treeview").html();
                $.post(runDatesUrl,
              $("#form").serialize(),
               function (data) {
                   $("#runDatestreeview").remove();
                   //removing the div which contains the treeview
                   $("#treeview").remove();
                   $("#testExceptiontreeview").remove();
                   $("#main").html(data);
                  //setting back the value of the div which contains the treeview 
                   $("#treeview").html(originalContent);
               }, "html");
            },
                Cancel: function () {
                    $(this).dialog("close");
                                      }
            }
        });

        RunDialog.closest("div.ui-dialog").appendTo("#form");
    }

Treeview defined in dialog box 2, in its seperate JS file:

$("#errorCodes ul").treeview({
collapsed: true,
prerendered: false
});

The HTML for The div which contains the tree view:

<div id="treeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
    overflow: scroll; width: 800px; height: 450px; display: none;">
    <div id="errorCodes">
        @Html.RenderTree(CacheHelper.ErrorCodes(), ec => ec.Name, ec => ec.Children.ToList(), ec => (ec.ID).ToString(), null, "e")
    </div>
    <div id="inputReps" style="display: none;">
    </div>
</div

If I understand right it is the treeview $("#errorCodes ul") which stops working? If so, is $("#errorCodes ul") element part of the originalContent or within any of the HTML elements you remove with one of the .remove() calls? If that is the case you might need to re-bind the treeview again. When you remove an element from the DOM all it's events are removed too. Even if you re-add it it is not the same but now a new element, therefore you would have to re-bind the treeview. You might be able to solve this with .clone but that depends on what your response details. — Nope
– Nope, Commented Jan 16, 2013 at 22:57
In general it would help a lot if you would be able to post the rendered HTML which contains all the elements you are referencing in your script, such as #errorCodes ul, #treeview, etc. — Nope
– Nope, Commented Jan 16, 2013 at 22:59
My apologies for not posting the relevant HTML for the tree view. You are right errorCodes ul stops working which resides in the div tree view. So If I understand it correctly, If I re-bind the tree view again, how can I set the state to the previous state. With my current code, its previous state is there but like you said probably the events are not their any more. I am posting the DOM shortly — tam tam
– tam tam, Commented Jan 17, 2013 at 0:28
Should probably tag this ASP.NET MVC + Razor or something. Can't exactly run it in Firefox. Also please fix your line break at the end. — Big McLargeHuge
– Big McLargeHuge, Commented Jan 17, 2013 at 0:41

Community · Accepted Answer · 2020-06-20 09:12:55Z

I have had a play-around with this and if you store the .html() and then after adding it again, re-bind the plugin again, the state is kind-off remembered.

I used the code from the fiddle I created for your last question and slightly updated it.

DEMO - Store HTML, remove Tree, Add new Tree, set HTML and rebind treeView

In the above DEMO I'm binding the treeview on load, collapse/expand the tree view and then hit the store/remove/attach button. After that the tree looks as before and collapse/expand/toggle still work.

The store/remove/attach button will do the following when clicked:

store the HTML of the ul element which is the treeview
remove the ul element
re-add a new ul element
adds the original HTML to the new ul
re-bind the ul to the treeview plugin

It remembers the state, if the tree was collapsed, it renders collapsed and expanded it renders expanded.

Except for the default closed element (File 3) as the close class will be re-applied the first time it renders.

Other than that it looks OK.

Code from DEMO

HTML

<div id="treeviewcontrol"> <a href="#"> collapse </a><a href="#"> expand </a><a href="#"> toggle </a>

</div>
<ul id="tree" class="filetree">
  <li><span class="folder">Folder 1</span>

    <ul>
      <li><span class="file">Item 1.1</span>

      </li>
    </ul>
  </li>
  <li><span class="folder">Folder 2</span>

    <ul>
      <li><span class="folder">Subfolder 2.1</span>

        <ul id="folder21">
          <li><span class="file">File 2.1.1</span>

          </li>
          <li><span class="file">File 2.1.2</span>

          </li>
        </ul>
      </li>
      <li><span class="file">File 2.2</span>

      </li>
    </ul>
  </li>
  <li class="closed"><span class="folder">Folder 3 (closed at start)</span>

    <ul>
      <li><span class="file">File 3.1</span>

      </li>
    </ul>
  </li>
  <li><span class="file">File 4</span>

  </li>
</ul>
<button id="cloneTree" type="button">Store/Remove/Attach Tree</button>

Script

$("#tree").treeview({
  control: "#treeviewcontrol",
  prerendered: false
});

$("#cloneTree").click(function () {
  var $tree = $("#tree");
  var originalHtml = $tree.html();

  $tree.remove();

  var newBrowser = $('<ul id="tree" class="filetree"></ul>')

  newBrowser.html(originalHtml);
  $("body").append(newBrowser);

  $("#tree").treeview({
    control: "#treeviewcontrol",
    prerendered: false
  });
});

CSS

.treeview, .treeview ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.treeview ul {
  background-color: white;
  margin-top: 4px;
}
.treeview .hitarea {
  background: url(images/treeview-default.gif) -64px -25px no-repeat;
  height: 16px;
  width: 16px;
  margin-left: -16px;
  float: left;
  cursor: pointer;
}
/* fix for IE6 */
 * html .hitarea {
  display: inline;
  float:none;
}
.treeview li {
  margin: 0;
  padding: 3px 0pt 3px 16px;
}
.treeview a.selected {
  background-color: #eee;
}
#treecontrol {
  margin: 1em 0;
  display: none;
}
.treeview .hover {
  color: red;
  cursor: pointer;
}
.treeview li {
  background: url(images/treeview-default-line.gif) 0 0 no-repeat;
}
.treeview li.collapsable, .treeview li.expandable {
  background-position: 0 -176px;
}
.treeview .expandable-hitarea {
  background-position: -80px -3px;
}
.treeview li.last {
  background-position: 0 -1766px
}
.treeview li.lastCollapsable, .treeview li.lastExpandable {
  background-image: url(images/treeview-default.gif);
}
.treeview li.lastCollapsable {
  background-position: 0 -111px
}
.treeview li.lastExpandable {
  background-position: -32px -67px
}
.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea {
  background-position: 0;
}
.treeview-red li {
  background-image: url(images/treeview-red-line.gif);
}
.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable {
  background-image: url(images/treeview-red.gif);
}
.treeview-black li {
  background-image: url(images/treeview-black-line.gif);
}
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable {
  background-image: url(images/treeview-black.gif);
}
.treeview-gray li {
  background-image: url(images/treeview-gray-line.gif);
}
.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable {
  background-image: url(images/treeview-gray.gif);
}
.treeview-famfamfam li {
  background-image: url(images/treeview-famfamfam-line.gif);
}
.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable {
  background-image: url(images/treeview-famfamfam.gif);
}
.treeview .placeholder {
  background: url(images/ajax-loader.gif) 0 0 no-repeat;
  height: 16px;
  width: 16px;
  display: block;
}
.filetree li {
  padding: 3px 0 2px 16px;
}
.filetree span.folder, .filetree span.file {
  padding: 1px 0 1px 16px;
  display: block;
}
.filetree span.folder {
  background: url(images/folder.gif) 0 0 no-repeat;
}
.filetree li.expandable span.folder {
  background: url(images/folder-closed.gif) 0 0 no-repeat;
}
.filetree span.file {
  background: url(images/file.gif) 0 0 no-repeat;
}

Collectives™ on Stack Overflow

Jquery treeview nodes will not toggle after an ajax call

1 Answer 1

Code from DEMO

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Code from DEMO

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related