DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Delete button not processing

Delete button not processing

bbrindzabbrindza Posts: 316Questions: 73Answers: 1
in Editor

When selecting a record from a row and using the delete button to remove the row nothing is processed. The dialog box just stays on the screen. I have no error in the console log . Having a problem tracking down this issue.

Answers

  • allanallan Posts: 63,516Questions: 1Answers: 10,473 Site admin

    Can you show me the code you are using to configure the Editor and for the delete pop up?

    Thanks,
    Allan

  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1 
    $(document).ready( function () {

 editor = new $.fn.dataTable.Editor( {
    ajax: {
        url: "ssp_HourlySIA.php",
         idSrc: "DT_RowId",
         data: function ( d ) {
           if($('#chg_loc').val() == null){
                    d.locationCode =  currentLocationCode;
             }else{
                    d.locationCode = $('#chg_loc').val();
            }
         }
    },
     table: "#approvalTable",
     formOptions: {
         inline: {
             onBlur: 'submit',
             submit: 'allIfChanged'
         }
     },
     template: '#customForm',
     fields: [
             {label: "Employee Name",
              name: "HRNAME",
              type:  "display",
             },
             {label: "Employee Number",
              name: "HREMPN",
              type:  "display",
             },
             {label: "Percent of Increase",
              name:  "HRWPER",
             attr: {maxlength:4, style:"height:20px; width:50px; font-size: 0.90em;"}
             },
             {label: "Review Score",
              name:  "HRWREV",
    color: #CC3333;",}
             attr: {maxlength:3, style:"height:20px; width:50px; font-size: 0.90em;",}
              }, 
             {label: "Hourly Rate",
              name:  "HRYREG",
              type:  "display",
            }, 
             {label: "Amount of Increase",
              name:  "HRWAMT",
              type:  "display",
              },
              {label: "New Hourly Rate",
               name:  "HRWNEW",
               type:  "display",
              }, 
              {label: "Mid",
               name:  "HRMID",
               type:  "display",
               },
              {label: "Effective Date",
               name:  "HRSEDT",
               type:  "display",
               },
               { //type:  "textarea",
                label: "Comments",
                name: "HRWCOM",
                type:  "display",
               },
            // Plant Manager Approval Fields
               {label: "Name",
                name: "HRWMNA",
                type:  "display",
               },
               {label: "Employee Number",
                name: "HRWMGR",
                type:  "display",
               },
               {label: "Approval Date",
                name: "HRWMDT",
                type:  "display",
                },
                {label: "Approval Time",
                 name: "HRWMTM",
                 type:  "display",
                 },
              // Operations Director  Fields
                 {label: "Name",
                  name: "HRWDNA",
                  type:  "display",
                 },
                 {label: "Employee Number",
                  name: "HRWDIR",
                  type:  "display",
                 },
                 {label: "Approval Date",
                  name: "HRWDDT",
                  type:  "display",
                 },
                 {label: "Approval Time",
                  name: "HRWDTM",
                  type:  "display",
                  },
               // Operations Vice President Approval Fields
                  {label: "Name",
                   name: "HRWVNA",
                   type:  "display",
                  },
                  {label: "Employee Number",
                   name: "HRWVIC",
                   type:  "display",
                  },
                  {label: "Approval Date",
                   name: "HRWVDT",
                   type:  "display",
                  },
                  {label: "Approval Time",
                   name: "HRWVTM",
                   type:  "display",
                  },
               // HR Vice President Approval Fields
                  {label: "Name",
                   name: "HRWHNA",
                   type:  "display",
                  },
                  {label: "Employee Number",
                   name: "HRWHR",
                   type:  "display",
                  },
                  {label: "Approval Date",
                   name: "HRWHDT",
                   type:  "display",
                  },
                  {label: "Approval Time",
                   name: "HRWHTM",
                   type:  "display",
                   },
                 ],
        } );

// Activate an inline edit on click of a table cell
  $('#approvalTable').on( 'click', 'tbody td:not(:first-child):not(\'.approvalCheckbox\')', function (e) {
           if ( userDepartment == '1214' || userDepartment == '1213' || userElementAccess =='Y') {
                editor.inline( this , {onBlur: 'submit',
                                       submit: 'allIfChanged'} );
              }
  });

// Field validation function
  editor.on( 'preSubmit', function ( e, d ) {
        var increasePercent = this.field( 'HRWPER');
        var reviewScore = this.field( 'HRWREV');
        
        if ( increasePercent.val() == '' ) {
             increasePercent.error( 'Increase Percent Must Be Numeric' );
            return false;
        }
        if ( reviewScore.val() == '' ) {
            reviewScore.error( 'Review Score Must Be Numeric' );
            return false;
        }
 
        return true;
    } );
  
  //Clear all approval fields on Increase Percent change
  $( editor.field( 'HRWPER' ).input() ).on( 'keydown', function (e) {
          //**Reset Plant Manager Approval function
          editor.field( 'HRWMGR' ).val( 0);
          editor.field( 'HRWMNA' ).val( '');
          editor.field( 'HRWMDT' ).val( '');
          editor.field( 'HRWMTM' ).val( '');
        
          //**Reset  Operations Director Approval function
          editor.field( 'HRWDIR' ).val( 0);
          editor.field( 'HRWDNA' ).val( '');
          editor.field( 'HRWDDT' ).val( '');
          editor.field( 'HRWDTM' ).val( '');

         //**Reset  Operations VP Approval function
          editor.field( 'HRWVIC' ).val( 0);
          editor.field( 'HRWVNA' ).val( '');
          editor.field( 'HRWVDT' ).val( '');
          editor.field( 'HRWVTM' ).val( '');

          //**Reset Human Resources VP Approval function
          editor.field( 'HRWHR' ).val( 0);
          editor.field( 'HRWHNA' ).val( '');
          editor.field( 'HRWHDT' ).val( '');
          editor.field( 'HRWHTM' ).val( '');
       
    } );

  //** Plant Manager Approval function
  $('#approvalTable').on( 'change', 'input.plantManagerApprovalCheckbox', function () {
    
    var row =  table.row( $(this).closest('tr') );

    if($(this).prop('checked')){
        editor
            .edit( row.node(), false )
            .set( 'HRWMGR', row.data().HRMGE2 )
            .set( 'HRWMNA', row.data().HRMGN2 )
            .set( 'HRWMDT', approvedDate )
            .set( 'HRWMTM', approvedTime )
            .submit();
    }else{
        editor
            .edit( row.node(), false )
            .set( 'HRWMGR', 0)
            .set( 'HRWMNA', '')
            .set( 'HRWMDT','' )
            .set( 'HRWMTM', '' )
            .submit();
        };
  } );

//**Operations Director Approval function
  $('#approvalTable').on( 'change', 'input.operationDirectorApprovalCheckbox', function () {
        var row =  table.row( $(this).closest('tr') );

        if($(this).prop('checked')){
            editor
                .edit( row.node(), false )
                .set( 'HRWDIR', row.data().HRMGE3 )
                .set( 'HRWDNA', row.data().HRMGN3 )
                .set( 'HRWDDT', approvedDate )
                .set( 'HRWDTM', approvedTime )
                .submit();
        }else{
            editor
                .edit( row.node(), false )
                .set( 'HRWDIR', 0)
                .set( 'HRWDNA', '')
                .set( 'HRWDDT','' )
                .set( 'HRWDTM', '' )
                .submit();
            };
      } );
  
//**Operations VP Approval function
  $('#approvalTable').on( 'change', 'input.operationVPApprovalCheckbox', function () {
        
        var row =  table.row( $(this).closest('tr') );

        if($(this).prop('checked')){
            editor
                .edit( row.node(), false )
                .set( 'HRWVIC', row.data().HRMGE4 )
                .set( 'HRWVNA', row.data().HRMGN4 )
                .set( 'HRWVDT', approvedDate )
                .set( 'HRWVTM', approvedTime )
                .submit(); 
        }else{
            editor
                .edit( row.node(), false )
                .set( 'HRWVIC', 0)
                .set( 'HRWVNA', '')
                .set( 'HRWVDT','' )
                .set( 'HRWVTM', '' )
                .submit();
            }; 
      } );
  
//**Human Resources VP Approval function
  $('#approvalTable').on( 'change', 'input.HRVPApprovalCheckbox', function () {
        
        var row =  table.row( $(this).closest('tr') );

        if($(this).prop('checked')){
            editor
                .edit( row.node(), false )
                .set( 'HRWHR', row.data().HRMGE5 )
                .set( 'HRWHNA', row.data().HRMGN5 )
                .set( 'HRWHDT', approvedDate )
                .set( 'HRWHTM', approvedTime )
                .submit();
        }else{
            editor
                .edit( row.node(), false )
                .set( 'HRWHR', 0)
                .set( 'HRWHNA', '')
                .set( 'HRWHDT','' )
                .set( 'HRWHTM', '' )
                .submit();
            };
      } );
  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1 

    ... Continued JS

table = $('#approvalTable').DataTable( {

        rowCallback: function(row, data, index){
             if ( userDepartment == '1214' || userDepartment == '1213' || userElementAccess =='Y'){
                $(row).find('td:eq(8)').css('font-weight', 'bold'); // text bold
                $(row).find('td:eq(9)').css('font-weight', 'bold'); // text bold
                $(row).find('td:eq(8)').css('color', '#0000ff'); // text color
                $(row).find('td:eq(9)').css('color', '#0000ff'); // text color
             }else{
                $(row).find('td:eq(7)').css('font-weight', 'bold'); // text bold
                $(row).find('td:eq(8)').css('font-weight', 'bold'); // text bold
                $(row).find('td:eq(7)').css('color', '#0000ff'); // text color
                $(row).find('td:eq(8)').css('color', '#0000ff'); // text color
              } 
     },

        pageLength: 15,
        dom: '<"top"l>Bfrtip', 
        fixedHeader: true,
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], 
        iDisplayLength: 15,
        sPaginationType: 'full_numbers',
        oLanguage: {sSearch: 'Table Search: '},
        order: [[0, 'asc'], [6, 'asc']],
        },

        ajax: {
           url: "ssp_HourlySIA.php",
            data: function ( d ) {
                   if($('#chg_loc').val() == null){
                        d.locationCode =  currentLocationCode;
                   }else{
                        d.locationCode = $('#chg_loc').val();
                  }
            }
       },
       columns: [
            { data: "numeric_year_month", "visible": false },
            
            { orderable: false,
              className: 'select-checkbox',
              data: null,
              defaultContent: '',
              width: '8px',
              },
            {
              className:     'detail-level-control',
              orderable:      false,
              data:           null,
              defaultContent: '',
              width: '5px'
            },
            { data: "HRLOCD"},
            { data: "month_name", sortable: false},
            { data: "HREMPN" },
            { data: "HRNAME" },
            { data: "HRTITL" }, 
            { data: "HRJBGD" },    
            { data: "HRWPER", render: $.fn.dataTable.render.number( ',', '.', 1, '', '%' ) }, 
            { data: "HRWREV" }, 
            { data: "HRYREG", render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) },   
            { data: "HRWNEW", render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) }, 
            { data: "HRWAMT", render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) }, 
            { data: "HROCOM", render: $.fn.dataTable.render.number( ',', '.', 1, '', '%' ) }, 
            { data: "HRNCOM", render: $.fn.dataTable.render.number( ',', '.', 1, '', '%' ) }, 
 
            // ** Comments Button
            {sortable: false,
                "render": function ( data, type, full, meta ) {
                if(full.HRWCOM.trim() == ""){
                      return '<button class="gray button" onclick="openCommentDialog('+ full.HREMPN +', \''+ full.HRNAME +'\' )">Comments</button>';
                }else{
                      return '<button class="blue button" onclick="openCommentDialog('+ full.HREMPN +', \''+ full.HRNAME +'\' )">Comments</button>';
                     }
               }// End - "render": function ( data, type, full, meta )   
            },
       
            // ** Plant Manager Approval checkbox
            {sortable: true,
             className: 'approvalCheckbox',
              "render": function ( data, type, full, meta ) {

             //  if(full.HRMGE2 == userEmployeeNumber &&  full.HRWDIR  == 0 && full.HRWPER != .00 && full.HRWREV != 0){   
                 if(full.HRMGE2 == userEmployeeNumber &&  full.HRWDIR  == 0 && full.HRWREV != 0){  

                    if(full.HRWMGR == 0){   
                            return '<input type="checkbox"  class="plantManagerApprovalCheckbox">'
                    }else{
                            return '<input type="checkbox"  class="plantManagerApprovalCheckbox" checked>'
                    }
                    
              }else{
                     return full.HRWMNA 
              }
             }// End - "render": function ( data, type, full, meta )   
            },

            // ** Operation Director Approval checkbox
            {sortable: true,
             className: 'approvalCheckbox',
             "render": function ( data, type, full, meta ) {

                 if(full.HRMGE3 == userEmployeeNumber && full.HRWMGR != 0 && full.HRWVIC  == 0){   

                       if(full.HRWDIR == 0){    
                              return '<input type="checkbox"  class="operationDirectorApprovalCheckbox">'
                       }else{
                              return '<input type="checkbox"  class="operationDirectorApprovalCheckbox" checked>'
                       }
                       
                 }else{
                      return full.HRWDNA 
                  }
                }// End - "render": function ( data, type, full, meta )   
               },

            // ** Operation Vice President Approval checkbox
               {sortable: true,
                className: 'approvalCheckbox',
                "render": function ( data, type, full, meta ) {

                    if(full.HRMGE4 == userEmployeeNumber &&  full.HRWDIR  != 0 && full.HRWHR  == 0){   

                          if(full.HRWVIC == 0){ 
                                return '<input type="checkbox"  class="operationVPApprovalCheckbox">'
                          }else{
                                return '<input type="checkbox"  class="operationVPApprovalCheckbox" checked>'
                          }
                          
                    }else{
                      return full.HRWVNA 
                    }
                   }// End - "render": function ( data, type, full, meta )   
                  },

                    // ** HR Vice President Approval checkbox
                  {sortable: true,
                    className: 'approvalCheckbox',
                    "render": function ( data, type, full, meta ) {
      
                    if(full.HRMGE5 == userEmployeeNumber &&  full.HRWVIC != 0){    

                       if(full.HRWHR == 0){ 
                             return '<input type="checkbox"  class="HRVPApprovalCheckbox">'
                       }else{
                             return '<input type="checkbox"  class="HRVPApprovalCheckbox" checked>'
                        }
                 }else{
                      return full.HRWHNA 
                 }
                }// End - "render": function ( data, type, full, meta )   
               },

               // *** Hidden columns  
               { data: "HRMIN", "visible": false },
               { data: "HRMID", "visible": false },
               { data: "HRMAX", "visible": false },
               { data: "HRMGNA", "visible": false },
               { data: "HRDNAM", "visible": false },
               { data: "HRDLIN", "visible": false },
               { data: "HRSEDT", "visible": false },
               { data: "HRMGN2", "visible": false },
               { data: "HRMGN3", "visible": false },
               { data: "HRMGN4", "visible": false },
               { data: "HRMGN5", "visible": false },
           ],
       columnDefs: [   
                      {"className": 'dt-center',
                        "targets": [ 16]
                      },                  
                   ],

                   keys: {
                           columns: [9, 10 ],
                           keys: [ 9 ],
                           editor: editor,
                           editOnFocus: true,
                   },
                   
                  select: {
                      style:    'os',
                      selector: 'td:first-child'
                  },

                   buttons: [
                        
                             { extend: "edit",   editor: editor },
                             { extend: "remove", editor: editor }
                          ]
    } );

 table.column( 1 ).visible( false );
 
 document.getElementsByClassName('dt-button')[0].style.visibility = 'hidden';
 document.getElementsByClassName('dt-button')[1].style.visibility = 'hidden';

 if ( userDepartment == '1214'|| userDepartment == '1213' || userElementAccess =='Y') {

     table.column( 1 ).visible( true );
        
     document.getElementById('refreshTableDataButton').style.display = 'inline';
     document.getElementById('uploadApprovedSalariesButton').style.display = 'inline';
     document.getElementById('emailAddressMaintenanceButton').style.display = 'inline';
     
     document.getElementsByClassName('dt-button')[0].style.visibility = 'visible';
     document.getElementsByClassName('dt-button')[1].style.visibility = 'visible';
    }

 $('.chosen-approverEmailSelect').on('change', function(evt, params) {
     $("#emailApprovalNotificationButton").button("option", "disabled", false);   
  });

//Select all text in Percent of Increase field on focus
 editor.field( 'HRWPER' ).input().on( 'focus', function () {
     input.select();
 });

// Select all text in Review Score field on focus
  editor.field( 'HRWREV' ).input().on( 'focus', function () {
      input.select();
 });

//******************************************************
  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1
    edited September 2018

    //

  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1 

    ... Continued JS

//Event listener for opening and closing detail level 1
  $('#approvalTable tbody').on('click', 'td.detail-level-control', function () {
     var tr = $(this).closest('tr');
     var row = table.row( tr );

     if ( row.child.isShown() ) {
         // This row is already open - close it
         $('div.slider', row.child()).slideUp( function () {
             row.child.hide();
             tr.removeClass('shown');
         } );
     }
     else {
         // Open this row and call getChildDetail function
         row.child( formatChildRow(row.data()), 'no-padding' ).show();
         tr.addClass('shown');

         $('div.slider', row.child()).slideDown();
     }
  } );

  $('div.dataTables_filter input').focus();
  
});//END $(document).ready(function()
  • allanallan Posts: 63,516Questions: 1Answers: 10,473 Site admin

    That all looks fine. There isn't anything fancy being done for the remove action that I can see, just a standard:

    { extend: "remove", editor: editor }

    So the follow up question is: what is the server returning to the Ajax request for the delete?

    Thanks,
    Allan

  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1

    That is the odd thing . The button does not appear to be executing the Ajax.

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.