在ajax update db之后更改按钮文本

Question

I'm trying to learn php and 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? From "MARK AS DONE" to "DONE" and vice versa. 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

Added if else statements inside ajax success function to be able to change a tag text from MARK AS DONE to DONE and vice versa.

Try:

jQuery(document).ready( function(){ 

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

    var rml_post_id = jQuery(this).data( 'id' );
    var ts = jQuery(this);
    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 ) {
            if(ts.html()=="DONE") { ts.html("MARK AS DONE"); } // ts.html()=="DONE" - maybe changed based on response
            else { ts.html("DONE"); }
            jQuery('.rml_contents').html(response);
        }
    });

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