Apex Code Development You need to sign in to do that
Don't have an account?
Collen Mayer 6 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:
My page:
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="" />
<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>