2

So there's function in wordpress to update a named option/value pair to the options database table: <?php update_option( $option, $new_value ); ?>. And what I'm trying to do implement this function in javascript so when you hit the bottom of the page an option would update. I am using this script to check when you hit bottom of the page:

$(window).scroll(function () {
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
      /***update options***/
   }
});

So my question is how to implement update_option function into javascript.

1
  • 2
    Use ajax. Have you tried that?
    – fuxia
    Jun 4, 2013 at 10:24

1 Answer 1

2

JavaScript

$(window).scroll(function () {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        /***update options***/
        $.ajax({
            type:   'POST',
            url:    'http://www.example.com/wp-admin/admin-ajax.php',
            data:   {
                action    : 'hit-bottom',
                option    : $option, // your option variable
                new_value : $new_value // your new value variable
            },
            dataType: 'json'
        }).done(function( json ) {
            alert( "Ajax call succeeded, let's see what the response was." );
            if( json.success ) {
                alert( "Function executed successfully and returned: " + json.message );
            } else if( !json.success ) {
                alert( "Function failed and returned: " + json.message );
            }
        }).fail(function() {
            alert( "The Ajax call itself failed." );
        }).always(function() {
            alert( "This message is always displayed, whether the call failed or succeeded." );
        });
    }
});

functions.php

/* hit bottom of screen event  */
add_action( 'wp_ajax_hit-bottom', 'wpse_hit_bottom' );
add_action( 'wp_ajax_nopriv_hit-bottom', 'wpse_hit_bottom' );
function wpse_hit_bottom() {
    $option = $_POST['option'];
    $new_value = $_POST['new_value'];

    if( !isset( $option ) || $option == '' || !isset( $new_value ) || $new_value = '' ) {
        die(
            json_encode(
                array(
                    'success' => false,
                    'message' => 'Missing required information.'
                )
            )
        );
    }

    update_option( $option, $new_value );
    die(
        json_encode(
            array(
                'success' => true,
                'message' => 'Database updated successfully.'
            )
        )
    );
}
2
  • Question about the timing of code execution. I assume that when the 'screen bottom' event happens, the JS code is executed. The POST command in JS Is then executed, which creates the $_POST values. Then the wp_hit_bottom() PHP function is executed, which uses the $_POST values to update the option. Is this correct? Thanks....(if you are still around after all these years since this answer) Oct 1, 2022 at 22:07
  • 1
    That is correct. Furthermore, the die calls in PHP will then provide the returned response message to the AJAX call in JS (inside the done block). Oct 2, 2022 at 9:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.