Adding JS functionality to the Publish button in wp-admin/post.php

Question

I've created a plugin with a new metabox in my post.php. It's working fine on it's own, but the problem is getting it to save it's values if the users choose to press the "Publish/Update/Save" in WordPress itself.

I have tried adding a JQuery function to the #publish item.

This way works, but it brings up an annoying "Are you sure you want to leave this page" because of the window.location.reload() which I can't have there.

                    $("#publish").click(function(e) {
                        //e.preventDefault();

                        // SM Data
                        var data = prepareData();

                        if(data.length !== 0) {
                            for(var i = 0; i < data.length; i++ ) {
                                $.post( postdataAjax.ajaxurl, data[i] );
                            }
                        }

                        // WP Data
                        $.ajax({
                            url: "post.php",
                            type: "POST",
                            data: $("form#post").serialize(),
                            success: function(response,status) {
                                window.location.reload();
                            }
                        });

                        return true;
                    });

For this final solution I have tried using window.onbeforeunload = null and such, but not had any success with it.

This is the full function:

private function __construct() {
    add_action( 'add_meta_boxes', array( $this, 'add_custom_metabox' ) );
}

public function add_custom_metabox() 
{
    $screens = array( 'post', 'page', 'landing' );
    foreach ( $screens as $screen ) {
        $this->set_plugin_slug();
        add_meta_box(
            '_meta',
            __( '###', $this->plugin_slug ),
            function( $post ) {
                global $slug;
                $html_code = _HTML_Code::get_instance();

                echo $html_code->generate_script_new_publication($post, $slug);
                echo $html_code->generate_script_list($post, $slug);
            }, $screen
        );
    }
}

...

