[SalesForce] Issue with “jQuery(document).ready” in lightning

I am facing some weird issue with javascript in lightning. Below is the piece of code in my javascript file:

jQuery(document).ready(function() {
    lw.sampleFunction();
});

var lw = {};

lw.sampleFunction = function() {
    console.log('Sample Function Call');
}

When I am loading my page, it's throwing script exception :

Uncaught TypeError: Cannot read property 'sampleFunction' of undefined

It seems like sampleFunction is being called before is definition. If I change the order of document.ready and put in below function definition, it starts working.

It seems like lightning is not able to identify the ready state and document.ready is always true for it.

Has anyone faced similar issue? Is there any solution for this problem?

Thanks,

Best Answer

Lightning starts loading components well after the DOMContentLoaded phase, so any methods that you call (jQuery or otherwise) that depend on this state will execute immediately instead of being placed in the asynchronous event queue. Lightning itself starts running after DOMContentLoaded itself, in fact, because it has to wait until it is fully loaded before it can run. Whatever you're trying to do, you'll want to place your code in the afterScriptsLoaded handler of ltng:require.

Related Solutions

[SalesForce] Locker Service – Uncaught TypeError: Cannot read property ‘expando’ of undefined

I am able to resolve this error, sharing details here.

After summer 16 release, we need to change the code to include the external JQuery/Css files from static resource. Here is an example of the same:

<ltng:require .... scripts="{!$Resource.JQuery}" />

Here JQuery is the static resource name, and this static resource is having only single JS File.

For a zip file having multiple files/folder follow another syntax:

<ltng:require ....  scripts="{!join(',', 
    $Resource.jsLibraries + '/jsLibOne.js', 
    $Resource.jsLibraries + '/jsLibTwo.js')}" />

More details you can find in following salesforce doc: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_libs_platform.htm

[SalesForce] Lightning Component – Locker Service Issue

This seems unrelated to the JS library you are using. What is most likely happening is the following: a parent component is trying to call a child helper using the verbose approach:

var concreteHelper = cmp.getConcreteComponent().getDef().getHelper();

We want to remove access to this API because it exposes the complex internal structure of the component. It's hard to test, and hard to maintain.

You need to remove the .getDef().getHelper() and replace it with something else. The trick is to declare a method on your concrete component:

<aura:method name="myMethod" action="{!c.myMethodHandler}"/>

And call it from the super component:

component.getConcreteComponent().myMethod();

In Lightning, every level of inheritance creates a component. This is a better pattern, since the helper is not part of the public API of a component like a method. You can define the method on an interface and ensure every instance abides to the contract, something that the .getDef().getHelper(); was not allowing.

Best Answer

Related Solutions

[SalesForce] Locker Service – Uncaught TypeError: Cannot read property ‘expando’ of undefined

[SalesForce] Lightning Component – Locker Service Issue

Related Topic