New entry does not appear until after refresh of page

New entry does not appear until after refresh of page

rob1strob1st Posts: 84Questions: 22Answers: 0
edited June 2021 in Editor

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();
?>

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');

?>
<header class='container-fluid page-header text-center'>
  <h1 class='page-title'>Phases</h1>
</header>

<!-- <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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Answer ✓

    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

  • rob1strob1st Posts: 84Questions: 22Answers: 0

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

    Thank you.

Sign In or Register to comment.