Change button text after ajax db update

Question

I'm trying to learn serious php WP developing. My goal is to mark posts done/read on button click. I found this great ajax tutorial plugin. Here is the link of the tutorial, and for the plugin. I have successfully manage to edit the plugin form my needs. On click it checks if there is already that id in the array, if it is it deletes that element from the array. If there is not id in the array, or the array is empty it adds post id into the array. Afterwards the array is updated into db.

Here is the code for the button, that is added after the post content:

public function rml_button( $content ) {

    $rml_post_id = get_the_id();

    // Show read me later link only when user is logged in
    if( is_user_logged_in() && get_post_type() == post ) {

        if( get_user_meta( wp_get_current_user()->ID, 'rml_post_ids', true ) !== null ) {
        $value = get_user_meta( wp_get_current_user()->ID, 'rml_post_ids', true );
        }

        if( $value )  {

            if (in_array($rml_post_id, $value)) {

                $html .= '<a href="#" class="rml_bttn" data-id="' . get_the_id() . '">DONE</a>';
                $content .= $html;

            }

            else {
                $html .= '<a href="#" class="rml_bttn" data-id="' . get_the_id() . '">MARK AS DONE</a>';
                $content .= $html;
            }
        }   

        else {
            $html .= '<a href="#" class="rml_bttn" data-id="' . get_the_id() . '">MARK AS DONE</a>';
            $content .= $html;
        }   


    }
    return $content;

} 

Here is the code for updating the db:

public function read_me_later() {

    check_ajax_referer( 'rml-nonce', 'security' );
    $rml_post_id = $_POST['post_id']; 
    $echo = array();

    if( get_user_meta( wp_get_current_user()->ID, 'rml_post_ids', true ) !== null ) {
        $value = get_user_meta( wp_get_current_user()->ID, 'rml_post_ids', true );
    }

    if( $value )  {

        if (in_array($rml_post_id, $value)) {

            foreach (array_keys($value, $rml_post_id, true) as $key) {
                unset($value[$key]);

            }
            $echo = $value;

        }

        else {
            $echo = $value;
            array_push( $echo, $rml_post_id );
        }
    }   

    else {
        $echo = array( $rml_post_id );
    }



    update_user_meta( wp_get_current_user()->ID, 'rml_post_ids', $echo );

    // Always die in functions echoing Ajax content     

    die();



}

Finally, here is the .js for the ajax call:

jQuery(document).ready( function(){ 

jQuery('#content').on('click', 'a.rml_bttn', function(e) { 
    e.preventDefault();

    var rml_post_id = jQuery(this).data( 'id' );

    jQuery.ajax({
        url : rml_obj.ajax_url,
        type : 'post',
        data : {
            action : 'read_me_later',
            security : rml_obj.check_nonce,
            post_id : rml_post_id
        },
        success : function( response ) {
            jQuery('.rml_contents').html(response);
        }
    });

    //jQuery(this).hide();
}); 

});

What I cannot figure out, and sorry if it is a stupid question, is how to change button text after the ajax? How to call this function rml_button(), inside read_me_later() so that button text will be changed after the db update.

Thank you.

Answer 1

You only need to set the text of your A tag using $a.text('abc') in your jQuery part. I did similar with the class in jQuery part of How to securely add an Ajax button to an admin page

jQuery('#content').on('click', 'a.rml_bttn', function(e) { 
    e.preventDefault();
    var $a = jQuery(this);

    var rml_post_id = $a.data( 'id' );

    jQuery.ajax({
        url : rml_obj.ajax_url,
        type : 'post',
        data : {
            action : 'read_me_later',
            security : rml_obj.check_nonce,
            post_id : rml_post_id
        },
        success : function( response ) {
            jQuery('.rml_contents').html(response);
            $a.text('Changed');
        }
    });

    //jQuery(this).hide();
}); 

});