jqxTree in SPA

[shawnParticipant]

I’m writing a single page app using jqxTree.
When I create the jqxTree the first time, it works fine.
If I destroy the page and try to re-create it, it doesn’t work.

I’m using this to destroy the widget

if( $("#jqxWidget").length ){
	$("#jqxTree").jqxTree("destroy");
}

HTML:

<div id="jqxWidget">
    <div id="jqxExpander">
        <div>
            Folders
        </div>
        <div style="overflow: hidden;">
            <div style="border: none;" id="jqxTree">
            </div>
        </div>
    </div>
</div>	

JS

$('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: '400px'});
// Create jqxTree
var source = [
{
	icon: "../images/folder.png", label: "Mail", value: "fol_1", expanded: true, items: [
	  { icon: "../images/file.png", label: "Calendar", value: "fil_1" },
	  { icon: "../images/file.png", label: "Contacts", selected: true }
	]
},
{
	icon: "../images/folder.png", label: "Inbox", expanded: true, items: [
	 { icon: "../images/file.png", label: "Admin" },
	 { icon: "../images/file.png", label: "Corporate" },
	 { icon: "../images/file.png", label: "Finance" },
	 { icon: "../images/file.png", label: "Other" },
	]
},
{ icon: "../images/folder.png", label: "Deleted Items" },
{ icon: "../images/folder.png", label: "Notes" },
{ iconsize: 14, icon: "../images/folder.png", label: "Settings" },
{ icon: "../images/folder.png", label: "Favorites" }
];
$('#jqxTree').jqxTree({ source: source, width: '100%', height: '100%'});
$('#jqxTree').jqxTree('selectItem', null); 	

$('#jqxTree').on('itemClick',function (event)
{
	var args = event.args;
	var item = $('#jqxTree').jqxTree('getItem', args.element);
	var label = item.label; 

	var u=uniqueNumber();						
	$('#jqxTree').jqxTree('updateItem', args.element, {label: label+"."+u});
	
	$('#jqxTree').jqxTree('refresh');
	
	// console.log( item );
	// console.log( item.value );
});

[shawnParticipant]

when I say “doesn’t work” I mean the body of the tree is missing, only the div that says “Folders” shows.

[Yavor DashevParticipant]

Hi shawn,

I wasn’t able to completely reproduce the issue that you have.
However when you destroy and element and want to create a new one if I have understood correctly you have to use jqwidgets.createInstance method in order everything to work properly.

I have prepare a little code example how to use this method:

         <script type="text/javascript">
            $(document).ready(function () {
                var source = [
                 {
                     icon: "../../../images/mailIcon.png", label: "Mail", expanded: true, items: [
                       { icon: "../../../images/calendarIcon.png", label: "Calendar" },
                       { icon: "../../../images/contactsIcon.png", label: "Contacts", selected: true }
                     ]
                 },
                 {
                     icon: "../../../images/folder.png", label: "Inbox", expanded: true, items: [
                      { icon: "../../../images/folder.png", label: "Admin" },
                      { icon: "../../../images/folder.png", label: "Corporate" },
                      { icon: "../../../images/folder.png", label: "Finance" },
                      { icon: "../../../images/folder.png", label: "Other" },
                     ]
                 },
                 { icon: "../../../images/recycle.png", label: "Deleted Items" },
                 { icon: "../../../images/notesIcon.png", label: "Notes" },
                 { iconsize: 14, icon: "../../../images/settings.png", label: "Settings" },
                 { icon: "../../../images/favorites.png", label: "Favorites" },
                ];
                $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: '400px'});
                // create jqxTree
                $('#jqxTree').jqxTree({ width: 250, height: 350, source: source});
                // focus the jqxTree.
                $("#jqxTree").jqxTree('focus');

                 $("destroy").on('click', function () {
                    $("#jqxTree").jqxTree("destroy");
                 })
                 $('#create').on('click', function () {
                  
                   jqwidgets.createInstance("#jqxTree2", 'jqxTree', { width: 250, height: 350, source: source});
                 })

            });
        </script>
<div id="jqxWidget">
    <div id="jqxExpander">
        <div>
            Folders
        </div>
        <div style="overflow: hidden;">
            <div style="border: none;" id="jqxTree">
            </div>
        </div>
    </div>
</div>	

<button id ="destroy"> Destroy Tree</button>
<button id ="create">  Create Tree</button>

<div>
    Folders
</div>
<div style="overflow: hidden;">
    <div style="border: none;" id="jqxTree2">
    </div>
</div>

If this doesn’t work for you it will be best to create a complete code example that reproduces it in order to be able to assist you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[shawnParticipant]

Does that mean I have to change the ID of jqxTree every time?

I have a jsfiddle sample here:
http://jsfiddle.net/hpk9tuzf/1/

[adminKeymaster]

Hi shawn,

When you destroy the Tree, it is removed from the DOM completely which means that if you want to use a Tree like the one you destroyed before, you will need to construct it by adding such a DIV tag with the same ID to the DOM and initialize it.

Example:

   $('#jqxTree').jqxTree({
       height: '300px',
       width: '300px',
       theme: 'energyblue'
   });
   $("#jqxbutton").jqxButton({
       theme: 'energyblue',
       width: 200,
       height: 30
   });

   $('#jqxbutton').click(function () {
       $("#jqxTree").jqxTree('destroy')
   });
    $('#remake').click(function () {
       makeJQX();
   });
   
   function makeJQX(){
      if ($("#jqxTree").length === 0) {
         var tree = document.createElement('div');
         tree.id = "jqxTree";
         document.body.insertBefore(tree, document.querySelector("#jqxbutton"));
      }
      
      $('#jqxTree').jqxTree({
       height: '300px',
       width: '300px',
       theme: 'energyblue'
   });
   $("#jqxbutton").jqxButton({
       theme: 'energyblue',
       width: 200,
       height: 30
   });
   
   }

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[shawnParticipant]

Thank you.
I have a working sample here, if anyone else would like to see it:

jsfiddle

[Author]

Posts