jQuery UI Widgets Forums Navigation Tree Updating / Refreshing a UL tree

This topic contains 9 replies, has 2 voices, and was last updated by  Hristo 7 years, 8 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • Updating / Refreshing a UL tree #87530

    meezaan
    Participant

    Hi Folks,

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

    • 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

    Updating / Refreshing a UL tree #87537

    meezaan
    Participant

    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!

    Updating / Refreshing a UL tree #87544

    Hristo
    Participant

    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

    Updating / Refreshing a UL tree #87546

    meezaan
    Participant

    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.

    Updating / Refreshing a UL tree #87576

    Hristo
    Participant

    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

    Updating / Refreshing a UL tree #87580

    meezaan
    Participant

    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.

    Updating / Refreshing a UL tree #87581

    meezaan
    Participant

    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.

    Updating / Refreshing a UL tree #87618

    Hristo
    Participant

    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

    • This reply was modified 7 years, 8 months ago by  Hristo.
    Updating / Refreshing a UL tree #87621

    meezaan
    Participant

    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.

    Updating / Refreshing a UL tree #87649

    Hristo
    Participant

    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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.