function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Yogesh Singh 03Yogesh Singh 03 

Trailhead code error.

While going through one of the lightning tutorial on trailhead [trailhead topic you can find here "https://trailhead.salesforce.com/projects/slds-lightning-components-workshop/steps/slds-lc-4" ] I feal some code is missing in the code provided here.

In this para "Create the AccountList Component" part of code provided is.

<form class="account-form" onsubmit="{!c.deleteAccount}"> <input type="hidden" value="{!account.Name}" class="account-name" /> <!-- Use a Lightning Base Component To display an icon next to the label --> <lightning:button label="Delete" iconName="utility:delete" iconPosition="left" variant="destructive" /> </form>

on click of the lightning button the form should submit, and deleteAccount event should fire but its not happing. So I added "type='Submit'" property in the lightning button and then it worked. Lightning button now looks like.
<lightning:button type='Submit' label="Delete" iconName="utility:delete" iconPosition="left" variant="destructive" />.

I know this is how it works in Javascript but i am not sure about lightning. Please let me know is this the right way or am I missing something.

Thanks


 
Artur Kolasa 7Artur Kolasa 7
Hi,
You don't have to add new attribute to lightning:button. 
In form tag you have onsubmit="{!c.deleteAccount}" this mean that you have to create JS controller for your component AccountListController and then create there function deleteAccount.  
deleteAccount: function(component, event, helper) {
    // Prevent the form from getting submitted
    event.preventDefault();

    // Get the value from the field that's in the form
    var accountName = event.target.getElementsByClassName('account-name')[0].value;
    confirm('Delete the ' + accountName + ' account? (don’t worry, this won’t actually work!)');
  }

 
Yogesh Singh 03Yogesh Singh 03
Thanks Artur

The JS Controller is already created but it didn't execute or called.
view sourceprint? 
<form class="account-form" onsubmit="{!c.deleteAccount}"> 
<input type="hidden" value="{!account.Name}" class="account-name" /> 
<!-- Use a Lightning Base Component To display an iconnext to the label --> 
<lightning:button label="Delete" iconName="utility:delete"iconPosition="left" variant="destructive" /> 
</form>


In the above HTML if type="Submit" is not mentioned in lightning:button, then on click of this button click event will fire and not form submit event and so deleteAccount function of JS controller will not execute or get called.
Correct me if I am wrong.

Thanks.
Artur Kolasa 7Artur Kolasa 7
As I understood it since you have button between tag lightning:buttons action submit is performed as default.
Please find my works sample of code and mark as best answet if this will be work for you.

AccountsController.apxc 
public class AccountsController {
  @AuraEnabled
  public static List<Account> getAccounts() {
    return [SELECT Id, name, industry, Type, NumberOfEmployees, TickerSymbol, Phone
    FROM Account ORDER BY createdDate ASC];
  }
}
​AccountList.cmp 
<aura:component controller="AccountsController">
  <aura:attribute name="accounts" type="List" />
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  <!--
    Use a data table from the Lightning Design System:
    https://www.lightningdesignsystem.com/components/data-tables/
  -->
  <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
    <thead>
      <tr class="slds-text-heading--label">
        <th scope="col"><div class="slds-truncate" title="ID">ID</div></th>
        <th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
        <th scope="col"><div class="slds-truncate" title="Type">Type</div></th>
        <th scope="col"><div class="slds-truncate" title="Number Of Employees">Number Of Employees</div></th>
        <th scope="col"><div class="slds-truncate" title="Ticker Symbol">Ticker Symbol</div></th>
        <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
        <th scope="col"><div class="slds-truncate" title="Delete">Delete</div></th>
      </tr>
    </thead>
    <tbody>
      <!-- Use the Apex model and controller to fetch server side data -->
      <aura:iteration items="{!v.accounts}" var="account">
        <tr>
          <th scope="row"><div class="slds-truncate" title="{!account.Id}">{!account.Id}</div></th>
          <td><div class="slds-truncate" title="{!account.Name}">{!account.Name}</div></td>
          <td><div class="slds-truncate" title="{!account.Type}">{!account.Type}</div></td>
          <td><div class="slds-truncate" title="{!account.NumberOfEmployees}">{!account.NumberOfEmployees}</div></td>
          <td><div class="slds-truncate" title="{!account.TickerSymbol}">{!account.TickerSymbol}</div></td>
          <td><div class="slds-truncate" title="{!account.Phone}">{!account.Phone}</div></td>
          <td>
            <form class="account-form" onsubmit="{!c.deleteAccount}">
              <input type="hidden" value="{!account.Name}" class="account-name" />
              <!--
                Use a Lightning Base Component
                To display an icon next to the label
               -->
              <lightning:button label="Delete"
                                iconName="utility:delete"
                                iconPosition="left"
                                variant="destructive"
                                />
            </form>
          </td>
        </tr>
      </aura:iteration>
    </tbody>
  </table>
</aura:component>
AccountListController.js 
({
  doInit: function(component, event, helper) {      
    // Fetch the account list from the Apex controller   
    helper.getAccountList(component);
  },
  deleteAccount: function(component, event, helper) {
    // Prevent the form from getting submitted
    event.preventDefault();

    // Get the value from the field that's in the form
    var accountName = event.target.getElementsByClassName('account-name')[0].value;
    confirm('Delete the ' + accountName + ' account? (don’t worry, this won’t actually work!)');
  }
})
AccountListHelper.js 
({
  // Fetch the accounts from the Apex controller
  getAccountList: function(component) {
    var action = component.get("c.getAccounts");
    // Set up the callback
    var self = this;
    action.setCallback(this, function(actionResult) {
     component.set('v.accounts', actionResult.getReturnValue());
    });
    $A.enqueueAction(action);
  }
})
AllAccounts.app 
<aura:application extends="force:slds">
	<c:AccountList />
</aura:application>