Как с помощью AJAX изменить текст на кнопке? 

Добрый вечер! Поделитесь, пожалуйста, как можно изменить текст кнопки после выполнения ajax-запроса? У меня есть кнопка, и код для нее выглядит следующим образом: 

<pre><code class="html">&lt;button type="button" id="button-cart" class="btn btn-primary btn-lg btn-block"&gt;&lt;img src="/catalog/view/theme/default/image/icons/cart.svg" width="30" height="27" alt="button_cart"&gt;В КОРЗИНУ&lt;/button&gt;</code></pre> 

Также у меня есть элемент, в который я хочу добавить текст: 

<pre><code class="html">&lt;div id="total_carts" style="display: inline-block;"&gt;В КОРЗИНУ&lt;/div&gt;</code></pre> 

В ajax-запросе я использую следующий код: 

<pre><code class="java">if (json['success']) {
     $('#total_carts').html('В КОРЗИНЕ ' + json['total_cart'] + ' шт.');
}</code></pre> 

Но текст не обновляется. Спасибо!
  • 10 сентября 2024 г. 19:13
Ответы на вопрос 2 
Добрый вечер!

Чтобы изменить текст на кнопке после выполнения AJAX-запроса, вам нужно обратиться к элементу кнопки по его идентификатору (ID) и обновить его текст с помощью метода jQuery `.html()` или `.text()`. В вашем случае, вы можете сделать это следующим образом:

1. Убедитесь, что вы правильно получаете `json['success']` и `json['total_cart']` в результате AJAX-запроса.
2. После обновления текста в элементе `<div id="total_carts">`, добавьте код для изменения текста на кнопке.

Вот пример кода, который производит необходимые изменения:

```javascript
$.ajax({
    url: 'ваш_адрес_сервера', // Замените на ваш URL
    type: 'POST',
    data: { /* ваши данные */ },
    dataType: 'json',
    success: function(json) {
        if (json['success']) {
            $('#total_carts').html('В КОРЗИНЕ ' + json['total_cart'] + ' шт.');
            $('#button-cart').html('<img src="/catalog/view/theme/default/image/icons/cart.svg" width="30" height="27" alt="button_cart">В КОРЗИНЕ ' + json['total_cart'] + ' шт.'); // Измените текст на кнопке
        }
    },
    error: function() {
        alert('Произошла ошибка. Попробуйте снова.');
    }
});
```

### Объяснение:
- `$('#total_carts').html('В КОРЗИНЕ ' + json['total_cart'] + ' шт.');`: обновляет текст в `div` с идентификатором `total_carts`.
- `$('#button-cart').html('<img src="/catalog/view/theme/default/image/icons/cart.svg" width="30" height="27" alt="button_cart">В КОРЗИНЕ ' + json['total_cart'] + ' шт.');`: обновляет текст на кнопке, добавляя к нему количество товаров в корзине.

Если вы хотите, чтобы текст на кнопке был просто изменён, без картинки, можно использовать метод `.text()` вместо `.html()`, если это уместно.

Это должно работать, если всё остальное настроено правильно и AJAX-запрос выполняется успешно. Убедитесь, что ваши пути и данные отправляются верно.
во-первых выведите, что вам приходит в ответе от сервера: console.debug(json); 
 уточню, что метод .debug есть только в FireFox, для Chrome нужно использовать .log. 
 
 во-вторых, JSON это может быть объект, а значит нужно проверять json.success. 
 
 в-третьих, у вас в кнопке один HTML ID, а в обработчике ответа -- другой. 
 т.е. вы слушаете событие на одном элементе, а меняете в другом. 
 если иное вам не нужно, уточните вопрос. 
 
 вам коде слушателя сделать примерно следующее для работы с одной (нажатой) кнопкой: 
 
 
$('button#button-cart').on(
    'click',
    (event) => {
          event.preventDefault();
          let button = event.currentTarget;
          $.ajax(
                 {
                       //параметры запроса
                      success: (response) => {
                           if(response.success) {
                                  button.html('текст кнопки');
                           }
                 }
             }
        );
     }
);
 
 
 но это уберёт картинку. 
 вам в идеале придётся получить значение содержимого тега кнопки и _заменить_ нужный текст. 
 
 вообще это будет работать криво, т.к. вы опираетесь на HTML ID, а по вашей вёрстке не видно, что этот HTML ID уникален для документа. 
 
 если вам нужно менять в другом элементе текст -- то в коде слушателя работайте уже с ним.
Похожие вопросы
    Показать ещё