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.