Select input not working in editor

flowte

I've added a select type input for one of the cols in my datatable but I can't seem to get it to update when I change the value, it just switches back to what it was originally. My code at the moment is:
('lang' is a language array and removing it doesn't appear to make a difference)

it's on my localhost but I'll give you the code for the page and the edit page:

main file:

<?php
    require_once(dirname(dirname(dirname(__FILE__))).'/inc/required-inc.php');
    require_once(LIBRARY_PATH . "/crm.php");
    $crm = new crm;
    require_once(LIBRARY_PATH . "/sales.php");
    $sales = new sales;

<?php
>

    
        <?php echo $lang['invoices']; ?>
            
        <?php
                    echo "
                            <button type='button' class='btn btn-success pull-right' data-toggle='modal' data-target='#add-invoice-modal'> ".$lang['add']." ".$lang['invoice']."
                        ";
        ?>
        
    
?>


            <div class="custom-accordion" id="invoiceAccordion" role="tablist" aria-multiselectable="true">
                <div class='table-responsive'>
                    <table id="invoice-list-table" class="display" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th style='width:5px;'></th>
                                <th>Deal</th>
                                <th>Company</th>
                                <th>Expiry</th>
                                <th>Total Value</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                    </table>
                    <br>
                </div>
            </div>

</div>
    <script type="text/javascript" language="javascript" src="style/plugins/datatable-editor/js/dataTables.editor.js"></script>
    <script type="text/javascript" language="javascript" class="init">

var editor; // use a global for the submit and return data rendering in the examples

var statusType = new Array();
    statusType[0] = 'quotation';
    statusType[1] = 'quotation-sent';
    statusType[2] = 'quotation-rejected';
    statusType[3] = 'invoice-unpaid';
    statusType[4] = 'invoice-paid';
    statusType[5] = 'void-invoice';


$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "library/js/datatables/edit-invoice.php",
        table: "#invoice-list-table",
        fields: [{
                label: "Expiry",
                name: "invoice.expiry"
            },{
                label: "Status:",
                name:  "invoice.status",
                type:  "select",
                options: [
                    { label: lang["quotation"], value: 0 },
                    { label: lang["quotation-sent"], value: 1 },
                    { label: lang["quotation-rejected"], value: 2 },
                    { label: lang["invoice-unpaid"], value: 3 },
                    { label: lang["invoice-paid"], value: 4 },
                    { label: lang["void-invoice"], value: 5 }
                ]
            }
        ]
    } );

    // Activate an inline edit on click of a table cell
    $('#invoice-list-table').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );

    var table = $('#invoice-list-table').DataTable( {
        dom: '<"top">lfrt<"bottom"p><"clear">',
        ajax: "library/js/datatables/view-invoice.php",
        columns: [
            { data: null, className: "text-right", render: function ( data, type, row ) {
                // Combine the first and last names into a single table field
                return '<a value="section/sales/invoice-info.php" class="cancel-action app-select" onclick="changeInfo(\'section/sales/invoice-info.php\', '+data.invoice.id+', null)"><span class="glyphicons glyphicons-new-window"></span></a>';
            } },
            { data: null, render: function ( data, type, row ) {
                // Combine the first and last names into a single table field
                return data.deal.name;
            } },
            { data: null, render: function ( data, type, row ) {
                // Combine the first and last names into a single table field
                return data.company.name;
            } },
            { data: "invoice.expiry", type: "date" },
            { data: "invoice.value" },
            {
                "class": "center",
                "data": "invoice.status",
                "render": function (val, type, row) {
                    return lang[statusType[val]];
                }
            }
        ],
        tableTools: {
            sRowSelect: "os",
            sRowSelector: 'td:first-child',
            aButtons: [
                { sExtends: "editor_create", editor: editor },
                { sExtends: "editor_edit",   editor: editor },
                { sExtends: "editor_remove", editor: editor }
            ]
        }
    } );


    // Add event listener for opening and closing details
    $('#invoice-list-table tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

 //alert (JSON.stringify(tr));
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );

} );

    function changeInfo(dir, id, contact){
        // change the display with waiting messages first
    //  $('#app-display').html("<div class='panel panel-default main-content'><div class='panel-heading'><h5><a>"+lang[availApps[section]['name']]+"</a></h5></div><div class='panel-body'><span class='full-width'><div class='col-md-12 center-block text-center'><h2>"+lang['loading']+"</h2><br><div class='progress'><div class='progress-bar progress-bar-striped active' role='progressbar' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100' style='width:100%;'></div></div></div></span></div></div></div>");
        $.ajax({
        url: dir,
        success: function(data){
            updateDiv(dir+'?id='+id+'&c='+contact, '#app-display');
//          $('#app-diplay').html(data);
        },
        error: function(data){
         $('#app-display').text('<?php echo $lang['not-found'];?>');
        },
        });
    }

    </script>
        <script type="text/javascript" src="style/js/moment/moment.min.js"></script>
<?php
        // include required modals //
    include_once(dirname(dirname(dirname(__FILE__)))."/inc/modal/modal-invoice-add.php");
//  include_once(dirname(dirname(dirname(__FILE__)))."/inc/modal/modal-contact-add-activity.php");
//  include_once(dirname(dirname(dirname(__FILE__)))."/inc/modal/modal-contact-activity.php");

<?php
>
```
?>


edit file (edit-invoice.php):

<?php
date_default_timezone_set('UTC');

// DataTables PHP library
include( "../../../style/plugins/datatable-editor/php/DataTables.php" );

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

    Editor::inst( $db, 'invoice', 'invoice.id' )
        ->field(
            Field::inst( 'deal.name' ),
            Field::inst( 'company.name' ),
            Field::inst( 'invoice.expiry' ),
            Field::inst( 'invoice.value' ),
            Field::inst( 'invoice.status' )
        )
    ->leftJoin('deal', 'invoice.id_deal', '=', 'deal.id')
    ->leftJoin('company', 'deal.id_company', '=', 'company.id')
    ->process($_POST)
    ->json();

<?php > ``` ?>

allan

Are you able to give me a link to the page? The code you have above looks okay. Is the value being set in the database? Also, what does the PHP code you are using look like?

Thanks,
Allan

flowte

updated desc with file code. the pages aren't accessible directly

allan

Hi,

Thanks for adding the PHP code. That looks like it should be okay.

Using your browser's debugger tools, could you check, and post here, what values are being sent on edit, and the JSON that the server is returning please?

We'll need to do a bit of debugging since I don't immediately see what the issue would be. If it is at all possible to get a link, that would be very useful.

Thanks,
Allan

flowte

right now it is all localhost and once it is live I can't give access at this stage unfortunately. Was going to send the output but I'm not getting any. When I change a different input (date field) it outputs the info being sent to the edit file and works correctly but when I change the dropdown nothing happens at all. It doesn't appear to register the change event in any way so when I click away from it the input changes back to what it was originally

allan

That's very odd. I can't immediately explain that I'm afraid. I'm sorry to say that I would need a link to a page showing the problem to be able to debug what is happening.

Allan

flowte

sent you log in info to see the issue

flowte

did you get the log in info for testing? Should be in an IM to you @allan

allan

Hi,

Yes, really sorry for the slow reply. Drowning in work of my own making with the recent release. I'll get back to you shortly about this.

Regards,
Allan

flowte

any luck?