[SalesForce] jquery in Lightning component

Does anyone have any examples of how to make a jQuery get from a Lightning component using code similar to the below where the data will be returned from SOQL query in Salesforce

jQuery.ajax({
url: '/MCS/GetCar',
type: "GET",
dataType: "json",

I am already aware of how to import the jquery library using ltng:require and creating an @AuraEnabled method in Apex but it was wiring the rest together I was unsure about, I am relatively new to Lightning although aware of the basics.

Thanks

Best Answer

For client/server communication you'll want to go through the standard Aura APIs instead of jQuery.ajax(). I recommend going through the full Develop for Lightning Experience Trailhead module if you're new to Lightning component development. Or if you've already gone through that, I'd revisit the Connect to Salesforce with Server-Side Controllers section.

You were on the right track with the @AuraEnabled method. Instead of calling ajax() though you'll want to create an Aura action by getting it from your component instance var action = component.get("c.getExpenses");, and then firing it via enqueueAction $A.enqueueAction(action);. See the Trailhead module for the full example and how to handle the response.

Related Solutions

[SalesForce] Using showheader=false when using Jquery in Visualforce

It sounds like jquery is conflicting with a salesforce script library. You will probably need to use jQuery.noConflict() to give up control of the $. Using something like this below you would just need to replace any $ in your script to $j

$j = jQuery.noConflict();

https://api.jquery.com/jQuery.noConflict/

[SalesForce] Lightning Renderer External Script Dependency

There is a "afterScriptsLoaded" event that gets fired when all of your ltng:require stuff finishes loading. I suppose you can have some renderer code that runs afterSciptsLoaded. For example

<ltng:require scripts="/resource/cmsltng__jqueryui/js/rendering/jquery.min.js,
 /resource/cmsltng__jqueryui/js/rendering/jquery-ui.min.js,
 /resource/cmsltng__ckedit/ckeditor/ckeditor.js"
 afterScriptsLoaded="{!c.afterLoad}"/>

And then a controller like so:

render: function(component, event, helper) {
    var ren = this.superRender();
    //etc...
    return ren
},
afterLoad: function(component, event, helper) {
    this.render(component, event, helper);
},

Best Answer

Related Solutions

[SalesForce] Using showheader=false when using Jquery in Visualforce

[SalesForce] Lightning Renderer External Script Dependency

Related Topic