I'm trying to build me own frontend AJAX updating screen mirroring interface.

I have a very basic form:

<form id="mblocation">
    <input type="radio" name="mb_user_location" id="mb_user_location1" value="1" checked="checked">
    <label for="mb_user_location1">
        <span>in office</span>
    </label>

    <input type="radio" name="mb_user_location" id="mb_user_location2" value="2">
    <label for="mb_user_location2">
        <span>out of office</span>
    </label>

    <input type="hidden" name="mb_user_id" value="1">
    <input type="hidden" id="mb_location_nonce_field" name="mb_location_nonce_field" value="6b8a75521b">
    <input type="hidden" name="_wp_http_referer" value="/inout/">
</form>

And I want to have an AJAX script run every x seconds based on what the administrators set in the options page get_option('mb_heartbeat_time'):

function mb_ajax_updater( mb_heartbeat_time ) {

    // get the user id
    var mb_user_id = $('input[name="mb_user_id"]').val();

    // get the user current location
    var mb_user_location_current = '<?= get_user_meta( get_current_user_id(), 'mb_user_location_current', true ); ?>';

    // get the current :checked location
    var mb_user_location_checked = $('input[name="mb_user_location"]:checked').val();

    // is the saved location and the checked the same
    if( mb_user_location_current ==  mb_user_location_checked ) {

        // log the result
        console.log( 'Result: same location!' );

    } else {

        // save the new meta
        // how to get the current location?
        // how to get the previous location?
        <?php update_user_meta( get_current_user_id(), 'mb_user_location_current', ????? ); ?>
        <?php update_user_meta( get_current_user_id(), 'mb_user_location_previous', ????? ); ?>

        // update the view
        $("input#mb_user_location" + mb_user_location_checked ).prop( "checked","checked" );

    }

    // set the timer
    setTimeout( mb_ajax_updater, mb_heartbeat_time );
}

// run it first time
mb_ajax_updater( <?= get_option('mb_heartbeat_time'); ?> );

But I'm not exactly sure where I'm supposed to go from here. How do I validate that the ajax is being sent from the get_current_user_id? How do I add the PHP parts so the update_user_meta will update? Is there a better way of doing this, than what I'm attempting?

All I want to do is when one screen is updated, reflect it on the other screen in the time allocated by the settings.

I'm trying to build me own frontend AJAX updating screen mirroring interface.

I have a very basic form:

<form id="mblocation">
    <input type="radio" name="mb_user_location" id="mb_user_location1" value="1" checked="checked">
    <label for="mb_user_location1">
        <span>in office</span>
    </label>

    <input type="radio" name="mb_user_location" id="mb_user_location2" value="2">
    <label for="mb_user_location2">
        <span>out of office</span>
    </label>

    <input type="hidden" name="mb_user_id" value="1">
    <input type="hidden" id="mb_location_nonce_field" name="mb_location_nonce_field" value="6b8a75521b">
    <input type="hidden" name="_wp_http_referer" value="/inout/">
</form>

And I want to have an AJAX script run every x seconds based on what the administrators set in the options page get_option('mb_heartbeat_time'):

function mb_ajax_updater( mb_heartbeat_time ) {

    // get the user id
    var mb_user_id = $('input[name="mb_user_id"]').val();

    // get the user current location
    var mb_user_location_current = '<?= get_user_meta( get_current_user_id(), 'mb_user_location_current', true ); ?>';

    // get the current :checked location
    var mb_user_location_checked = $('input[name="mb_user_location"]:checked').val();

    // is the saved location and the checked the same
    if( mb_user_location_current ==  mb_user_location_checked ) {

        // log the result
        console.log( 'Result: same location!' );

    } else {

        // save the new meta
        // how to get the current location?
        // how to get the previous location?
        <?php update_user_meta( get_current_user_id(), 'mb_user_location_current', ????? ); ?>
        <?php update_user_meta( get_current_user_id(), 'mb_user_location_previous', ????? ); ?>

        // update the view
        $("input#mb_user_location" + mb_user_location_checked ).prop( "checked","checked" );

    }

    // set the timer
    setTimeout( mb_ajax_updater, mb_heartbeat_time );
}

// run it first time
mb_ajax_updater( <?= get_option('mb_heartbeat_time'); ?> );

But I'm not exactly sure where I'm supposed to go from here. How do I validate that the ajax is being sent from the get_current_user_id? How do I add the PHP parts so the update_user_meta will update? Is there a better way of doing this, than what I'm attempting?

All I want to do is when one screen is updated, reflect it on the other screen in the time allocated by the settings.

• ajax
• jquery
• user-meta

1 Answer 1

My solution ended up being:

<script>
var mb_user_location_current = ...
...
</script>

And then used those variables from the head to the function.

But then ventured down other paths for different solutions.