10

I'm just starting out in Lightning (Summer 16 sandbox) and I'm trying to use jQuery, but getting the error: Uncaught Error: Access denied for insecure view in aura_prod.js:1:27.

I'm testing in a very simple component:

<aura:component  implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:appHostable" access="global">
    <ltng:require scripts="/resource/jQuery_2_2_4/jquery-2.2.4.js" 
    styles="{!$Resource.slds105 + '/assets/styles/salesforce-lightning-design-system.min.css'}" 
    afterScriptsLoaded="{!c.init}"/>

    <div class="slds">
        <button id="clickme" onclick="{!c.boo}">Click Me</button>
    </div>
</aura:component>

With a controller:

({
    init: function(component, event, helper) {
        helper.doInit(component);
    }
})

And a Helper:

({
doInit : function(cmp) {
    var self=this;
    $( document ).ready(function() {
        console.log( "ready!" );
    });
    $('#clickme').click(function(ev) { self.clicked(cmp, ev); });
},
clicked: function(cmp, ev) {
    console.log("boo");
}
})

I'm not sure what I'm doing wrong. jQuery does work, the console.log("ready!") in the helper does get executed.

Thanks!

3

It appears you're trying to do more than you have to here. You're trying to add a jQuery event listener in your component initialization, while the lightning framework handles that stuff for you.

You're already using the onclick attribute of the button. Why not utilize it.

<button id="clickme" onclick="{!c.boo}">Click Me</button>

Your button can stay the same, but let's add that function to your controller.

({
    init: function(component, event, helper) {
        helper.doInit(component);
    },

    boo: function(component, event, helper) {
        helper.clicked(component, event);
    }
})

You can use jQuery inside your controller/helper. As long as the script is included, you don't need to explicity define jQuery's document.ready block.

  • 1
    Thanks for your reply. I forgot to take that onclick out. As you can see there is no Boo function in the controller as I did take that out. I put that in to test a direct call as opposed to an event attached by jQuery. Both should work, right? – Dirk Beijaard Jun 1 '16 at 5:30
  • Theoretically, I believe so. However, convention dictates that you should use the element attributes to handle events within a component. Do you see any advantage to adding the event listener with jQuery as opposed to the onclick attribute? – Antonio Manente Jun 1 '16 at 13:05
  • The reason I was looking at this was for adding click handlers to a tab component. I could not get that to work (used a jquery example) due to the same error. So I simplified the code, to see where the problem is. Even with hardly any jQuery code, it keeps crashing with this error and another one that says d.get is undefined. – Dirk Beijaard Jun 1 '16 at 14:46
2

I absolutely agree with Antonio's answer, but just trying figure out the issue in the code snippet posted in question. The Jquery event listener logic added on 'clickme' button (i.e. $('#clickme')), gets executed out of lightning framework lifecycle, so it should be enclosed by $A.getCallback(). So the code inside the doInit can be modified as :

doInit : function(cmp) {
    var self=this;
    $('#clickme').click(function(ev) { 
        $A.getCallback(function() {
            if (cmp.isValid()) {
                self.clicked(cmp, ev);
            }
        })
    });
},

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.