2

I have a lightning component that is placed on Visualforce Page via lightning out. I have a button on Visualforce Page on click on which the lightning component should refresh.

Is there a way I can achieve this?

1

I have recently encountered the same situation. If anyone is looking out for the solution, here is what you need to do !

let me first reframe the situation here,

"Lightning Component is invoked from Visualforce Page using ltng:outApp. You would want to change data or have control on already created Lightning Component from a button click on Visualforce Page"

Solution:

You might have used $Lightning.use already in Visualforce page inside which you create Lightning Component using $Lightning.createComponent.

Now, create a lightning event , let's say "refreshEvent" and handle the event in your lightning component, "MyLC" using aura:handler

<aura:handler event="c:refreshEvent" action="{!c.init}"/>

You need to fire this event inside Visualforce page on button click. But when you implement this, you will be getting error "Cannot read property of fire of undefined".

Let's go back to basics, when you are using Lightning:use, you are implementing Lightning framework inside visualforce page, you can fire lightning event only inside this framework. So, when you fire event directly inside the page, console will not understand fire command. You need to find a way to fire the event inside Lightning:use.

My requirement was to refresh or initialize Lightning Component when I click on a button in Visualforce Page. For this I used a boolean variable in javascript, using which I either create Lightning component or fire Lightning Event. Please check the sample code below,

In the page:

<li><a  href="#" onclick="callLC();">test</a> </li>

Javascript:

<script> 
   var invokeLC = true;
   
   function callLC(){
    $Lightning.use("c:yourLightningApp",    
            function() {
                console.log('invokeLC'+invokeLC);
                if (invokeLC) {                  
                    $Lightning.createComponent(
                        "c:MyLC", 
                        function(cmp) {
                        }
                    );
                }else {
                    fireEvent();
                }
                
                invokeLC = false;
            },          
        );    
   }
   
    function fireEvent() {           
        var myEvent = $A.get("e.c:refreshEvent");
        myEvent.fire();
    }

</script>
0

Most common implementation will be create a application event and then fire that application event from visual force and reload content of component.

<script type="text/javascript">
        function fireEvent();
        {
            var myExternalEvent = $A.get("e.c:appEvent");
            myExternalEvent.fire();
        }
    </script>

    <apex:form >
        <apex:commandButton value="Mark" onClick="fireEvent();return false;"/>
    </apex:form>

Then in component we can handle that event and refresh component content

<aura:handler event="c:appEvent" action="{!c.init}"/>
4
  • @Manoj: I tried your approach but vf page does not allow $A.get("e.c:appEvent") in its javascript. – Shrey Apr 12 '18 at 20:15
  • @Shrey did you created a lightning application event? – Manjot Singh Apr 12 '18 at 20:18
  • @Manoj: yes.. I already have lightning app event created. VF Page javascript errors out during run time. :( – Shrey Apr 12 '18 at 21:20
  • You have to register your application event in your component that you are using then it will work – Manjot Singh Apr 16 '18 at 13:04
0

Have you tried using the location.reload() function, example here

Added a Handler for the force:refreshView event, documentation here

Example:

Component

<aura:handler event="force:refreshView" action="{!c.isRefreshed}" />

Controller JS

isRefreshed: function(component, event, helper) {
    location.reload();
}

There are another 533 other ways to reload the page with JavaScript :)

1

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.