时间戳

首页 > 解决方案 > ajax更新数据库后更改按钮文本

php - ajax更新数据库后更改按钮文本

问题描述

我正在尝试学习 php 和 WP 开发。我的目标是在按钮单击时标记已完成/已阅读的帖子。我发现了这个很棒的 ajax 教程插件。这是教程的链接，以及插件的链接。我已经成功地编辑了我需要的插件表单。单击它会检查数组中是否已经存在该 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;

}

这是更新数据库的代码：

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 之后更改按钮文本？从“MARK AS DONE”到“DONE”，反之亦然。如何在 read_me_later() 中调用此函数 rml_button()，以便在数据库更新后更改按钮文本。

谢谢你。

标签： phpajaxwordpress

解决方案

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

推荐阅读