What's the right way to use actionName to Integrate Editor with Wordpress?
What's the right way to use actionName to Integrate Editor with Wordpress?
jfwenger
Posts: 2Questions: 1Answers: 0
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!)
This question has an accepted answers - jump to answer
Answers
A quick reply as about to leave, but have you seen this blog post that discusses integrating Editor into Wrodpress.
Colin
Thank you, Colin. I had already looked at that post, but since Wordpress documentation has insisted that all ajax calls be processed through their own internal ajax processing php file, I had been trying to comply with that. (That's what required the setup that I had above.) But I just did it this way you've suggested in the post (using an ajax path relative to the root to avoid CORS errors) and it seems to work fine so far. I'll report back if it fails to fully integrate with Wordpress when it's being done this way.