Updating / Refreshing a UL tree

[meezaanParticipant]

Hi Folks,

For various reasons, I have content, for the time being, with using a tree where the server-side ajax call returns

level HTML for me. I cannot use JSON to render the tree as the app currently works.

Basically, what I am trying to do is lazy load as we expand nodes on the tree, and having looked at the code on http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/#demos/jqxtree/ajaxloading.htm I’ve got something working, but my tree does not update itself.

Initially, I have an HTML element inside which I have my entire

• structure. I called jqxTree({options…}) on it and all works like a charm. Then, I hook into the expand event with the below:

  
              $tree.on('expand', function(event) {
                  var args = event.args;
                  var item = $tree.jqxTree('getItem', args.element);
                  var $element = $(item.element);
                  var $id = $element.data("id");
                  var url = '/url/for/ajax/call/returning/html';
  
                  var $element = $(event.args.element);
                  $.ajax({
                      url: url,
                      success: function (data, status, xhr) {
                          var items = $(data);
                          var html = items.find("[data-id='" + $id + "']").parent().html();
                          $element.parent().append(html);
                          $tree.jqxTree('removeItem', $element[0]);
                      },
                      complete: function(xhr, status) {
                          setTimeout(function() {
                              $tree.jqxTree('refresh');
                              console.log('This does display');
                          }, 3000);
                      }
                  });
              });
  

  So, this code successfully injects the correct HTML list into the code in the right place and removes the node too. However, it simply fails to refresh the tree. I have even tried the render method, but to no avail.

  May I please ask for your assistance? What am I doing wrong?

  Thank you and best wishes,

  Meezaan

[meezaanParticipant]

I’ve setup a very simple JS Fiddle of what I’m trying to do using one of he examples posted on this website.

http://jsfiddle.net/qa6t3wgL/2/

Looking forward to answer from someone who understands this better than me!

Thank you very much!

[HristoParticipant]

Hello Meezaan,

We recommend to use options from our API Documentation.
I would like to suggest you to look addTo, addBefore and addAfter.
Please, take a look this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/settings.htm?light

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[meezaanParticipant]

Hi Hristo,

Thank you for responding but I think you may have misunderstood the problem.

addTo, addBefore and addAfter work as long as I adhere to a specific data format, like:

 [{
"label": "Root", "expanded": "true",
"items": [
    { "label": "Root Folder 1", "items": [{ "value": "ajax1.htm", "label": "Loading..." }] },
    { "label": "Root Folder 2", "items": [{ "value": "ajax2.htm", "label": "Loading..." }] }]
}]

However, when my data comes back as HTML, like:

"<li>Meezaan Node</li><li>Another Node</li>"

it does not work.

So, in a nutshell, when the following code is triggered:

$('#jqxTree').on('expand', function(event) {
  	var node = '<li>Meezaan Node</li><li>Another Node</li>';

  	var element = event.args.element;
    $('#jqxTree').jqxTree('addTo', node, element[0]);
    $('#jqxTree').jqxTree('refresh');
  });

I get an ‘Item’ on my tree, where as I would like to get Meezaan Node and Another Node.

Is there any way to add nodes via an HTML UL / LI to an already existing tree?

Many thanks.

[HristoParticipant]

Hello Meezaan,

Unfortunately, no such option.
You could try to create workaround. (with some custom function to extract labels from <li/> tags)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[meezaanParticipant]

Thanks Hristo, yes I will have to do something of the sort, except the tree I am working with is designed based on css that comes with the li.

I will figure something out.

[meezaanParticipant]

OK, as we cannot to this, let’s say that I decide to use the default method, where I pass a source when initializing jqxTree.

On my tree, each li needs to have custom data attributes. Can I pass these in any way? I need, for instance, data-id, data-type and data-value.

Is there a way to do this using the JSON or the default source method. They need to be data attributes as that will allow me to re-use a lot of existing code. If I have to use something like this example: http://www.jqwidgets.com/community/topic/how-to-add-custom-attribute-in-li/, it is not going to be feasible without rewriting the entire application.

Thank you.

[HristoParticipant]

Hello Meezaan,

I would like to ask you what you try to achive, maybe could suggest you some workaround.
Also please, take a look at this example.
I hope this helps.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[meezaanParticipant]

Hi Histro,

I’m about half way through re-writing this and what I did was actually pass an object to the value property of a node/item. The result being that I can store as many key value pairs in that as I need.

So, I think I’m all good for the time being.

Just feedback that it may be useful to update a tree with un-ordered lists because we can create one with un-ordered lists. Currently, as it stands, it just means that if we are generating html lists using server side code, that same code can’t be reused to update the tree.

Happy to contribute code to that end if that’s something you would want to consider.

Thank you for all your help.

[HristoParticipant]

Hello Meezaan,

I would like to present an example:
https://www.jseditor.io/?key=tree-add-item-with-html-tag
Thank you for your understanding.
I hope this helps.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts