What to do when the Jquery not this work properly in subsequent loads in the lightning component?
I have a lightning component which sets a div's background color to red in the doInit method using jquery, and is added as a lightning tab.
When i visit the tab in lightning experience for the first time, the component is loaded,the div's color is properly set to red.But when i navigate to a few tabs and come back to the above tab.
doInit is fired but the jquery is not setting the background color of the div.
While debugging i found out the selector $('#TestDiv') (i.e jquery element object) logged in dev console is different for subsequent loads when compared with the first log,which seems odd.
I suspect this is because of the second or more the time the tab is visited, component definition from the cache is loaded,which inturn alters dom structure i suppose(i may be wrong)so that jquery fails to retrieve the proper dom element(which it did the first time the component was loaded).
Here's my code:
TestCmp.cmp
test div txt TestCmpController.js
({ doInit:function(cmp,evt,helper){ console.log('setting bg:::') $('#testDiv').css('background-color', 'red'); console.log('done setting bg:::') } })
There are a few issues in your example regarding Jquery not this working properly in subsequent loads in the lightning component:
init is not synchronized in any way with dynamic loading of javascript or rendering which is why exists (it handles both of those challenges by sequencing one or more script onload events and the rendering lifecycle of lightning). init handlers are called long before rendering happens which means that there is a timing issue there too. S1/LEX has built in tab content caching (I believe it hold on to the last 5 tabs' content) and init is only called once in a component's lifecycle (right after creation) manipulating DOM elements that are created on your behalf by the framework puts you at odds with the auto rerendering process and direct CSS modifications are likely to be unceremoniously overwritten. If you really need to do this it should be done in afterRender()