Getting popup edit window on close to refresh table.

webmaster@cinema.usc.edu

Hello,

I am using the editor as inline and as a popup to edit consecutive rows. I would like to refresh the table when the user closes the popup window, but I am not able to get the close event. When I tried "editor.on('close') it executes the refresh just when I open the popup window by pressing the "edit" button. I am also having problems when commenting out the "create" button and get this error "node: inst.s.buttons[ selector ].node".

Any help will be appreciate, thank you and here is my code:

var editor;  // use a global for the submit and return data rendering
var parKualiDepositID;
var parMerchantConnectGroupID;
var parReconcileNote;
var parReconcileBy;
var parMerchantConnectID;
var param;
var table;
        
$(document).ready( function() {
    var adminID = $('#adminid').val();

    editor = new $.fn.dataTable.Editor( {

        ajax: {
            url: "components/merchantDAO.cfc?method=getMerchant&returnformat=json",
            data: function ( d ) {
                d.RecordType = 0;
            },
        },
        table: "#tbParticipants",
        idSrc: 'merchantconnectid',
       
        fields: [ 
            {
                label: "Credit Card",
                name: "cardnumber",
                enabled: false
            },
            {
                label: "Kuali Deposit ID:",
                name: "kualidepositid"
            }, {
                label: "Group Name:",
                name: "groupname",
                type: "selectize",
                placeholder: "Select a Group", 
             }, 
            {
                label: "Reconcile Note:",
                name: "reconcilenote"
            }
             
        ],
        formOptions: {
            main: {
                submit: 'changed'   // will submit only if there are changes
            }
        }
        
     } ); 
     
     // getGroups function will populate "Group Name" dropdown by passing field name and getting data from DAO
     getGroups( editor.field('groupname') );
  
     function getGroups( field ){
 
        var aListObject = new Array();
 
        $.ajax ({
            type: "GET",
            async: false,
            url: "components/merchantDAO.cfc?method=getMerchantConnectGroup&returnformat=json",
             
            success: function (options) {
                var obj = JSON.parse(options);

                for (var i = 0; i < obj.options.length; i++) {

                    item = {};
                     
                    item["label"] = obj.options[i].groupname;
                    item["value"] = obj.options[i].merchantconnectgroupid;
                    aListObject.push(item);
     
            } 
                field.update( aListObject );
            }
            
         });        
        
     };
 
    // Disable "Credit Card" field on edit. We just want to show it to the user
    editor.field( 'cardnumber').disable();

     
    // Activate an inline edit on click of a table cell
    $('#tbParticipants').on( 'click', 'tbody td', function (e) {
        editor.inline( this, { submitOnBlur: true } );
    } );  
   
    // Handle data before submit edit (update)
    editor.on( 'preSubmit', function ( e, data, action ) {
        var KualiDepositID = editor.field( 'kualidepositid' );
        var MerchantConnectGroupID = editor.field( 'groupname' );
        var ReconcileNote = editor.field( 'reconcilenote' );
        parReconcileBy = adminID;
        
        // loop to get key (id) and if processing many edits
        $.each( data.data, function ( key, value ) {
            parMerchantConnectID = key;
            parKualiDepositID = data.data[key].kualidepositid;
            parMerchantConnectGroupID = data.data[key].groupname;            
            parReconcileNote = data.data[key].reconcilenote;    
        });


        // Build parameters for component call
        param = 'MerchantConnectID=' + parMerchantConnectID  + '&ReconcileBy=' + parReconcileBy;
        
        if (KualiDepositID.val()){
            param = param + '&KualiDepositID=' + parKualiDepositID;
        }
        if (MerchantConnectGroupID.val()){
            param = param + '&MerchantConnectGroupID=' + parMerchantConnectGroupID;
        }
        if (ReconcileNote.val()) {
            param = param + '&ReconcileNote=' + parReconcileNote;
        }
        
        // Execute update
         $.ajax ({
            
            url: "components/merchantDAO.cfc?method=updateMerchantConnectReconcile&returnformat=json",
            method: "POST",
            data: param,
            success: function(result){
                
            }
             
        });
        
    });  // End of 'preSubmit' 
 
    editor.on('close', function(e) {
 
            alert("will close");
               // table.ajax.reload();
            
    });         
       
 
    
    // Buttons array definition to create previous, save and next buttons in
    // an Editor form
    var backNext = [
        {
            label: "&lt;",
            fn: function (e) {
                // On submit, find the currently selected row and select the previous one
                this.submit( function () {
                    var indexes = table.rows( {search: 'applied'} ).indexes();
                    var currentIndex = table.row( {selected: true} ).index();
                    var currentPosition = indexes.indexOf( currentIndex );
 
                    if ( currentPosition > 0 ) {
                        table.row( currentIndex ).deselect();
                        table.row( indexes[ currentPosition-1 ] ).select();
                    }
 
                    // Trigger editing through the button
                    table.button( 1 ).trigger();
                }, null, null, false );
            }
        },
        'Save',
        {
            label: "&gt;",
            fn: function (e) {
                // On submit, find the currently selected row and select the next one
                this.submit( function () {
                    var indexes = table.rows( {search: 'applied'} ).indexes();
                    var currentIndex = table.row( {selected: true} ).index();
                    var currentPosition = indexes.indexOf( currentIndex );
 
                    if ( currentPosition < indexes.length-1 ) {
                        table.row( currentIndex ).deselect();
                        table.row( indexes[ currentPosition+1 ] ).select();
                    }
 
                    // Trigger editing through the button
                    table.button( 1 ).trigger();
                }, null, null, false );
            }
        }
    ];

      table = $('#tbParticipants').DataTable( {
        responsive: true,
        bPaginate: false,
        dom: "Bfrtip", 
        bProcessing: true,
        bServerSide: false,
        bAutoWidth: false,
        bJQueryUI: true,
        //sPaginationType: "full_numbers",
        ajax: {
            url: "components/merchantDAO.cfc?method=getMerchant&returnformat=json",
            data: function ( d ) {
                d.RecordType = 0;
            }
        },
        
        columns: [
            
            {   // Responsive control column
                data: null,
                defaultContent: '',
                className: 'control',
                orderable: false
            },
            { data: "merchantconnectid" },  
            { data: "cardnumber" },
            { data: "cardtype" },
            { data: "itemamount", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) },
            { data: "entrymethod" },
            { data: "authcode" },
            {                                
              /* when passing null to mData we pass the whole row so we can use different fields to format display */
              data: null, 
              "mRender": function ( data, type, full, meta ){
                    var displayDate =new Date(data.batchdate);
                    return displayDate.toLocaleDateString();
                    }
            },          
            { data: "transdate",},
            { data: "transtime" },
            { data: "refnumber" },
            { data: "roctext" },
            { data: "kualidepositid", 
                render: function ( data, type, row ){
                    if ( type === 'display' ) {
                        //var numberRenderer = $.fn.dataTable.render.number( ',', '.', 0, '$' ).display;
                        return  data + ' <i class="fa fa-pencil"/>';
                    }
                    return data;
                }    
            
            },
            { data: "groupname",
                render: function ( data, type, row ){
                    if ( type === 'display' ) {
                        //var numberRenderer = $.fn.dataTable.render.number( ',', '.', 0, '$' ).display;
                        return  data + ' <i class="fa fa-pencil"/>';
                    }
                    return data;
                } 
            },
            
            { data: "reconcilenote", 
                render: function ( data, type, row ){
                    if ( type === 'display' ) {
                        //var numberRenderer = $.fn.dataTable.render.number( ',', '.', 0, '$' ).display;
                        return  data + ' <i class="fa fa-pencil"/>';
                    }
                    return data;
                } 
            },
            { data: "reconcileby"} 
        ],
        
        select: true,
        buttons: [
            { extend: "create", editor: editor, enabled: false },
            {
                extend: 'selected',
                text:   'Edit',
                action: function () {
                    var indexes = table.rows( {selected: true} ).indexes();
 
                    editor.edit( indexes, {
                        title: 'Edit',
                        buttons: indexes.length === 1 ?
                            backNext :
                            'Save'
                    } );
                }
            }
//            ,
//            { extend: "remove", editor: editor, enabled: false }
        ],
        
 
        keys: {
            columns: ':not(:first-child)',
            keys: [ 9 ] // Tab key              
        }
        
        
                
    } );    // Ending datatable
    
    
        // Inline editing on tab focus
        table.on( 'key-focus', function ( e, datatable, cell ) {
        editor.inline( cell.index() );
    } );
            
} );        // Ending document ready

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

When I tried "editor.on('close') it executes the refresh just when I open the popup window by pressing the "edit" button

If I understand correctly, you are saying that when you click the edit button it will refresh the table (i.e. on open)!? Do you have inline editing active at that time? Do you want to make a distinction between the close event from inline editing and the main editor?

I am also having problems when commenting out the "create" button and get this error "node: inst.s.buttons[ selector ].node".

Removing line 265 from the above causing that error? Can you give me a link to that page showing that problem please?

Thanks,
Allan

webmaster@cinema.usc.edu

Hi Allan, I decided to use the "excel" button instead of "create" because it was giving me the node error.
About closing the editor, yes we need to let the user edit inline or by opening the edit popup and yes I would like a distinction between them.

Thank you,

allan

The open event can be used to determine which mode the form is being shown in. There is also the display() method which will give the same information.

Allan

webmaster@cinema.usc.edu

Thanks a lot Allan,

Now I know how is the user editing the data.

// Find edit mode ('main' = popup; 'inline') editor.on('open', function ( e, mode, action ) { var editMode = mode; });