0

To add external Javascript library to a Lightning Community, we tried including it in HTML head markup options. Result: CORS errors. We have added the URL to a list of trusted sites but it did not help.

We then tried adding the Javascript library as a static resource and use it in a Lightning component via ltng:require scripts="{!$Resource.ResourceName}". The library did load but we weren't able to use it.

Improve this question
3
  • 1
    Welcome to SFSE. ltng:require should work but few scripts which do not use use strict will not load. Showing relevant code in question would help us answering better.
    – salesforce-sas
    Aug 27, 2019 at 12:56
  • Hi salesforce-sas, Thanks for your prompt response :) We have tried to use "use strict" as well, but not working, below are some sample code snippet of js file we trying to use after completion of script. $(document).ready(function() { setTimeout(function() { console.log("Testing by mohit and rajat"); var html = $(document).find('#testingcontent').html(); $(document).find('.searchRegion').append(html); console.log("HTML", html); }, 5000); console.log("CONTENT", $(document).find('.knowledgebase-menu').html()); });
    – Rajat
    Aug 28, 2019 at 6:07
  • when we add in our lightning component , It display the console log after scripts loaded. but It says "undefined" in that log : console.log("HTML", html); It means, It is not reading the html. Code written in Lightning component : <ltng:require styles="{!$Resource.CustomCSS}" scripts="{!$Resource.GoogleJQuery}" afterScriptsLoaded="{!c.getValue}"/> Below is fire after scripts loaded. GoogleJQuery:12 CONTENT undefined GoogleJQuery:6 Testing by mohit and rajat GoogleJQuery:9 HTML undefined
    – Rajat
    Aug 28, 2019 at 6:09

1 Answer 1

Reset to default
1

added based on comments

You should not use direct # (Id selector) and . (class selector) selectors in jquery (or any other library) as that will cross the component boundary. You should instead use $(component.find('initid').getElement()) which will respect component boundary.

Once the library is loaded $ is available throughout. Also there is no need of onready as you are already invoking the function on afterScriptsLoaded.

Below is the sample script:

COMPONENT:

<ltng:require scripts="{!$Resource.myscripts +'/jquery-3.4.1.min.js'}"
                       afterScriptsLoaded="{!c.scriptsLoaded}" />

<div>
    POC test jquery
</div>

<div aura:id="initid" class="initid">
    initid
</div>

<lightning:button label="Add Text" onclick="{!c.addText}" />
<div aura:id="dynamictext" class="dynamictext">
    dynamictext
</div>

CONTROLLER js:

scriptsLoaded : function(component, event, helper){
    console.log('handle scriptsLoaded load => ', $, jQuery);
    $(component.find('initid').getElement()).text('Added text during init');
},
addText : function(component, event, helper){
    $(component.find('dynamictext').getElement()).text('dynamic text from button');
}

Old answer

I just tested in my org with below code:

COMPONENT file:

<ltng:require scripts="{!$Resource.myscripts +'/jquery-3.4.1.min.js'}"
                       afterScriptsLoaded="{!c.scriptsLoaded}" />

<div>
    POC test jquery
</div>

CONTROLLER js:

scriptsLoaded : function(component, event, helper){
    console.log('handle scriptsLoaded load => ', $, jQuery);
}

And got below log:

handle scriptsLoaded load =>  ƒ (e,t){return new k.fn.init(e,t)} ƒ (e,t){return new k.fn.init(e,t)}

This means it is working in community - even when I login as community user.

Improve this answer
14
  • Hi salesforce-sas, Sir appreciate your effort :) Just want to say, we are able to get the log which you mentioned sir. It means (we are able to load but reading the HTML is not working means It says "Undefined" Can you pls add the below code snippet in your JS File (stored in static resource).
    – Rajat
    Aug 28, 2019 at 11:21
  • $(document).ready(function() { setTimeout(function() { console.log("Testing by mohit and rajat"); var html = $(document).find('#testingcontent').html(); $(document).find('.searchRegion').append(html); console.log("HTML", html); }, 5000); console.log("CONTENT", $(document).find('.knowledgebase-menu').html()); }); Getting below results in our component controller after scripts loaded. I fire after scripts loaded. ƒ (e,t){return new k.fn.init(e,t)} ƒ (e,t){return new k.fn.init(e,t)} GoogleJQuery:12 CONTENT undefined GoogleJQuery:6 Testing by mohit and rajat GoogleJQuery:9 HTML undefined
    – Rajat
    Aug 28, 2019 at 11:21
  • In Controller.JS Written below code : ({ getValue : function(component, event, helper) { console.log('I fire after scripts loaded. ', $, jQuery); } })
    – Rajat
    Aug 28, 2019 at 11:24
  • added answer...
    – salesforce-sas
    Aug 28, 2019 at 12:34
  • @Rajat is your issue solved?
    – salesforce-sas
    Aug 28, 2019 at 16:39

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.