0

I have a .xhtml page in which there is a <p:datatable> element. Inside this table, there could be many rows, and each row has its own <h:commandButton>. It is a requirement that each row have its own button (for submitting payments). The table looks something like this:

<p:panel id="payment_method_panel" >
    <f:facet name="header">
        <h:outputText value="MyMethods" style="font-size:15px; font-family:Arial; color:#006666;" />
    </f:facet>
    <h:outputText>
        Payment methods associated with this account.
    </h:outputText>
    <br/><br/>        
    <h:commandButton value="Add/Make New Payment" />
    <p:dataTable id="methods" var="method" value="#{insuredPaymentView.paymentInstruments}" >
        <p:column style="white-space:normal;" >
            <h:commandButton id="makePaymentButton" value="Pay Now" />
        </p:column>
    <!-- other columns -->
    </p:datatable>
</p:panel>

What I hope to accomplish is to have a user click the payment button, and this action will invoke some javascript that looks like:

 <script type="text/javascript">
     $(function () {                
         $('#myContainer').containerOne();                 
         $('#makePaymentButton').click(function () {
             var container= $('#myContainer').data('container');
             /*start a payment proceedure*/
             container.makePayment({
                 paymentUuid: guid(),
                 paymentContext: 'NewBusiness', 
                 referenceNumber: '1',
                 paymentAmount: '10.00',
                 policyholderName: 'Name',
                 billingAddress: 'address',
                 billingZip: 'zip'
             });
         });
     })
 </script>

Obviously in a real scenario, those values would be dynamic based off the chosen row.

I think the issue is that the jquery #id selector for the makePaymentButton is not unique, so I suppose I need to get the unique button's ID from the row the user intended. Since there could be numerous rows, how do I reference the proper button/id?

Kalamarico
  • 5,466
  • 22
  • 53
  • 70
Ian W.
  • 53
  • 5
  • Possible duplicate question. https://www.google.lk/url?sa=t&source=web&rct=j&url=https://stackoverflow.com/questions/14460421/get-the-contents-of-a-table-row-with-a-button-click&ved=0ahUKEwjsgNTYiq_WAhXFNo8KHTTTA4cQFggiMAA&usg=AFQjCNEBDDHu-ucrKADCcCmBo2aAw9vADQ – Thusitha Sep 18 '17 at 15:49
  • Not what I was looking for, but thanks. That question seeks to get all the row data after a click. I just want the javascript to acknowledge which specific button was clicked for other purposes (in this case, rendering a modal window). – Ian W. Sep 18 '17 at 16:15
  • Don't use a commandButton for this... and in addition, why not add an 'onclick' on the commandButton (or its replacement) – Kukeltje Sep 18 '17 at 21:22

0 Answers0