public function generate_script_list($post, $slug) 
{ 
    global $wpdb;


    $mainTable = $wpdb->prefix.'esm';
    $data = $wpdb->get_results("SELECT * FROM $mainTable WHERE post_id = $post->ID ORDER BY publish_localtime ASC");
    $d_ids = array();
    foreach( $data as $item ) {
        $d_ids[] = $item->id;
    }

    ob_start();
    ?>
    <script type="text/javascript">
        (function ( $ ) {
            "use strict";
            $(function () {
                $(document).ready(function() {
                    var $data_ids = <?php echo json_encode($d_ids); ?>;

                    function prepareData()
                    {
                        var $changed = parseInt($("#new-changed-new").val());

                        var data = [];
                        if( $changed == 1 ) {
                            $data_ids.push("new");
                        }

                        for(var i = 0; i < $data_ids.length; i++) {
                            var item_id = $data_ids[i];
                            var ch = parseInt($("#new-changed-"+item_id).val());

                            if(ch) {
                                var $selected_weekdays = '';
                                $("input[name=weekday-"+item_id+"]:checked").each( 
                                    function() { 
                                       $selected_weekdays += $(this).val()+';';
                                    }                               
                                );

                                var action = "update";
                                if(item_id == "new") {
                                    action = "create";
                                }

                                var d = new Date($("#one-time-date-"+item_id).datepicker("getDate"));
                                var d_local = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), $("#hour-"+item_id).val(), $("#minute-"+item_id).val(), 0));
                                var d_utc = new Date(d.getFullYear(), d.getMonth(), d.getDate(), $("#hour-"+item_id).val(), $("#minute-"+item_id).val(), 0);

                                //var d_from = new Date($range_from_year.val(), $range_from_month.val()-1, $range_from_day.val(), $hour.val(), $minute.val(), 0);
                                //var d_to = new Date($range_to_year.val(), $range_to_month.val()-1, $range_to_day.val(), $hour.val(), $minute.val(), 0);

                                var item = [
                                    { 'name': "_wpnonce", 'value' : postdataAjax.nonce },
                                    { 'name' : "action", 'value' : action },
                                    { 'name' : "item-id", 'value' : $("#item-id-"+item_id).val() },
                                    { 'name' : "post-id", 'value' : $("#post-id-"+item_id).val() },
                                    { 'name' : "channel", 'value' : $("#channel-"+item_id).val() },
                                    { 'name' : "text", 'value' : $("#text-"+item_id).val() },
                                    { 'name' : "image_url", 'value' : $("#filepath-"+item_id).val() },
                                    { 'name' : "local_time", 'value' : Math.round(d_local.getTime() / 1000), 'real' : d_local.toJSON() },
                                    { 'name' : "one_time_utc_time", 'value' : Math.round(d_utc.getTime() / 1000), 'real' : d_utc.toJSON() },
                                    //{ 'name' : "range_from_utc_time", 'value' : Math.round(d_from.getTime() / 1000), 'real' : d_from.toJSON() },
                                    //{ 'name' : "range_to_utc_time", 'value' : Math.round(d_to.getTime() / 1000), 'real' : d_to.toJSON() },
                                    { 'name' : "pattern", 'value' : $("#pattern-"+item_id).val() },
                                    { 'name' : "daily-pattern", 'value' : $("input[name=daily-pattern]:checked").val() },
                                    { 'name' : "daily-pattern-specified", 'value' : $("#daily-event-"+item_id+"-spec-day").val() },
                                    { 'name' : "weekly-pattern-specified", 'value' : $("#weekly-event-"+item_id+"-spec").val() },
                                    { 'name' : "weekday", 'value' : $selected_weekdays },
                                    { 'name' : "monthly-pattern", 'value' : $("input[name=monthly-pattern]:checked").val() },
                                    { 'name' : "monthly-pattern-1-day", 'value' : $("#monthly-event-"+item_id+"-pattern-1-day").val() },
                                    { 'name' : "monthly-pattern-1-month", 'value' : $("#monthly-event-"+item_id+"-pattern-1-month").val() },
                                    { 'name' : "monthly-pattern-2-select-num", 'value' : $("#monthly-event-"+item_id+"-pattern-2-select-num").val() },
                                    { 'name' : "monthly-pattern-2-select-weekday", 'value' : $("#monthly-event-"+item_id+"-pattern-2-select-weekday").val() },
                                    { 'name' : "monthly-pattern-2-month", 'value' : $("#monthly-event-"+item_id+"-pattern-2-month").val() },
                                    { 'name' : "yearly-pattern", 'value' : $("input[name=yearly-pattern]:checked").val() },
                                    { 'name' : "yearly-pattern-frequence", 'value' : $("#yearly-event-"+item_id+"-pattern-year").val() },
                                    { 'name' : "yearly-pattern-1-day", 'value' : $("#yearly-event-"+item_id+"-pattern-1-day").val() },
                                    { 'name' : "yearly-pattern-1-month", 'value' : $("#yearly-event-"+item_id+"-pattern-1-month").val() },
                                    { 'name' : "yearly-select-num", 'value' : $("#yearly-event-"+item_id+"-pattern-2-select-num").val() },
                                    { 'name' : "yearly-select-weekday", 'value' : $("#yearly-event-"+item_id+"-pattern-2-select-weekday").val() },
                                    { 'name' : "yearly-pattern-2-month", 'value' : $("#yearly-event-"+item_id+"-pattern-2-month").val() }
                                ];

                                switch( $("#channel-"+item_id).val() ) {
                                    case 'Facebook' :
                                        item.push({ 'name' : "publish_account", 'value' : $("input[name=facebook-publish-"+item_id+"]:checked").val() });
                                        break;
                                    case 'Twitter' :
                                        item.push({ 'name' : "publish_account", 'value' : $("input[name=twitter-publish-"+item_id+"]:checked").val() });
                                        break;
                                    default :
                                        break;
                                }

                                data.push(item);
                            }
                        }
                        return data;
                    }

                    $("form#post").submit(function(e) {
                        //e.preventDefault();

                        var data = prepareData();

                        if(data.length !== 0) {
                            for(var i = 0; i < data.length; i++ ) {
                                $.post( postdataAjax.ajaxurl, data[i] );
                            }
                        }
                        /*$.ajax({
                            url: "post.php",
                            type: "POST",
                            data: $("form#post").serialize(),
                            success: function(response,status) {
                                //window.location.reload();
                            }
                        });*/

                        return true;
                    });
                });
            });
        })(jQuery);
    </script>
    <style>
    .sm-table {
        width: 100%;
    }
    </style>
    <table id="sm-table" class="sm-table">
        <thead>
            <tr>
                <th style="width:2%;text-align:center"></th>
                <th style="width:10%;text-align:left;"><?php _e('Channel', $slug); ?></th>
                <th style="width:43%;text-align:left;"><?php _e('Text', $slug); ?></th>
                <th style="width:30%;text-align:right;"><?php _e('Publish Date', $slug); ?></th>
                <th style="width:15%;text-align:right;"><?php _e('Actions', $slug); ?></th>
            </tr>
        </thead>
        <tbody>
        <?php if( count($data) !== 0 ) : ?>
            <?php $i = 0; 
            foreach($data as $itemObj) : 
                $item = (array) $itemObj;
                $i++; 
            ?>
            <?php echo $this->generate_script_list_row($post, $item, $i, $slug); ?>
            <?php echo $this->generate_script_publication($post, $item, $slug); ?>
            <?php endforeach; ?>
        <?php else : ?>
            <tr>
                <td colspan="5"><?php _e('No publishing options found.', $slug); ?></td>
            </tr>
        <?php endif; ?>
        </tbody>
    </table>
    <?php
    $out = ob_get_contents();
    ob_end_clean();
    return $out;
}

So my question is, is what I'm trying to do achievable? How could I do it? An edit to an existing function or a total rewrite?

Answer 1

Solved it by using a modal box instead of metabox, forcing the users to finish editing the plugin data, before submitting the regular changes to WP.

    //add_action( 'add_meta_boxes', array( $this, 'add_custom_metabox' ) );
    add_action( 'media_buttons_context', array($this, 'add_custom_media_buttons' ) );

    add_action( 'admin_footer', array($this, 'add_esm_edit' ) );

These were the lines that were added to the __construct(). Commented out the old one.

The code itself is a simple link and when clicking it, it brings up the <div> hiding in the admin_footer.