2

I am trying to convert a Visualforce page into a Lightning Component. The Visualforce page uses jQuery code in a static resource to insert HTML it generates based on a VisualForce.remoting.Manager call in the static resource. I have gotten everything to load properly and even insert placeholder HTML into the Lightning Component but when it gets to the actual Visualforce.remoting.Manager call it throws an error saying: TypeError: Visualforce is undefined.

Do I need to do something to allow the static resource to call the VisualForce.remoting.Manager or is it just not allowed in the Lightning Component and I have to instead do the call directly to the apex in the Lightning Component Controller.js file?

4

You cannot use Javascript Remoting for lightning components .You will have to annotate your methods with @AuraEnabled and the invocation mechanism for both differ widely .

For Javascript Remoting on Visualforce the invocation mechanism is as below

<apex:page controller="AccountRemoter">
<script type="text/javascript">
function getRemoteAccount() {
    var accountName = document.getElementById('acctSearch').value;

    Visualforce.remoting.Manager.invokeAction(
        '{!$RemoteAction.AccountRemoter.getAccount}',
        accountName, 
        function(result, event){
            if (event.status) {
                // Get DOM IDs for HTML and Visualforce elements like this

            } else if (event.type === 'exception') {

            } else {

            }
        }, 
        {escape: true}
    );
}
</script>

For Lightning components you invoke an AuraEnabled class as below

({
"echo" : function(cmp) {
    // create a one-time use instance of the serverEcho action
    // in the server-side controller
    var action = cmp.get("c.getAccount");
    action.setParams({ accountName : cmp.get("v.firstName") });

    // Create a callback that is executed after 
    // the server-side action returns
    action.setCallback(this, function(response) {
        var state = response.getState();
        // This callback doesn’t reference cmp. If it did,
        // you should run an isValid() check
        //if (cmp.isValid() && state === "SUCCESS") {
        if (state === "SUCCESS") {
            // Alert the user with the value returned 
            // from the server
            alert("From server: " + response.getReturnValue());

            // You would typically fire a event here to trigger 
            // client-side notification that the server-side 
            // action is complete
        }
        //else if (cmp.isValid() && state === "INCOMPLETE") {
        else if (state === "INCOMPLETE") {
            // do something
        }
        //else if (cmp.isValid() && state === "ERROR") {
        else if (state === "ERROR") {
            var errors = response.getError();
            if (errors) {
                if (errors[0] && errors[0].message) {
                    console.log("Error message: " + 
                             errors[0].message);
                }
            } else {
                console.log("Unknown error");
            }
        }
    });

    // optionally set storable, abortable, background flag here

    // A client-side action could cause multiple events, 
    // which could trigger other events and 
    // other server-side action calls.
    // $A.enqueueAction adds the server-side action to the queue.
    $A.enqueueAction(action);
   }
 })

Its worth noting couple of differences

1.The backend apex can be same except its annotated differently in both case .Uses @RemoteAction for vf and @Auraenabled for lightning components

2.For lightning components every property needs to be annotated with @auraenabled for the variable to reflect in UI

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.