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

时间:2018-04-26 12:18:42

标签: php ajax wordpress

我正在尝试学习php和WP开发。我的目标是在点击按钮上标记完成/阅读的帖子。我找到了这个很棒的ajax教程插件。以下是tutorialplugin的链接。我已成功设法编辑我需要的插件。单击它会检查数组中是否已存在该ID,如果是,则从数组中删除该元素。如果数组中没有id,或者数组为空,则将post id添加到数组中。然后将数组更新为db。

这是按钮的代码,在帖子内容之后添加:

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;

}

以下是更新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();      
} 

最后,这是ajax调用的.js:

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();
});     
});

我无法弄清楚,如果这是一个愚蠢的问题,对不起是如何在ajax之后更改按钮文字?来自&#34; MARK AS DONE&#34;到&#34; DONE&#34;反之亦然。如何在read_me_later()中调用此函数rml_button(),以便在db更新后更改按钮文本。

谢谢。

1 个答案:

答案 0 :(得分:1)

if else statements函数中添加了ajax success,以便能够将a tag文本从MARK AS DONE更改为DONE,反之亦然。

<强>尝试:

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();
});     
});