0

I have below code that has a pay date add button "Add Pay Date" which adds a row having amount, date and retry payment and remove row link. I want to grab the amount field of the row when the remove row link is clicked before deleting the row.

 <apex:pageBlockButtons location="top">
            <apex:commandButton immediate="true" action="{!addPaymentPlanDetails}" value="Add Pay Date"
                                rendered="{!shouldDisplayAddRowButton}"
                                reRender="ManyPaymentPayDates"/>
        </apex:pageBlockButtons>
        <apex:pageBlockSection id="ManyPaymentPayDates"
                               rendered="{!shouldDisplayMultiDetailSection}">
            <apex:pageBlockTable value="{!Z}" var="paymentDetails">
                <apex:column>
                    <apex:facet name="header">Amount</apex:facet>
                    <apex:inputField value="{!X.Amount__c}" required="true" onChange="Y(this);"/>
                </apex:column>
                <apex:column>
                    <apex:facet name="header">Pay Date</apex:facet>
                    <apex:inputField value="{!X.Due_Date__c}" required="true"/>
                </apex:column>
                <apex:column>
                    <apex:facet name="header">Retry Payment</apex:facet>
                    <apex:inputField value="{!X.Retry_Payment__c}" required="false"/>
                </apex:column>
                <apex:column>
                    <apex:facet name="header">Action</apex:facet>
                    <apex:commandLink value="Remove Row" action="{!deleteRowMultiple}" immediate="true"
                                      reRender="PayDateSection">
                        <apex:param assignTo="{!rowId}" value="{!X.name}" name="demo"/>
                    </apex:commandLink>
                </apex:column>
            </apex:pageBlockTable>
        </apex:pageBlockSection>
2
  • Is there an apex controller connected to this visualforce page? If so, can you edit your question to include the relevant code for this example? Jun 6, 2016 at 18:20
  • There is a controller but I need to use javascript for the same. Jun 6, 2016 at 18:33

1 Answer 1

0

The problem with apex:pageBlockTable is the the data cell value is nested under a mess of elements.

You can add an event listener to the action method. I normally use jQuery, but in JavaScript you can do this.

First add a class to your command link. I called it actions.

<apex:commandLink styleClass="actions" value="Remove Row" action="{!deleteRowMultiple}" immediate="true"
                                  reRender="PayDateSection">
    <apex:param assignTo="{!rowId}" value="{!X.name}" name="demo"/>
</apex:commandLink>

Then add this.

<script>
window.onload = function () {
   var actions = document.querySelectorAll("a.actions");
   for (var i = 0; i < actions.length; i++) {
     actions[i].addEventListener("click", getAmount, false);
    }
}
function getAmount() {
    /*
    cells[0] is the first column, so that should be Amount according to your table
    Assign amount to whatever you need to here. I just logged it for reference
    */
    var amount = this.parentNode.parentNode.cells[0].childNodes[0].innerText;
    console.log(amount);
}
</script>

You can also add an onclick method (no need for the class in this case). I prefer the event listener though.

<apex:commandLink onclick="getAmount(this)" value="Remove Row" action="{!deleteRowMultiple}" immediate="true"
                                  reRender="PayDateSection">
    <apex:param assignTo="{!rowId}" value="{!X.name}" name="demo"/>
</apex:commandLink>

Function:

function getAmount(elem) {
    var amount =   elem.parentNode.parentNode.cells[0].childNodes[0].innerText;
    console.log(amount);
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .