Salesforce Developer Community

Collen Mayer 6
NEWBIE
120 Points
Member since 2016

Chatter

Feed
0

Best Answers
0

Likes Received
0

Likes Given
25

Questions
27

Replies

Delete button not functioning correctly on VF page

On my page, I've got a table of rows. At the bottom of the table I have an "Add Row" button, which works fine. Each row has a "Delete" button, which should remove the row on the page immediately, and delete it from the database on "Save." At the first delete, the page re-renders successfully. However, the delete functionality begins acting very strange if I try to delete two rows (on the second "click" of a delete button) before saving; sometimes the wrong row is deleted from the page, and then a different row is deleted from the table. I've tried every form of debugging I can, but cannot figure out what's going on. I suspect it has something to do with a counter getting off with the second delete, but I'm not sure. I'd really appreciate somebody giving thoughts on what I'm doing wrong.

Extension:

public with sharing class PayrollAuthorization_extn {
   
    public list <PA_Distribution__c> PayrollDistributionList {get; set;}
    public Payroll_Authorization__c PA;
    public PA_Distribution__c del;
     public String rowID {get;set;}
    public List<PA_Distribution__c> delProgramList {get; set;}
 
    
    public PayrollAuthorization_extn(ApexPages.StandardController controller) {
        
      PA = (Payroll_Authorization__c)controller.getRecord();
      PayrollDistributionList = [Select Id, Name, Program__r.Name, Program_Percent__c, Program_as_Number__c
             From PA_Distribution__c
              Where Payroll_Authorization__r.id =: controller.getId()
            ];  
    delProgramList = new List<PA_Distribution__c>();            
    }
    
    public void addRow(){
         PayrollDistributionList.add(new PA_Distribution__c(    Payroll_Authorization__c = PA.id));
    }
    
    public PageReference SavePA (){
        upsert PA;
        upsert PayrollDistributionList;
        System.debug ('Upsert:' + PayrollDistributionList);
        delete delProgramList;
        System.debug ('Delete:' + delProgramList);
        return (new ApexPages.StandardController(PA)).view();
    }
    
    public void deleteRow(){
        

        rowID =ApexPages.currentPage().getParameters().get('RowID');
        
        For (Integer i=0; i<PayrollDistributionList.size(); i++){
        del= PayrollDistributionList[i];
            If (del.Id == rowID) {
                
                System.debug('Delete index: ' + i +  PayrollDistributionList[i]);
                PayrollDistributionList.remove(i);
                System.debug('List remaining is ' + PayrollDistributionList );
                
                If(del.Id <> null) delProgramList.add(del);
                System.debug ('Detele these: ' + delProgramList);
                break;
            }
            
        }
       }
    
}

My page:

<apex:page standardController="Payroll_Authorization__c" sidebar="false" doctype="html-5.0" standardStylesheets="false" extensions="PayrollAuthorization_extn" applyBodyTag="true" lightningStylesheets="true">
    <head>
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1"/>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <style>
          .form-control {
              padding: 6px !important;
          }
          .btn-info {
            color: #fff!important;
            background-color: #5bc0de !important;
            border-color: #46b8da !important;
            background-image: none !important;
            padding: 8px 20px !important;
        }
         .table>thead>tr>th{
                vertical-align: top !important;
                text-align: left !important;
          }
          .table>tbody>tr>td{
                vertical-align: top !important;
                text-align: left !important;
          }
          .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
                padding: 4px !important;
            }
            .list-group-item {
                padding: 6px 15px !important;
            }
      </style>
    <apex:outputPanel id="scriptPanel">
        <script>
              
        function calctotal(){
            //   alert ("caltotal" + {!PayrollDistributionList.size});
              var tempRowTotal=0;
              var percenttotal= 0;
            for(var i=1; i<={!PayrollDistributionList.size};i++ ){
                  
                  tempRowTotal = ($('.wh'+i).val()!= null && $('.wh'+i).val() != '')?parseFloat($('.wh'+i).val()):0.0;
                  percenttotal  += tempRowTotal;
                  
                  }
            return percenttotal;   
        }
          
        function calcRow(){
            //   alert ("calrow");
              
            var tempRowTotal=0;
             var percenttotal= 0;
               percenttotal= calctotal();
             for(var i=1; i<={!PayrollDistributionList.size};i++ ){    
              tempRowTotal = ($('.wh'+i).val()!= null && $('.wh'+i).val() != '')?parseFloat($('.wh'+i).val()):0.0;
              $('.wp' + i).text(((tempRowTotal * 100)/percenttotal).toFixed(2)+'%');
              $('.percenttotal').text(percenttotal.toFixed(2)+'%');        
              }
          }
            $(document).ready(function(){
                  {
                      calcRow();
                   }
    
          });    
    
        </script>
       </apex:outputPanel>
        <script>
    
        </script>
        </head>
    <body>
        <apex:form >
            <apex:pageBlock title="Payroll Distribution" id="er" >
            <div align="center" draggable="false" style="font-size:13px; margin-bottom:4px"  >
                <apex:commandButton value="Save" action="{!SavePA}" styleclass="btn btn-info" style="" />&nbsp;&nbsp;
                <apex:commandButton value="Cancel" action="{!Cancel}" styleclass="btn btn-info" immediate="true"/>
            </div>
            <div class="container-flud" style="font-size: 11.5px;">
                <apex:pageMessages ></apex:pageMessages>
                <div class="col-md-12" style="margin-bottom: -15px;">
                    <ul class="list-group">      
                        <li class="list-group-item row" style="background-color: #702342;color: #fff;padding: 6px 10px;">
                            <h4 style="margin: 2px 0px;font-size: 12px;font-weight: bolder;">Payroll Authorization</h4>
                        </li>
                    </ul>
    
          <div class="col-md-12" style="margin-bottom: 15px;">
            <ul class="list-group">      
                <li class="list-group-item row" style="background-color: #702342;color: #fff;padding: 6px 10px;">
                    <h4 style="margin: 2px 0px;font-size: 12px;font-weight: bolder;">Payroll Distributions</h4>
                </li>
            </ul>
            </div>
        <table class="table table-bordered" >
                       
                    <thead>
                    <tr>
                        <th>
                            Action
                        </th>    
                        <th>
                            Program
                        </th>
                        <th>
                            Percentage worked
                        </th>
                        <th>
                            Percentage total
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                        <apex:variable var="SelectedRowId" value="{!0}"/>
                        <apex:variable value="{!1}" var="index"/>  
                    <apex:repeat value="{!PayrollDistributionList}" var="pd">
                        <tr>
                            <td>
                                <apex:commandButton value="Delete" action="{!deleteRow}" immediate="true" reRender="er, scriptPanel" >
                                     <apex:param name="RowID" value="{!pd.ID}"/>
                                  </apex:commandButton>
                            </td>
                            <td><apex:inputfield value="{!pd.Program__c}"   style="Width: 50%"/></td>
                            <td ><apex:inputfield value="{!pd.Program_Percent__c}" styleClass="wh{!index}" onkeyup="calcRow()"/> </td>
                            <td Class="wp{!index}">
                                0%
                            </td>
                        </tr>
                        <apex:variable value="{!index+1}" var="index"/>
                       
                    </apex:repeat>
                </tbody>
            <tfoot> <tr>
                <th/>
                <th/>
                    <th class="percenttotal">
                        0.0%
                    </th>
                    <th>
                        100.00%
                    </th>
                  </tr></tfoot>
              </table>
              </div>
               </div>
        <apex:commandButton action="{!addRow}" value="Add Program" immediate="true" reRender="er, scriptPanel"/>
            </apex:pageBlock>
            </apex:form>
        
        </body>
    </apex:page>

Collen Mayer 6
October 31, 2017
Like
0