Answers

• allan Posts: 61,656Questions: 1Answers: 10,094 Site admin

  October 2022

  Hi,

  It appears to work okay here. Could you link to a page showing the issue so I can help debug it please?

  Thanks,
  Allan
• tannernd Posts: 3Questions: 2Answers: 0

  October 2022

  Hi Allan, I currently have it in a dev environment on my local network. Here is an example code block that I use to initialize a datatable and editor.

  editorAddPmt = new $.fn.dataTable.Editor( {
          ajax: {'url':my_ajax_obj.ajax_url,
              type: "POST",
              data: {dp_action:'setAddPmt', table:'app_user_debt_add_pmt'},
              },
          table: "#addlpayments",
          idSrc:  'income_id',
          template: '#addl_pmt_modal',
          fields: [ {
                  label: "Income ID:",
                  name: "income_id",
                  type: "hidden"
              },{
                  label: "Income Item:",
                  name: "item",
              },{
                  label: "Group:",
                  name: "group",
                  data: "group_id",
                  type: "select"
              },{
                  label: "Frequency:",
                  name: "frequency",
                  data: "frequency",
                  type: "select"
              }, {
                  label: "Planned Amount:",
                  name: "plan_amt",
                  attr: {
                      type: "number",
                      step: ".01"
                  } 
              },{
                  label: "Power Payment Amt:",
                  name: "add_debt_pmt",
                  attr: {
                      type: "number",
                      step: ".01"
                  } 
              },{
                  label: "Next Date:",
                  name: "next_date",
                  type: "datetime",
                  attr: {
                          min:moment().format('YYYY-MM-DD')
                      },
                  def:moment().format('YYYY-MM-DD')
              }, {
                  label: "User ID",
                  name: "userid",
                  type: "hidden",
                  def: php_vars.userid
              }
          ]
      } );
       
      var tableAddPmt = $('#addlpayments').DataTable( {
          dom: "Bfrtip",
          ajax: {'url':my_ajax_obj.ajax_url,
              type: "POST",
              data: { action : 'get_datatables_addl_pmt'},
              }, 
          paging: false,
          language: {
              "emptyTable": "Click New to add an Income."
            },
          columns: [
              
              { data: "income_id" },
              { data: "item" },
              { data: "plan_amt", render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) },
              { data: "add_debt_pmt", render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) }
              
          ],
          columnDefs:[{ "visible": false, "targets": [0] }],
          select: true,
          paging: false,
          searching: false,
          ordering: false,
          info:false,
          buttons: [
              { extend: "create", 
                  text:'<div class="debt-icons"><i class="fa fa-plus-circle"></i></div>', 
                  editor: editorAddPmt,
                  formTitle:'Enter an Additional Payment',
                  formMessage:'Enter an additional payment that you can apply to your debt.',
                  formButtons:'Add Payment' },
      
              { extend: "edit", 
                  text:'<div class="debt-icons"><i class="fa fa-edit"></i></div>',     
                  editor: editorAddPmt,
                  formTitle:'Change an Additional Payment',
                  formMessage:'Change the additional payment information.',
                  formButtons:'Change Payment'  }
          ],
          "initComplete": function(settings, json) {
              setupDone = true;           
            }
      } );
     
      editorAddPmt    
      .on( 'submitSuccess', function( e, json, data ) {
          get_debt_summary();
          $('#payoffMethod').val(0);
          tableAddPmt.ajax.reload( null, false );
          lowBalPayoff.ajax.reload( null, false );
          highIntPayoff.ajax.reload( null, false );
          
      } ).on( 'onInitEdit', function () {
          editorAddPmt.disable('item');
          editorAddPmt.hide('group');
          editorAddPmt.hide('frequency');
          editorAddPmt.disable('plan_amt');
          editorAddPmt.hide('next_date');
      } ).on( 'onInitCreate', function () {
          editorAddPmt.enable('item');
          editorAddPmt.show('group');
          editorAddPmt.show('frequency');
          editorAddPmt.enable('plan_amt');
          editorAddPmt.show('next_date');
      } ).on( 'open', function ( e, mode, action ) {
          $('div.DTED').find('div.modal-dialog').addClass('modal-dialog-slideout');
      } ).on( 'preSubmit', function ( e, mode, action ) {
          var plannedAmt = this.field( 'plan_amt');
          var addDebtAmt = this.field( 'add_debt_pmt');
          var plannedAmtVal = parseFloat(plannedAmt.val());
          var addDebtAmtVal = parseFloat(addDebtAmt.val());
          if ( plannedAmtVal < addDebtAmtVal ) {            
              addDebtAmt.error( 'Value must be less than Planned Amount' );                           
          }   
          var item = this.field( 'item');
          if ( item.val() == '' ) {            
              item.error( 'Please enter an item name' );                           
          }  
          if ( this.inError() ) {
              return false;
          }
      } );
  

  Please let me know what additional information I can provide.
• allan Posts: 61,656Questions: 1Answers: 10,094 Site admin

  October 2022

  There is nothing similarly obvious there I'm afraid. I'd need to be able to debug the application I think.

  For example, does preSubmit trigger? Or is there a background element that has a higher z-index? Or there might be something else I've not thought of.

  Allan