New entry does not appear until after refresh of page

rob1st

Looking at the examples, they add the new line straight away, I can't see a difference.

Public viewable example of the issue here: https://assettrack.cx/asset/phase.php

my Controller code:

<?php
//SESSION START

if(!isset($_SESSION)) {
    session_start(); 
    if(isset($_SESSION['userID'])) {
        $userID = $_SESSION['userID'];
    } else {
        $userID = 99;
    }
}    



include("../lib/DataTables.php");

use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;

Editor::inst( $db, 'phase1 P', 'P.phaseID' )
->field(
    Field::inst( 'P.phaseID' ),     
    Field::inst( 'P.phase' )
    ->validator( Validate::notEmpty( ValidateOptions::inst()
      ->message( 'Would you have a child and not name them?' )
        ) ),      
    Field::inst( 'P.active' ),
    Field::inst( 'P.createdBy' )
        ->set(Field::SET_CREATE)
        ->setValue( $userID ),
    Field::inst( 'P.updatedBy' )
        ->set('true')
        ->setValue( $userID ),
    Field::inst( 'P.lastUpdated' )
        ->set(true)
        ->setValue( date("Y-m-d H:i:s") ),


)
->debug(true)
->process( $_POST )
->json();

<?php
>
```
My PHP page:
```
<?php
//SESSION START
if(!isset($_SESSION)) { 
  session_start(); 
} 
?>


//PERMISSIONS (REQUIRED IN INCLUDE)
$public = 1; // 0 = Have to be logged in, 1 = Anyone can view.
$permission = 10; //10 = User, 20 = Tester, 25 = coordinator/manager, 30 = Admin, 40 = SuperAdmin
$_SESSION['redirect'] = basename($_SERVER['SCRIPT_FILENAME']);

// INCLUDES
require("../includes/includes.php");

// STANDARD PAGE SPECIFIC VARIABLE SET 
$table = 'phase';
$title = "Phase"; //Must be before filestart
require('../includes/filestart.php');


<?php
>

Phases

?> <!-- <input type="hidden" id='role' value="<?php /* echo $role */ ?>"> --> <div id='phaseTable' class='container-fluid mx-auto col-11'> <table id='phase' class='table table-striped'> <thead> <tr class=''> <th data-priority="100" class='text-center'>ID</th> <th data-priority="10" class='text-center'>Phase Name</th> <th data-priority="10" class='text-center'>Active</th> <th data-priority="20" class='text-center'>Created by</th> <th data-priority="80" class='text-center'>Updated By</th> <th data-priority="80" class='text-center'>Last Updated</th> </tr> </thead> </table> </div> <script type="text/javascript" language="javascript" class="init"> var editor; $(document).ready(function() { var editor = new $.fn.dataTable.Editor( { ajax: "../ajax/controllers/phase.php", table: "#phase", fields: [ { label: 'phase', name: 'P.phase' }, { label: 'Active', name: 'P.active' }, ], formOptions: { main: { scope: 'cell' // Allow multi-row editing with cell selection } }, } ); var table = $('#phase').DataTable( { dom: "Bfrtip", ajax: { "url": "../ajax/controllers/phase.php", "type": "POST" }, responsive: true, columns: [ { data: "P.phaseID" }, { data: "P.phase" }, { data: "P.active" }, { data: "P.createdBy" }, { data: "P.updatedBy" }, { data: "P.lastUpdated" }, ], select: true, buttons: [], } ); var permission = '<?php echo $role ?>'; //console.log(permission); if (permission == 0) { $('#example').on('click', 'tbody tr td', function() { editor.inline(this); }); table.button().add( null, { extend: "create", editor: editor } ); table.button().add( null, { extend: "edit", editor: editor }, ); table.button().add( null, { extend: "remove", editor: editor } ) } } ); </script> <?php require('../includes/fileend.php') ?>

JS calls are:

<!--JQUERY-->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<!--BOOTSTRAP 5-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

<!--AJAX-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!--ICONIFY-->
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>

<!--DATATABLES-->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/datetime/1.0.3/js/dataTables.dateTime.min.js"></script>
<script type="text/javascript" src="https://assettrack.cx/ajax/js/dataTables.editor.min.js"></script>
<script type="text/javascript" language="javascript" src="https://assettrack.cx/ajax/resources/syntax/shCore.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://assettrack.cx/ajax/js/editor.bootstrap5.js"></script>
<script type="text/javascript" src="https://assettrack.cx/ajax/js/editor.bootstrap5.min.js"></script>

<!-- Charts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>    
<script src="https://assettrack.cx/html&css/vendor/chartist/dist/chartist.min.js"></script>
<script src="https://assettrack.cx/html&css/vendor/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.min.js"></script>

I don't believe this is a CSS problem so won't list them, but let me know if you need them.

Debug tells me there is a nightly available for databables, everything else up to date, and no failures or warnings fine.

I have uploaded the config data in case it helps - https://debug.datatables.net/ulosef.

Appreciate any help to fix this, I am sure it will be something simple that I am missing.

allan

The response from the server needs to contain the information about the newly added row for it to show up (which thus allows for server-side computed values). At the moment, the server is responding with:

data []

Which is why there are no rows dynamically added to your table (thanks for the link to the example btw!).

I think the problem in this case is this:

Field::inst( 'P.phaseID' ),

Try instead:

Field::inst( 'P.phaseID' )->set(false),

this is under the assumption that it is actually an auto gen index in the database? If so, you don't wan Editor to expect a value submitted from the client-side, and that little change will do that.

Allan

rob1st

Spot on as always Allan. The ID is auto-increment.

Thank you.