Refresh or re-render the lightning components inside VF Page in SF1

Question

i have a Lightning component inside a VF page. On the Component i have a submit button on press of this button , after some action is performed i want to refresh the component.

i added the below code in client side controller of my component. But i got the error.

Uncaught error in $A.run() : Cannot read property 'fire' of undefined

submit : function(component, event, helper) {
        $A.get('e.force:refreshView').fire();
    },

To resolve this error, i tried adding the aura dependency in my application. which resolved this error, but it didn't refresh my component.

<aura:dependency resource="markup://force:refreshView" type="EVENT"/>

Any ideas would be helpful.

Answer 1

There is no default handler in a standalone .app or the LC4VF app that is listening for force:refreshView (a service that is provided as part the of S1/LEX app).

You have a couple of options:

• v.body replacement using component.set("v.body", someNewComponentsArray)
• if you are changing the data that things like aura:iteration, ui:outputNumber, {!someExpression}, etc are bound to they should automatically rerender

Either way its critical that you let the Lightning Framework know about and actions that need to be invoked, data bindings that need to be rerendered, etc when you invoke Lightning/Aura APIs or change bound data outside of the built in Lightning action/event lifecycle. This is a typical stumbling block when entering any framework from code outside of its purview (identical challenges in frameworks like Angularjs where you have invoke the digest loop).

So how do you do this in Lightning? Its simple:

• for callbacks that you register as event listeners, Promises, etc its critical that you wrap them in a call to $A.getCallback(), e.g.:

element.addEventListener("click", $A.getCallback(function(event) { ... }));

instead of using a "naked" callback like this:

element.addEventListener("click", function(event) { ... });

Please see https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_mod_ext_js.htm for more information on this important topic.

Answer 2

Why do you want to refresh the component? If there are values that have been updated, they should be reflected via the attribute bindings. If you are having to refresh the component, it probably should be refactored a bit. Can you post the relevant attribute(s) and markup, including the expressions? When the form is submitted you should be able to set the values and have it refresh automatically.