Изменить текст кнопки после обновления базы данных через AJAX

Вопрос или проблема

Я пытаюсь научиться серьезной разработке php WP. Моя цель – отмечать посты как выполненные/прочитанные по нажатию кнопки. Я нашел этот отличный плагин с обучением по ajax. Вот ссылка на учебник и на плагин. Я успешно отредактировал плагин под свои нужды. При нажатии проверяется, есть ли уже этот id в массиве, если да, то элемент удаляется из массива. Если id нет в массиве или массив пуст, то добавляется id поста в массив. После этого массив обновляется в базе данных.

Вот код для кнопки, которая добавляется после содержания поста:

public function rml_button( $content ) {

    $rml_post_id = get_the_id();

    // Показывать ссылку "прочитать позже" только если пользователь вошел в систему
    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() . '">СДЕЛАНО</a>';
                $content .= $html;

            }

            else {
                $html .= '<a href="#" class="rml_bttn" data-id="' . get_the_id() . '">ОТМЕТИТЬ КАК СДЕЛАНО</a>';
                $content .= $html;
            }
        }   

        else {
            $html .= '<a href="#" class="rml_bttn" data-id="' . get_the_id() . '">ОТМЕТИТЬ КАК СДЕЛАНО</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 );

    // Всегда выходить из функций, отправляющих Ajax контент     

    die();



}

Наконец, вот .js для вызова ajax:

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? Как вызвать эту функцию rml_button() внутри read_me_later(), чтобы текст кнопки изменился после обновления базы данных.

Спасибо.

Вам просто нужно установить текст вашего тега A, используя $a.text('abc') в вашей части jQuery. Я сделал что-то похожее с class в части jQuery Как безопасно добавить Ajax кнопку на административную страницу

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('Изменено');
        }
    });

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

});

Ответ или решение

Ваша задача заключается в обновлении текста кнопки после успешного выполнения AJAX-запроса при пометке поста как "Готово". Давайте рассмотрим ваши этапы и необходимые изменения, чтобы добиться желаемого результата.

1. Изменение текста кнопки после обновления базы данных

Для достижения этой цели вам нужно внести некоторые изменения в ваш JavaScript код, который отвечает за AJAX-запрос. Это позволит вам динамически менять текст кнопки после того, как сервер успешно обработает запрос и обновит базу данных.

Код JavaScript

Вот как вы можете изменить ваш текущий JavaScript код, чтобы обновить текст кнопки:

jQuery(document).ready(function() { 
    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);

                // Изменяем текст кнопки в зависимости от текущего состояния
                if ($a.text() === 'MARK AS DONE') {
                    $a.text('DONE'); // Если кнопка была "MARK AS DONE", меняем на "DONE"
                } else {
                    $a.text('MARK AS DONE'); // В противном случае возвращаем обратно
                }
            }
        });
    });
});

2. Поддержка правильного состояния кнопки

Важно, чтобы текст кнопки правильно отражал состояние её активности. Убедитесь, что текст кнопки соответствует состоянию в базе данных. В вашем текущем коде логики вы проверяете наличие ID поста в массиве и в зависимости от этого выводите дело на кнопку. Это также можно улучшить.

3. Обновление текста кнопки на сервере (по желанию)

Вы можете также отправить обратно новое состояние текста кнопки как часть ответа от сервера. Например, можно сделать следующее:

Модификация функции read_me_later()

Добавьте в вашу функцию read_me_later() возврат текущего состояния (например, "DONE" или "MARK AS DONE") в массив echo. Это позволит вашему JavaScript коду обновить текст кнопки на основании ответных данных:

public function read_me_later() {
    check_ajax_referer('rml-nonce', 'security');
    $rml_post_id = $_POST['post_id'];
    $value = get_user_meta(wp_get_current_user()->ID, 'rml_post_ids', true);

    if ($value) {
        if (in_array($rml_post_id, $value)) {
            $key = array_search($rml_post_id, $value);
            unset($value[$key]);
            $new_text = 'MARK AS DONE'; // Если удаляем пост
        } else {
            $value[] = $rml_post_id;
            $new_text = 'DONE'; // Если добавляем пост
        }
    } else {
        $value = array($rml_post_id);
        $new_text = 'DONE'; // Если массив пустой
    }

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

    // Возвращаем состояние кнопки как часть ответа AJAX
    echo json_encode(array('text' => $new_text));
    wp_die(); // Завершаем
}

Изменение JavaScript для обработки нового ответа

Теперь вам нужно изменить ваш JavaScript, чтобы он использовал текст, возвращаемый от сервера:

success: function(response) {
    var jsonResponse = JSON.parse(response); // Парсим ответ
    jQuery('.rml_contents').html(response);
    $a.text(jsonResponse.text); // Обновляем текст на основании ответа
}

Заключение

Теперь, когда вы выполните эти изменения, вы сможете динамически менять текст кнопки после успешного выполнения AJAX-запроса к вашей базе данных. Убедитесь, что вы тестируете каждое изменение для проверки корректности работы кода. Если у вас есть дополнительные вопросы или нужна помощь, не стесняйтесь спрашивать.

Оцените материал
Добавить комментарий

Капча загружается...