Apex Code Development You need to sign in to do that
Don't have an account?
Gaurav Puranik $ is not a function in client side JS controller
Hi all,
- I want to acheive something by using $('.ClassName') in JS controller it is looking like impossible to do that by component.find('aura:id');
- I am using <ltng:require scripts="{!$Resource.MyNameSpace__MyResourceName}" /> as per lightning guide to add external source library.
- I found one blog as well there we have unmanaged package and we can use external libraries below is the link
https://login.salesforce.com/packaging/installPackage.apexp?p0=04tB000000011BS
But I cannot able to install this package as well..some error is coming..
Anybody has any idea how to overcome this error below is the screenshot for the same
- I want to acheive something by using $('.ClassName') in JS controller it is looking like impossible to do that by component.find('aura:id');
- I am using <ltng:require scripts="{!$Resource.MyNameSpace__MyResourceName}" /> as per lightning guide to add external source library.
- I found one blog as well there we have unmanaged package and we can use external libraries below is the link
https://login.salesforce.com/packaging/installPackage.apexp?p0=04tB000000011BS
But I cannot able to install this package as well..some error is coming..
Anybody has any idea how to overcome this error below is the screenshot for the same
Link is below http://www.w3schools.com/jquery/jquery_noconflict.asp
and full example is below
Include Jquery into lightning Component
Go to Setup select Critical Update
Deactivate: Enable Lightning LockerService Security
and paste below code in developer console
1 Step: Insert into component
<ltng:require scripts="/resource/Jq" afterScriptsLoaded="{!c.afterScriptsLoaded}" />
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 Step: Insert into Component
<button id="button1" onclick="{!c.dropdown}" class="slds-button slds-button--neutral">Show/Hide Columns
<img src="/resource/dropdownIcon" style="height:20px; width:20px;"/></button>
<p id="dropdown1">hi</p>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Step 3: insert into Controller
({
afterScriptsLoaded : function(component, event, helper) {
},
dropdown:function(component, event, helper)
{
// console.log("1st time");
// $.noConflict();
jQuery("#dropdown1").toggle();
//console.log("2nd time");
}
})
All Answers
inside my JS controller..
toggleFunction: function(component, event, helper) {
$('.toggleCheck').click(function(e) {
console.log('ppppppppp==='+Name);
e.preventDefault();
var $this = $(this);
if ($this.next().hasClass('show')) {
$this.next().removeClass('show');
$this.next().slideUp(350);
} else {
$this.parent().parent().find('li .inner').removeClass('show');
$this.parent().parent().find('li .inner').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
}
});
}
If not, then try to use the jQuery in afterRender() method in Rendered file of component. Generally that is the best way if you want to play with DOM elements.
OR
Use "afterScriptsLoaded" attribute in <ltng:require> tag:
<ltng:require styles="/resource/path/to/css1[,/resource/path/to/css2]" scripts='/resource//path/to/js1.js,[/resource//path/to/js2.js]' afterScriptsLoaded="{!c.jsLoaded}" />({ jsLoaded: function(component, event, helper) { alert('ready to go'); } })Link is below http://www.w3schools.com/jquery/jquery_noconflict.asp
and full example is below
Include Jquery into lightning Component
Go to Setup select Critical Update
Deactivate: Enable Lightning LockerService Security
and paste below code in developer console
1 Step: Insert into component
<ltng:require scripts="/resource/Jq" afterScriptsLoaded="{!c.afterScriptsLoaded}" />
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 Step: Insert into Component
<button id="button1" onclick="{!c.dropdown}" class="slds-button slds-button--neutral">Show/Hide Columns
<img src="/resource/dropdownIcon" style="height:20px; width:20px;"/></button>
<p id="dropdown1">hi</p>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Step 3: insert into Controller
({
afterScriptsLoaded : function(component, event, helper) {
},
dropdown:function(component, event, helper)
{
// console.log("1st time");
// $.noConflict();
jQuery("#dropdown1").toggle();
//console.log("2nd time");
}
})