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:


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.


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:


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.