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!

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
3
  • 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? Commented Jun 1, 2016 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? Commented Jun 1, 2016 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. Commented Jun 1, 2016 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);
            }
        })
    });
},
Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.