New Button not working
New Button not working
minobu
Posts: 23Questions: 8Answers: 2
Link to test case:
https://aquaone.cloud/cloud/ocapp/staff_newyork2.html
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
I have a very simple integration of Editor running on a test server. It's using the staff_newyork table from examples. The Edit and Delete buttons work fine and update correctly in the Database and browser but for some reason, the New and Duplicate buttons won't work. The popup form appears with the correct fields however when submitted nothing happens. With Duplicate, the fields are all populated correctly but once again when submitted nothing happens. No error message is recorded in console or PHP error log. Any help would be appreciated, thanks.
There is a samesite cookie warning given as follows:
Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute
Because a cookie's SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.
Resolve this issue by updating the attributes of the cookie:
Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use.
Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests
3 cookies
Name Domain & Path
PHPSESSID .datatables.net/
Vanilla .datatables.net/
Vanilla-tk .datatables.net/
Learn more: SameSite cookies explained
This is the staff_newyor2.html code:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DataTables Editor - staff_newyork</title>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.21/af-2.3.5/b-1.6.3/b-colvis-1.6.3/b-html5-1.6.3/b-print-1.6.3/cr-1.5.2/fc-3.3.1/fh-3.1.7/kt-2.5.2/r-2.2.5/rg-1.1.2/rr-1.2.7/sc-2.0.2/sp-1.1.1/sl-1.3.1/datatables.min.css">
<link rel="stylesheet" type="text/css" href="css/generator-base.css">
<link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.21/af-2.3.5/b-1.6.3/b-colvis-1.6.3/b-html5-1.6.3/b-print-1.6.3/cr-1.5.2/fc-3.3.1/fh-3.1.7/kt-2.5.2/r-2.2.5/rg-1.1.2/rr-1.2.7/sc-2.0.2/sp-1.1.1/sl-1.3.1/datatables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">
<script type="text/javascript" charset="utf-8" src="js/table.staff_newyork.js"></script>
</head>
<body class="jqueryui">
<div class="container">
<h1>
DataTables Editor <span>staff_newyork</span>
</h1>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="staff_newyork" width="100%">
<thead>
<tr>
<th>first_name</th>
<th>last_name</th>
<th>phone</th>
<th>city</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
table.staff_newyork.js is the only other file I have modified. modified to use Duplicate button.
/*
* Editor client script for DB table staff_newyork
* Created by http://editor.datatables.net/generator
*/
(function($){
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
ajax: 'php/table.staff_newyork.php',
table: '#staff_newyork',
fields: [
{
"label": "first_name:",
"name": "first_name"
},
{
"label": "last_name:",
"name": "last_name"
},
{
"label": "phone:",
"name": "phone"
},
{
"label": "city:",
"name": "city"
}
]
} );
var table = $('#staff_newyork').DataTable( {
dom: 'Bfrtip',
ajax: 'php/table.staff_newyork.php',
columns: [
{
"data": "first_name"
},
{
"data": "last_name"
},
{
"data": "phone"
},
{
"data": "city"
}
],
select: true,
lengthChange: false,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{
extend: "selected",
text: 'Duplicate',
action: function ( e, dt, node, config ) {
// Start in edit mode, and then change to create
editor
.edit( table.rows( {selected: true} ).indexes(), {
title: 'Duplicate record',
buttons: 'Create from existing'
} )
.mode( 'create' );
}
},
{ extend: "remove", editor: editor }
]
} );
} );
}(jQuery));
This question has an accepted answers - jump to answer
Answers
Are you using a Datatables supplied server script?
When using the New button the request parameters look correct for what I entered:
however the response is
{"data":[]}. The response should have the row data as shown in the Client Server data docs. Reloading the page doesn't show the new record. My guess is the record is not written to the DB. Start by looking for errors in the server log when using the New button.Kevin
@kthorngren Thanks so much for the quick answer. Pointed me in the right direction. The problem was with the table, I had blindly copied SQL and the table had been set as a View and not a table. I pointed Datatables/Editor to another table and everything is now working.