function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rowan ChristmasRowan Christmas 

Lightning Autocomplete, issues importing jquery-ui

Hi all,

I was hoping to use this component: http://peterknolle.com/lightning-component-autocomplete/ for doing Autocomplete in Lightining. But it seems to not have been updated to use ltng:require.

The post references Skip Sauls "require" component (https://login.salesforce.com/packaging/installPackage.apexp?p0=04tB000000011BX ), which I believe is out of date with the introductin of ltng:require, and that component doesn't seem to install anymore anyways :)

I switched out to using:  
<ltng:require scripts="/resource/jquery_js, /resource/jquery_ui_js" styles="/resource/jquery_ui_css" afterScriptsLoaded="{!c.doInit}"/>

In place of the require plugin. But I am consisntly getting this error:
  
​ReferenceError: Can't find variable: jQuery
(anonymous function)jquery_ui_js:5
(anonymous function)jquery_ui_js:5:84
Which seems like jquery-ui is getting loaded in a weird way? The static resources for each of these files is correct, and the web inspector shows all the resources correctly loaded after the fact. Is there something else I should be doing to get this to all work, or is there a better solution to doing autocomplete in Lightning?

Thanks!
 
James LoghryJames Loghry
I'm guessing your static resource, or the path to your static resource(s) are bad.  The following worked for me:

Component:
  
<aura:component >
    <ltng:require scripts="/resource/jq/jquery.js,/resource/jq/jquery-ui.js" styles="/resource/jq/jquery-ui.css" afterScriptsLoaded="{!c.doInit}" />
    <div id="draggable" class="ui-widget-content">
  		<p>Drag me around</p>
	</div>
</aura:component>
Controller: 
({
	doInit : function(component, event, helper) {
		$(function() {
    		$( "#draggable" ).draggable();
  		});
	}
})
  1. Try removing the space between your two JS paths to see if that makes the difference.
  2. If you uploaded a zip file (instead of the files themselves directly, the path name needs to be /resource/RESOURCE_NAME/filepath
  3. Try using ".js" instead of "_js" for the filename.  Same goes forr the css file.
Rowan ChristmasRowan Christmas
Update: I was able to get jquery imported, but not using a zip file... I know I have something wrong, another day.

Also, if you are trying to get the Autocomplete component working that I linked above, you may need change:
  
<aura:event type="COMPONENT">
	<aura:attribute name="selectedOption" type="Object"/>
</aura:event>

to 
  
<aura:event type="APPLICATION">
	<aura:attribute name="selectedOption" type="Object"/>
</aura:event>

Maybe it's because I'm not in a namespace? Or I'm embedding the components in another component rather than the App level? But changing the event type to APPLICATION (which I know is a larger scope...) made it actually work properly.