1

I have a lightning component to add and remove the rows. Whenever I click the delete button, instead of deleting the selected row it refreshes the entire page. This is working fine when I tested on the lightning app but it does not work when it is embedded on the community page.

DeleteRow Event

<aura:event type="COMPONENT">
    <aura:attribute name="deleterow" type="String"/>
</aura:event>

Child Component

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" controller="DemoController" >
<aura:attribute name="wrap" type="ChildWrapper[]"/> 
<aura:registerEvent name="edunav" type="c:DeleteRow"/>
<tr>
    <td><input type="hidden" name="index" value="{!v.wrap.Index}"/></td>
    <td><ui:inputText class="slds-input" value="{!v.wrap.Record.Name}"/></td>
    <td><a href="#" data-record="{!v.wrap.Index}" class="slds-truncate" onclick="{!c.deletechildrow}" >Delete</a></td>       
</tr>
</aura:component>

Child Component Controller

({
     deletechildrow : function(component, event, helper)
        {

           var selectedItem = event.currentTarget;
           var index = selectedItem.dataset.record;
           alert("name ::::"+index);
           var evt = $A.get("e.c:DeleteRow");
           evt.setParams({ "deleterow": index});
           evt.fire(); 
        }
})

Parent Component:

<aura:component access="global" implements="forceCommunity:availableForAllPageTypes" controller="DemoController">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 
<aura:attribute name="rowlist" type="ChildWrapper[]"/>
<aura:handler name="del" event="c:DeleteRow" action="{!c.NavigateComponent}"/>
<c:childComponent title="Information">
        <div class="slds">
           <ui:button class="btn btn-default" press="{!c.addrow}">Add</ui:button>
        <table class="slds-table slds-table--bordered slds-table--striped">
            <thead>
            <tr>
                <th/>
                <th scope="col"><span class="slds-truncate">Name</span></th>
            </tr>
            </thead>
            <tbody>
         <aura:iteration items="{!v.rowlist}" var="wrap"  >
             <c:childList wrap="{!wrap}"/>
        </aura:iteration>
            </tbody>
        </table>
        </div> 
    </c:childComponent>
</aura:component>

Parent Component Controller

NavigateComponent : function(component,event,helper) {

                var child = component.get("v.rowlist");
                var index = event.getParam("deleterow");
                child.splice(index-1, 1);
                component.set("v.rowlist", child);
      }
  • Try replacing the delete link from <a href="#" to a button or even to a <lightning:button type="button" and use there the onclick="{!c.deletechildrow}" – Itai Shmida Feb 28 '17 at 5:31
  • If I change it to button, I would not be able to get the index of the selected element which I am currently retrieving on the data-record <a href="#"/>. How do I handle that? – ləːnə Mar 1 '17 at 3:40
  • 1
    I use <input type="button" onclick="{!c.deletechildrow}" id="{!v.wrap.Index}" class="slds-button" value="Delete" /> and on the controller: var rowId = event.target.id;. This works perfectly!! – Itai Shmida Mar 1 '17 at 5:45

Your Answer

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

Browse other questions tagged or ask your own question.