Blank editor window pops up.

classic12

I cant show the site as it has customer info on there.

I use the following code to get data from various tables ( this is invoice data)

Each time it runs I get a editor window popup with no info just a update Invoice button

Any ideas what I am doing wrong to trigger this ?

Cheers

Steve Warby.

getInvoices=function(){

// check if customer already selected. If so dont run the query
        if (currentCustID !== selectedCustID )
        {
        currentCustID = selectedCustID;
  // create editor      
        editorInvoices = new $.fn.dataTable.Editor( {
        ajax :  { 
                       'url' :  'http://www.xxx.com/php/xxxx.php',
                       "type": "POST",
                       "data": {
                                        'selectedCustID': selectedCustID
                                   }
                                        
                  },
        table: "#dtInvoices",
        //template: '#customForm',
        fields: [ 
            {
                label: "Inv ID:",
                name: "invoice.InvID"
            },
               {
                label: "Del Type:",
                name: "invoice.delMethod",
                type: 'radio',
                options: [
                    'Collected',
                    'Own Van',
                    'Hermes STD',
                    'Hermes Next Day',
                    'Other']},
            {
                label: "Pay Type:",
                name: "invoice.payMethod",
                type: 'radio',
                options: [
                    'Cash',
                    'Cheque',
                    'Account',
                    'PayPal',
                    'Bacs',
                    'Card']
            }, {
                label: "Order Number:",
                name: "invoice.orderNum"
            }, {
                label: "Notes",
                name: "invoice.notes"
            }, {
                label: "Inv Date:",
                name: "invoice.invDate"
            }, {
                label: "Pay Date:",
                name: "invoice.payDate"
            }
            

                ]
        

            } );
    
          editorInvoices.on('initEdit', function (val) {
          editorInvoices.disable(["invoice.InvID"]);
        });
        
         editorInvoices.on('initCreate', function () {
         //alert('on create ');
          editorInvoices.set( 'CustID', selectedCustID );
          editorInvoices.disable(["invoice.InvID"]);
        });
        
        editorInvoices.title('Edit entry').buttons('Update Invoice').edit(this);
  
// set the datatables up..........................................

        $("#dtInvoices").DataTable().destroy(); 
        $('#dtInvoices').empty();
        tableInvoices = $('#dtInvoices').DataTable( {
        scrollY: "200px",
        scrollCollapse: true,
        paging: false,
        info: false,
        select: true,
        ordering: true,
        order: [[0, 'desc']],
        dom: "Bfrtip",
        autoWidth : true,
        responsive: true,
        bSort:false,
                   // bServerSide: true,
        ajax :       { 
                            'url' :  'http://www.xxx.com/php/xxx.php',
                            "type": "POST",
                                  "data": {
                                                'selectedCustID': selectedCustID
                                              }
                                        
                          },
                   
        columns: [
            { data: "invoice.InvID" ,  responsivePriority: 2, title : 'Inv No'},
            { data: "invoice.delMethod" , responsivePriority: 2,  title : 'Del Type'},
            { data: "invoice.payMethod" , responsivePriority: 2,  title : 'pay Type'},
            { data: "invoice.invDate" ,  title : ' Inv Date'},
            { data: "invoice.payDate" ,  title : ' Pay Date'},
            { data: "invoice.invNett" ,  title : ' Nett'},
            { data: "invoice.invTax" ,   title : ' Vat'},
            { data: "invoice.invTotal" ,   title : ' Total'},
            { data: "invoice.orderNum" ,   title : ' Order Num'},
            { data: "invoice.notes" ,   title : ' Notes'},
            { data: "invoice.CustID" ,   title : ' Cust No'}
            
        ],
        
        buttons: [
            { extend: "create", editor: editorInvoices },
            { extend: "edit",   editor: editorInvoices },
            { text: "Refresh Details",
            action: function (e, dt, node, config) {
                getInvoices();}

            }
        ]
       // console.log('data returned = '+data);
    } );

      $('#dtInvoices').on( 'select.dt', function ( e, dt, type, indexes ) {
      //var data = dt.rows(indexes).data();
      selectedInvoiceID = tableInvoices.cell('.selected', 0).data();
      console.log('selectedInvoiceID = '+ selectedInvoiceID);
      
        } );
        
        $('#dtInvoiceDetails_search').on( 'keyup', function () {
        tableInvoiceDetails
        .columns(6)
        .search( this.value )
        .draw();
} ); 
}
}

php

include( "DataTables.php" );


// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'invoice' , 'InvID')
    ->fields(
        Field::inst( 'invoice.InvID' ),
        Field::inst( 'invoice.CustID' ),
        Field::inst( 'invoice.invDate' ),
        Field::inst( 'invoice.payDate' ),
        Field::inst( 'invoice.delMethod' ),
        Field::inst( 'invoice.payMethod' ),
        Field::inst( 'invoice.invNett' ),
        Field::inst( 'invoice.invTax' ),
        Field::inst( 'invoice.invTotal' ),
        Field::inst( 'invoice.vatRate' ),
        Field::inst( 'invoice.orderNum' ),
        Field::inst( 'invoice.notes' )
            )
    
    ->process( $_POST )
    ->json();

classic12

Bump on this guys.

Alan I can send a private link to show the problem if that helps.

Cheers

Steve Warby

classic12

Okay I have stripped down the app to just get one record in the database and no other datatables.

What am I doing wrong here ?

http://www.surplusanywhere.com/popupProblem

php code

include( "DataTables.php" );


// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'customers' , 'custID')
    ->fields(
        Field::inst( 'customers.custID' ),
        Field::inst( 'customers.companyName' ),
        Field::inst( 'customers.address1' ),
        Field::inst( 'customers.address2' ),
        Field::inst( 'customers.address3' ),
        Field::inst( 'customers.Post_Code' ),
        //Field::inst( 'customers.Mobile' ),
        //Field::inst( 'customers.Telephone' ),
        
        Field::inst( 'contacts.custID' ),
        Field::inst( 'contacts.FirstName' )
            )

    ->leftJoin( 'contacts', 'customers.custID', '=', 'contacts.custID' )    
    ->where('customers.custID', '501', '=')
    ->process( $_POST )
    ->json();

client code

//version 5 adding CKEditor
//https://editor.datatables.net/plug-ins/field-type/editor.ckeditor

function Main() {
  NSBPage.appendChild(rowHeadHome);
  }
var currentPage; // the page we are on
var selectedPage; // the selected page from the Hamburger
var headerHeight;



var currentCustomerID = 0;
var currentContactID = 0;
var currentInvoiceID = 0;
var currentPurchaseID = 0;
var currentQuoteID = 0;

var selectedCustomerID;
var selectedContactID;
var selectedInvoiceID;
var selectedPurchaseID;
var selectedQuoteID;
var selectedCallID;

var selectedContactDetail;
var selectedInvoiceDetail;
var selectedPurchaseDetail;
var selectedQuoteDetail;
var selectedCallDetail;

var currentSelectedInvoiceIndex;

var tableCustomers;
var tableContacts;
var tableInvoices;
var tablePurchases;
var tableQuotes;
var tableCalls;

var editorCustomers;
var editorContacts;
var editorInvoices;
var editorQuotes;
var editorCalls;

var editorContactDetails;
var editorInvoiceDetails;
var editorQuoteDetails;
var editorCallDetails;

var web_path = 'http://www.toolfolks.com';
var initialImageList = [];



 
$('table').after(' ');



  
$(document).ready(function(){
       setTimeout(
  function() 
  {
    getCustomers();
    
  }, 1000); 
});

getCustomers=function(){
  editorCustomer = new $.fn.dataTable.Editor( {
 ajax: "http://www.xxx.com/php/xxx.php",
        table: "#dtCustomers",
        fields: [ {
                label: "Cust ID:",
                name: "customers.custID"
               }, {
                label: "Company:",
                name: "customers.companyName"
              },{
                label: "Add1:",
                name: "customers.address1"
              }, {
                label: "Add2:",
                name: "customers.address2"
              }, {
                label: "Add3:",
                name: "customers.address3"
              },{
                label: "Post Code:",
                name: "customers.Post_Code"
            }
            
            

        ]
        

    } );
        editorCustomer.title('Edit entry').buttons('Update Customer').edit(this);
        editorCustomer.on('initEdit', function () {
        editorCustomer.disable(["customers.custID"]);
        });
        editorCustomer.on('initCreate', function () {
        //alert('on create Invoice ');
        //editorCustomer.set( 'customer.custID', selectedCustomerID );
        editorCustomer.disable(["customers.custID"]);
        
        });
        $("#dtCustomers").dataTable().fnDestroy(); 
        $('#dtCustomers').empty();
        tableCustomers = $('#dtCustomers').DataTable( {

        ajax: "http://www.xxx.com/php/xxx.php",
        scrollY: "300px",
        scrollCollapse: true,
        paging: false,
        info: false,
        select: true,
        ordering: true,
        order: [[0, 'desc']],
        dom: "Bfrtip",
        autoWidth : true,
        responsive: true,
        select: true,
        initComplete: function () {
// show first inv number so we can get the invoice details
        selectedCustomerID = tableCustomers.cell(0, 0).data();
        console.log(' on getCutomer selectedCustomerID from first row = ' + selectedCustomerID);
        tableCustomers.row(':eq(0)', { page: 'current' }).select(); 
        if( selectedCustomerID > 0 ){
        //getInvoices();
        //getContacts();
        contContacts.Visible = true ; contInvoices.Visible = false ; contPurchases.Visible = false ; contQuotes.Visible = false ;contCalls.Visible = false;
        }
        
          },
        columns: [
            { data: "customers.custID" , responsivePriority: 1, title : 'Cust No'},
            { data: "customers.companyName" , responsivePriority: 2,  title : 'Company'},
            { data: "contacts.FirstName" ,  title : 'first'},
            { data: "customers.address1" , title : 'Add1'},
            { data: "customers.address2" ,  title : 'Add2'},
            { data: "customers.address3" ,  title : 'Add3'}

            
            
           
        ],
                buttons: [
            { extend: "create", text:  '<i class="fa fa-plus"></i>', editor: editorCustomer },
            { extend: "edit",  text:  '<i class="fa fa-pencil-square-o"></i>', editor: editorCustomer },
            { text: '<i class="fa fa-refresh"></i>',
            action: function (e, dt, node, config) {
                getCustomers();}

            }
        ]

});

// this get the onclick event placed at the end so we have the var table



}





tabsCustomer.onclick=function(){
    if( tabsCustomer.value == 0) { contContacts.Visible = true ; contInvoices.Visible = false ; contPurchases.Visible = false ; contQuotes.Visible = false ;contCalls.Visible = false ;}
    if( tabsCustomer.value == 1) { contContacts.Visible = false ; contInvoices.Visible = true ; contPurchases.Visible = false ; contQuotes.Visible = false ;contCalls.Visible = false ;}
    if( tabsCustomer.value == 2) { contContacts.Visible = false ; contInvoices.Visible = false ; contPurchases.Visible = true ; contQuotes.Visible = false ;contCalls.Visible = false ;}
    if( tabsCustomer.value == 3) { contContacts.Visible = false ; contInvoices.Visible = false ; contPurchases.Visible = false ; contQuotes.Visible = true ;contCalls.Visible = false ;}
    if( tabsCustomer.value == 4) { contContacts.Visible = false ; contInvoices.Visible = false ; contPurchases.Visible = false ; contQuotes.Visible = false ;contCalls.Visible = true ;}

}



HamburgerMain.onclick=function(){
      if (typeof(s) == "object") {
        return;
    }
    console.log(' currentPage = ' + currentPage);
    selectedPage = HamburgerMain.selection;
    changePage();
}

Form1.onshow=function(){
      headerHeight = rowHeadHome.Height;
    gridMain.Top = headerHeight;
    currentPage = 'Form1';
}

classic12

Found the issue

editorCustomer.title('Edit entry').buttons('Update Customer').edit(this);

removed '.edit(this);'

Dont know where I got that bit from.

allan

Thanks for posting back. I'm not sure that line is actually doing much at all there - its better to set the title and buttons when the editing / creation is triggered.

Allan