2

What I'm trying to do is, onblur of the amount field, the total amount event would fire and would update the parent component's total amount attribute. Im doing this so that the running total in the parent component would automatically update when the amount field of a list item is updated.

The problem now is, when I call the evt.setParams and sets the value to the "asdf" attribute, this component suddenly errors out silently, and it doesn't appear in the page anymore (all of the instances of this component does not show up in the page anymore). In addition, an error of Input too long appears after a couple of seconds (like 5 to 10 seconds).

I'm not sure what is "too long" in these set of codes. At first I thought:

  1. The value I'm sending is too long. But apparently, 3 characters aren't too long for the String data type.
  2. The attribute name of the event is too long. At first, the attribute's name wasn't really "asdf". It was a longer name. But I changed it to "asdf" and the error still remains.
  3. The name of the registered event was too long. But I changed it to like 5 characters, still, the error remains.

The solutions I've already tried:

  • I've already checked the spellings in case this is a case-sensitivity issue as suggested here, still, to no avail.

List item component

<aura:component >

  <aura:attribute name="################Record" type="Map" />

  <aura:registerEvent name="delete#################ListItem" type="c:Delete#################ListItemEvent"/>
  <aura:registerEvent name="update################TotalAmount" type="c:Update################TotalAmountEvent"/>

  <tr>
    <td>
      <lightning:input label="" placeholder="name" class="random-class-for-t-field remove-input-label" required="true" value="{!v.################Record.PaymentName}" />
    </td>
    <td>
      <lightning:input aura:id="#######DateField" type="date" label="" name="#######Date" required="true" placeholder="date" class="random-class-for-t-field remove-input-label" value="{!v.################Record.PaymentDate}" />
    </td>
    <td>
      <lightning:input aura:id="amountField" type="number" name="amount" label="" formatter="currency" step="0.01" required="true" min="0" placeholder="amount" class="random-class-for-t-field remove-input-label" value="{!v.################Record.Amount}" onblur="{!c.txt_change_paymentAmount}" />
    </td>
    <td>
      <lightning:buttonIcon iconName="utility:close" variant="bare" onclick="{! c.btn_click_removepayment }" />
    </td>
  </tr>

</aura:component>

List Item Controller

  txt_change_paymentAmount : function (component, event, helper) {
    var evt = component.getEvent("update################TotalAmount");
    evt.setParams({
      "asdf" : event.getSource().get("v.value");
    });
    evt.fire();
  }

Update Event

<aura:event type="COMPONENT" access="global" >
  <aura:attribute name="asdf" type="String" access="global" />
</aura:event>

Error encountered

enter image description here

By the way, this is being used in a lightning community, just in case this info matters.

  • Can you shorten the name of the attributes used and see if this helps – Mohith Shrivastava Feb 8 '18 at 3:59
  • I've tried it just now, shorting the aura:attributes to max 6 characters. Error remains. What's surprising is, the other event is working fine. Only this event is failing. – SamuelDev Feb 8 '18 at 4:05
  • 2
    This is a false alarm. If you'd take a look at my controller, inside my setParams, I've mistakenly added a semicolon after the event.getSource().get("v.value"). Oh the pains of a wrongly placed semicolon. – SamuelDev Feb 8 '18 at 5:02
  • You might want to add this as an answer here . – Mohith Shrivastava Feb 8 '18 at 6:07

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.