4

In our application we have a use case where we need to search elements using Jquery as following

In the controller :

var Id = 'groupInput'+component.get("v.comp_suffx"); 
var GroupInputVal = $("#"+Id).val();

and in Renderer

$('#configtablefirm_id thead').off( 'click','tr th');

being aware that modifying any DOM elements belonging to another component is not allowed, we made sure that the elements we are searching for(using Jquery search) are present inside the same component which is referred only once across the Application avoiding any possibilities of duplicate ids. We are also ensuring the id's are unique across the application using different approaches.

Being said that,

We are about to submit our code for security review, and before that we want to confirm whether it is allowed to use Jquery search at all with lightning component framework.

Can anyone from lightning team confirm on this ? Please do share if anyone has faced same kind issue, Thanks in advance

  • @Doug could you share your views on this ? – Gopal Rao Jul 14 '16 at 9:46
2

You can use jQuery for doing this. But please consider the following points which you've to keep in mind :-

  1. Ensure that you've uploaded jQuery(version 2.2.4 or above which is fully compatible in strict mode) as a static resource. Also, make sure that it has been successfully loaded before using jQuery to do the same. For this you can set a Boolean attribute in the afterScriptsLoaded function and check whether the attribute is true before using jQuery.

For example:

Component

    <aura:component>

        <ltng:require styles="{!$Resource.SLDSv1 + '/assets/styles/lightning-design-system-ltng.css'}" 
        scripts="{!$Resource.jsLibraries + '/jQuery.js'}" afterScriptsLoaded="{!c.scriptLoaded}" />

        <aura:attribute name="isjQueryLoaded" type="Boolean" default="false"/>
    <aura:component>

Controller:

scriptLoaded : function(component, event, helper) {
        component.set("v.isjQueryLoaded", true);
    }

Renderer

 if(component.isValid() && component.get("v.isjQueryLoaded")){
     $('#configtablefirm_id thead').off( 'click','tr th');
 }

As per the Lightning Developer Guide, you're supposed to make changes to the DOM only in the rendering lifecycle (You can modify outside the rendering lifecycle provided you use aura framework util functions) In this case you should be modifying DOM only inside the rendering lifecycle as you've already done.

(You can also try checking if you're able to access $('#configtablefirm_id thead') after enabling locker service in your instance).

So while calling the function in the renderer (from afterRender or reRender, according to your use case) which uses jQuery, you can check whether the attribute is true.

Please do not try accessing element using $ directly from controller even inside the afterScriptsLoaded function as the DOM may not have been rendered at that time. (That's the reason why I have suggested the above method.)

  1. I would also strongly recommend to run your code in Salesforce Lightning CLI and check for any errors before submitting the code for Security Review.
  • Thanks for the detailed answer @Aravind, we really appreciate it. Yes, we are using the same approach you mentioned in the answer. We are currently going for security review without enabling LockerService targeting for an early release of our product, ofcourse we are working on LockerService in parallel. So our main conern here is it all allowed to search in the whole DOM using Jquery search ? – Gopal Rao Jul 15 '16 at 6:27
  • 2
    If it's done in the rendering lifecycle after all the required resources have loaded successfully, and provided you're able to access $('#configtablefirm_id thead') after enabling LS, then I strongly believe you would pass the security review. Please view @DougChasman 's one of the answers here:- salesforce.stackexchange.com/a/130428/29317 – SE_User Jul 15 '16 at 6:41
1

We got a confirmation from the security review team that searching the entire DOM in any component (using JQuery search in this case) is not allowed (even though you are not making any DOM editing), and making sure that the elements you are searching for are only present inside the same component doesn't make it OK to do this.

The work around they suggested is to confine the search to a pirticuler component or element, instaed of searching it in the entire DOM.

And we later noticed that the documentation was also updated to reflect this. https://developer.salesforce.com/page/Lightning_Security

JavaScript within a Lightning component can only modify DOM elements belonging to the component. For example, it cannot modify document head or directly access the DOM element belonging to another component

As per my knowledge, In the second sentence of the above quoted text, the phrase 'or directly access' was not present earlier, and that caused this whole confusion.

Anyways it is now more clear with the updated documentation.

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.