block editor – AJAX Saving a meta post does not work in Gutenberg using my save post button

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

enter image description here

enter image description here.png

0
Markovič Richard 4 weeks 2021-05-14T05:32:32-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse