AJAX Saving a meta post does not work in Gutenberg using my save post button
-
20-05-2021 - |
Question
I've created a meta box with posts and would like to save it by clicking the submit button. Saving with Ajax works well in the classic editor and stops working as soon as it moves to Gutenberg.
Would anyone be willing to help me? well thank you
This is the code I used from Is there an easy way to AJAX-ify saving of post?
function my_post_type_xhr() {
# Only for one post type.
if ( get_post_type() === 'chi_email' ) {
?>
<script>
// Avoid collisions with other libraries
(function ($) {
// Make sure the document is ready
$(document).ready(function () {
var btn = $('#publishComment');
btn.on('click', function (e) {
console.log('clicked');
$('.spinner').addClass('is-active');
e.preventDefault()
// This is the post.php url we localized (via php) above
var url = '<?= admin_url( 'post.php' ) ?>'
// Serialize form data
var data = $('form#post').serializeArray();
// Tell PHP what we're doing
// NOTE: "name" and "value" are the array keys. This is important. I use int(1) for the value to make sure we don't get a string server-side.
data.push({name: 'save_post_ajax', value: 1})
// Replaces wp.autosave.initialCompareString
var ajax_updated = false
/**
* Supercede the WP beforeunload function to remove
* the confirm dialog when leaving the page (if we saved via ajax)
*
* The following line of code SHOULD work in $.post.done(), but
* for some reason, wp.autosave.initialCompareString isn't changed
* when called from wp-includes/js/autosave.js
* wp.autosave.initialCompareString = wp.autosave.getCompareString();
*/
$(window).unbind('beforeunload.edit-post')
$(window).on('beforeunload.edit-post', function () {
var editor = typeof tinymce !== 'undefined' && tinymce.get('content')
// Use our "ajax_updated" var instead of wp.autosave.initialCompareString
if ((editor && !editor.isHidden() && editor.isDirty()) ||
(wp.autosave && wp.autosave.getCompareString() !== ajax_updated)) {
return postL10n.saveAlert
}
})
// Post it
$.post(url, data, function (response) {
// Validate response
if (response.success) {
// Mark TinyMCE as saved
if (typeof tinyMCE !== 'undefined') {
for (id in tinyMCE.editors) {
if (tinyMCE.get(id))
tinyMCE.get(id).setDirty(false)
}
}
// Update the saved content for the beforeunload check
ajax_updated = wp.autosave.getCompareString()
console.log('Saved post successfully')
} else {
console.log('ERROR: Server returned false. ', response)
}
}).fail(function (response) {
console.log('ERROR: Could not contact server. ', response)
}).done(function () {
if (wp.autosave) {
wp.autosave.enableButtons();
}
$('.spinner').removeClass('is-active');
})
return false
})
})
})(jQuery)
</script>
<?php
}
}
add_action( 'admin_footer-post.php', 'my_post_type_xhr', 999 );
add_action( 'admin_footer-post-new.php', 'my_post_type_xhr', 999 );
No correct solution
Licensed under: CC-BY-SA with attribution
Not affiliated with wordpress.stackexchange