Jquery UI sortable after lightning component render - [$ is not defined]

Question

I have an component that renders a tree of data with 1 deep level of subitems. I want both levels to be sortable independently.

So what I got is the following:

AfterScriptsLoaded is used to init the data to be sorted

<ltng:require afterScriptsLoaded="{!c.doInit}" scripts="{!join(',',
        $Resource.jquery_lightning + '/jquery-2.2.4.min.js',
        $Resource.jquery_lightning + '/jquery-ui.1.11.4.min.js'
)}"/>

The 'render' event handler is used to assign the $().sortable() method on the UL's that I want to be sortable.

<aura:handler name="render" value="{!this}" action="{!c.doneRendering}"/>

In the doneRendering method I call an helper method which does the following:

$(".sortable").sortable();
$("#sub-sortable-0").sortable();

The second statement is not correct yet, but is just for testing.

So the fun thing is: I get what I wanted the, UL's are sortable just as expected. But I also got a nasty error rendered on the screen, stating:

This page has an error. You might just need to refresh it. Action failed: c:SortableTable$controller$doneRendering [$ is not defined]

Failing descriptor: {c:SortableTable$controller$doneRendering}

So it does work but the error pops up suggesting that jquery should not work - but it does.

Answer 1

Ater investigating this issue further I found the cause. The following is mentioned in the docs:

When a component is rendered or rerendered, the aura:valueRender event, also known as the render event, is fired.

But apparently during the render event, jquery is not loaded yet: thus the error message is thrown. During the rerender event Jquery is loaded and the sortable functions work as expected.

I resolved this by doing a check if the data that needs to be sorted is not empty:

if(!$A.util.isEmpty(component.get('v.dataToSort'))){
    helper.initTreeSorting(component,helper);
}