JQuery Treetable in Lightning is not working when navigating from standard pages to page where treetable is implemented

Question

I have a requirement where I use jQuery Treetable in Lightning and I have implemented the same as below code. I created a Lightning Tab from this component and used in Lightning Experience.

Component:

<aura:component implements="force:appHostable">
    <ltng:require scripts="/resource/treeTable/treeTableJS.js" afterScriptsLoaded="{!c.loadScripts}"/>
    <aura:attribute name="temp" type="String" default="none" />
    <aura:attribute name="content" type="String[]" default="item1,item2,item3,item4" />
    <table id="table">
        <tbody>
            <tr data-tt-id="parent">
                <td><ui:button label="Click" press="{!c.selectClick}" /></td>
                <td>Content</td>
            </tr>
            <aura:iteration items="{!v.content}" var="item" indexVar="index">
                <tr data-tt-id="{!'child'+index}" data-tt-parent-id="parent">
                    <td></td>
                    <td>{!item}</td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
</aura:component>

Controller:

({
    loadScripts : function(component, event, helper) {
        $("#table").treetable({
                expandable: true
            }, {
                force: true
            }, {
                initialState: "collapsed"
            });
    },

    selectClick : function(component, event, helper) {
        if(component.get("v.temp")==="none"){
            component.set("v.temp","plus");
            $("#table").treetable("expandNode", "parent");
        } else{
            component.set("v.temp","none");
            $("#table").treetable("collapseNode", "parent"); 
        }
    },
})

Now about the issue, when I use this in Lightning tab first time it works (meaning straight forward scenario), but now from this page I navigate to any standard record page (be it Accounts record page) or even Home page and come back to this lightning tab, it does not work. We have to refresh the page to make it work again. Any resolve so that we don't need to refresh the page? Please help. Note: Lightning Locker service is disabled.

Answer 1

I too faced the same issue here.What's happening here is jquery selector fails to retrieve the DOM element on subsequent load(component definitions are loaded from cache) not sure why, but the same would work in initial load.

Solution here is to use aura:id in the <table/> and get that DOM element using component.find().getElement().

NOTE: Don't use set 'table,select' kind of values to HTML Tag's attribute id,class... In your case id="table", instead try naming them to be context specific.

For example: If this an tree view for Account, then you could name it aura:id="account-tree" or just aura:id="tree-view".

Component:

<aura:component>
    <table aura:id="tree-view">
    ...
    </table>
</aura:component>

Controller.js

({
    loadScripts : function(component, event, helper) {
        $(component.find("tree-view").getElement()).treetable({
                expandable: true
            }, {
                force: true
            }, {
                initialState: "collapsed"
            });
    },
})