function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Gaurav  PuranikGaurav 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
User-added image
Best Answer chosen by Gaurav Puranik
Jasveer SinghJasveer Singh
Use noconflict method of jquery
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

Gaurav  PuranikGaurav Puranik
Also below is the function I am using..
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);
            }
        });
}
JaiChaturvediJaiChaturvedi
Is Lightning locker service enabled in your org? If yes then due to locker service using external Libraries are issue.

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');
	}
})

 
Jasveer SinghJasveer Singh
Use noconflict method of jquery
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");
    }
    
})

 
This was selected as the best answer
Gaurav  PuranikGaurav Puranik
Thanks  Jasveer Dude!! It worked :)