0

Hope you are doing great :)

Could you please help us the below requirement :

a. To add External JS File script in Lightning community pages, (Tried with Head Markup options, but It gives CORS (Content Security errors) , To fix we have added the URL In trust site as well. but It is not working for us.

b. As an alternative, Added that JS file in static resource and add in Lightning component by using ltng:require scripts="{!$Resource.ResourceName}" kind of tags. but scripts is loaded but not reading the element.

Above both solution is not working for us, Can you please help us about how to achieve the requirement.

Thanks

  • 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 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 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 at 6:09
0

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.

  • 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 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 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 at 11:24
  • added answer... – salesforce-sas Aug 28 at 12:34
  • @Rajat is your issue solved? – salesforce-sas Aug 28 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.