8

I have two lightning component placed on one page lightning app. First Component have refresh icon and I set onclick action to refresh Component $A.get('e.force:refreshView').fire(); but this event refresh the whole page instead of First component. how can refresh only one component on page not all the page ?

11

If you are refreshing the component from the context of a parent, you don't need to use an event - you can expose a method to the parent and get it to call that.

If you are refreshing the component from within the child itself, you could either use an event or re-run your init routine.

So for a parent calling a public method:

 <aura:method name="reInit" action="{!c.doInit}" description="Runs the init method again ">

The parent could get a reference to the child component and call childComponent.reInit()

For a parent totally refreshing the child, the parent could dynamically recreate the component:

    //clear body of host component just in case
var hostComponent = component.find("enclosingComponent");
hostComponent.set("v.body", []);

$A.createComponent(
  'c:YourChildComponent', {
          "someParam":"someValue"
  },
  function(newComponent, status, errorMessage) {
    //Add the new button to the body array
    if (status === "SUCCESS") {
      var body = hostComponent.get("v.body");
      body.push(newComponent);
      hostComponent.set("v.body", body);
    } else if (status === "INCOMPLETE") {
      console.log("No response from server or client is offline.");
    } else if (status === "ERROR") {
      console.log("Error: " + errorMessage);
    }
  }
);

From the child component If you are doing this from within the component, you can despatch an event to the parent if you want a total refresh, or run the reInit method yourself.

You can define a new COMPONENT event fire it to tell the parent that you want to be refreshed.

<aura:event type="COMPONENT" description="Event used to tell the parent to refresh" >
  <aura:attribute name="componentName" type="string"/>
</aura:event>

In the child component:

<!--markup-->
<aura:registerEvent name="refreshChildComponent" type="c:RefreshChild"/>

//handler
var e = component.getEvent("refreshChildComponent");
e.setParams({ "componentName": "child1"});
e.fire();

In the parent component:

<aura:handler name="refreshChildComponent" event="c:RefreshChild" action="{!c.refreshChild}" />

In the parent helper, the same code as above could be called - in the parent calling a public method section

| improve this answer | |
8

You are not supposed to refresh one specific component, as the component firing the refresh is not supposed to know what other components are on the page. Instead, create and fire your own event, and handle it in the components that needs to be refreshed.

| improve this answer | |
  • 1
    @Faiben can you please give me the basic example because i did't get how to create own refresh event because I am not calling refresh after any action but when ever I click on the icon just want to refresh the component – Faisal May 17 '17 at 14:58
0

I had the same requirement to self refresh a component. The details are discussed below briefly. The approach is based on the idea suggested by Fabien above.

Steps to Self Refresh a Component

SCENARIO :: The scenario is to create a Contact record via LDS. I have a Lightning Card with the Contact Input Fields. Once the Contact is saved I wanted to refresh the Component to show blank input Fields ready to create next Contact record.

Step 01 :: Create an Event

<aura:event type="COMPONENT" description="Self Refresh" />

Step 02 :: Register and Handle the event by calling appropriate JS method (Component)

<!-- Register and handle the Refresh Event to refresh the current component -->
<aura:registerEvent name="selfRefreshEvt" type="c:compSelfRefresh" />

<!-- Now handle the selfRefreshEvt by calling createCntCreateTempl which is the same method called on init to initialize a Contact Obj  -->
<aura:handler name="selfRefreshEvt" event="c:compSelfRefresh" action="{!c.createCntCreateTempl}" />

Step 03 :: Fire the Event (Controller.js)

// Fire selfRefreshComp Evt (start)
// Get the component event by using the name value from aura:registerEvent

    var selfRefreshEvent = component.getEvent("selfRefreshEvt");              
    selfRefreshEvent.fire(); 

// Fire selfRefreshComp Evt (end)
| improve this answer | |

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.