Can aura application event be fired multiple times?

Question

I have registered an application event 'ShowModalEvent' in component-1 (Table) and handler in component-2. Component-2 (Modal Dialog) is part of component-1. I have added onclick function call (to show modal) to one of the table column data.

Component-1 - Helper

generateTableWithLink : function(component, callback) {
..
..
retRecords.forEach(function(row) {
  fields.forEach(function(field){ 
    if(field.name == 'Id') {
      var showModalEvent = $A.get("e.c:ShowModalEvent");
      tableData.appendChild(document.createElement('a'));
      tableData.onclick = function() {
         this.showPopup(component, row, showModalEvent);
      }
      tableData.children[0].appendChild(document.createTextNode(row[field.name]));
    }
  }
}
..
..
},

showPopup : function(component, row, showModalEvent) {
   showModalEvent.setParams({
            "recordId" : s["Id"],
            "sObjectName" : objectName,
            "modalHeaderTitle" : title
        });
   showModalEvent.fire();
}

Application Event 'ShowModalEvent' is supposed to be fired every time the link (column data) is clicked. But here, Event is working only for the first time and throwing below error for the second try.

ERROR : Assertion Failed!: Event.setParams(): cannot modify all params in an event that has already been fired. : false

Please advise.

Answer 1

You just should not pass the event parameter.

Just change your code to this:

if(field.name == 'Id') {

  tableData.appendChild(document.createElement('a'));
  tableData.onclick = function() {
     this.showPopup(component, row );
  }
tableData.children[0].appendChild(document.createTextNode(row[field.name]));
}

and this:

showPopup : function(component, row ) {
var showModalEvent = component.getEvent("ShowModalEvent");
   showModalEvent.setParams({
            "recordId" : s["Id"],
            "sObjectName" : objectName,
            "modalHeaderTitle" : title
        });
   showModalEvent.fire();
}

Answer 2

I used a new (additional) Component event to invoke controller method of the same component. This time, showPopup() in helper fires Component Event instead of Application Event.
Added register & handler for Component Event in the same component-1 where handler calls a new action method to fire an Application event. Thus same Application Event can be fired multiple times.

Flow
Fire_ComponentEvent from showPopup() (Helper method in Cmp-1) --> Handler (in Cmp-1) --> ActionMethodToFireApplicationEvent(in Cmp-1 controller) --> Fire_ApplicationEvent --> Handler (in Cmp-2) --> Final Action method(Cmp-2)

Technically, This solution (fire an application event multiple times) works for the situation but there can be a better and easy approach to invoke child component's controller method() multiple times.