I can get editor working beautifully outside of Wordpress. Within wordpress, I've determined that a clash with the 'action' variable is the problem. To isolate the problem, I've begun with a simple test of editor outside of wordpress using php on the server side. In this environment, if I include what wordpress needs me to include in the ajax call: data : { action : "get_posts"}, the XHR response returns this error:
Uncaught Exception: Unknown Editor action: get_posts in C:\xampp\htdocs\tests\DataTablesEditor\php\lib\Editor.php:111
If I add actionName : "editor" to the editor object in my javascript, the error persists. If I add ->actionName('editor') to the editor instance in my php, the error persists. I suspect I'm doing something wrong on the php side. (I'm on a local server, so I'm sorry that I can't give you a testable example with the server files.)
Here's everything I'm using in the test:
The HTML File (index.html):
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DataTables Editor Test</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.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" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/posts.js"></script>
</head>
<body class="dataTables">
<div class="container">
<h1>DataTables Editor Test</h1>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="wp_posts" width="100%">
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Date</th>
<th>Type</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
The Javascript file (js/posts.js):
var editor; // use a global for the submit and return data rendering in the examples
(function($){
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
actionName : "editor",
ajax: {
url: 'php/table.wp_posts.php',
method: "POST",
data : { action : "get_posts"}
},
table: "#wp_posts",
fields: [ {
label: "Title:",
name: "post_title"
}, {
label: "Date:",
name: "post_date"
}, {
label: "Type:",
name: "post_type"
}
],
formOptions: {
inline: {
onBlur: 'submit'
}
}
} );
var table = $('#wp_posts').DataTable( {
actionName : "editor",
dom: "Bfrtip",
ajax: {
url: 'php/table.wp_posts.php',
method: "POST",
data : { action : "get_posts" }
},
columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ data: "post_title" },
{ data: "post_date" },
{ data: "post_type" },
],
order: [ 1, 'asc' ],
keys: {
columns: ':not(:first-child)',
keys: [ 9 ],
editor: editor,
editOnFocus: true
},
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
}(jQuery));
The PHP File (php/table.wp_posts.php)
<?php
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, 'wp_posts', 'ID' )
->actionName('editor')
->fields(
Field::inst( 'post_title' ),
Field::inst( 'post_date' )
->validator( Validate::dateFormat( 'Y-m-d H:i:s' ) )
->getFormatter( Format::datetime( 'Y-m-d H:i:s', 'Y-m-d H:i:s' ) )
->setFormatter( Format::datetime( 'Y-m-d H:i:s', 'Y-m-d H:i:s' ) ),
Field::inst( 'post_type' )
)
->where( 'post_type', 'content' )
->where( 'post_status', 'publish' )
->debug( true )
->tryCatch( false )
->transaction( false )
->process($_POST)
->json();
The query is selecting 3 fields of my wordpress database from mySQL, and it works as long as I delete the actionName variables in the php and js and remove the action inside the data variable of the ajax call.
Thoughts? Thanks for any help you can offer me. (I'm thrilled with the possibilities of datatables for this project once I get over this hump!)