Как правильно сменить текст кнопки после отправки товара в корзину?

Question

[Riiri]

После успешной отправки товара в корзину мне нужно чтобы текст кнопки поменялся на "В корзине", но к сожалению функция срабатывает только после второго клика по кнопки, а без функции click она не работает.
Сама кнопка находится в цикле foreach.
Код php

<td>
			<?if(count($arElement["OFFERS"]) > 0):?>
				<?foreach ($arElement["OFFERS"] as $offer): ?>
					<div class="button456" >
						<button id="but<?=$offer["ID"]?>" onclick="add2basket(<?=$offer["ID"]?>)">To the basket</button>
						</div>
					<?endforeach?>

					<?else:?>
					<div class="button111">
					<button class="but123"  id="but<?=$arElement["ID"]?>" onclick="add2basket(<?=$arElement["ID"]?>)">To the basket</button>
				</div>
				<?endif?>

		</td>

Код js

<script type="text/javascript">
	function add2basket(ID) {
	$.ajax({
		type: "POST",
		url: "/ajax/add_tobasket.php",
		dataType: 'html',
		data: {
			PRODUCT_ID: ID,
			QUANTITY: $(".quantity" + ID).val(),
		},

		success: function (data) {
//так срабатывает только после второго клика							
$(document).on('click', 'button', function(){
	$(this).closest('button').text("In the basket")
});
	$(this).closest('button').text("In the basket");//а так не срабатывает вообще
		},
	});
}
</script>

Comments

[Сергей Сергей]

Привязку обработчика события надо ставить вне обработчика успешного запроса, и один раз.

[Riiri]

Сергей Сергей, onclick?

[Сергей Сергей]

Да.

[Riiri]

Сергей Сергей, так мне как раз и нужно чтобы после успеха менялся текст кнопке, а куда же мне его поставить?

[Сергей Сергей]

Оставить как в варианте "не срабатывает вообще", но вместо this протолкать ссылку на соответствующую кнопку. Это задача на области видимости переменных и замыкания.

мои стереотипные домыслы

Обычно в php что-то такое делается через глобальные переменные или анонимки с use. Часто ли адепты Битрикса этим пользуются? Думаю, что нет. А значит, пришло время набираться новых знаний.

Answer 1

[Sadovikow]

в success: function(data) вы первым кликом добавляете событие – при нажатии на кнопку, менять текст. А уже при втором нажатии это событие применяется.

Я бы передавал не только ID в функцию, а и всю DOM-сущность (саму кнопку).

<button data-id="<?=$offer["ID"]?>" id="but<?=$offer["ID"]?>" onclick="add2basket(this)">To the basket</button>

function add2basket(e) {
var button = $(e);
var ID = button.attr('data-id');
  $.ajax({
    type: "POST",
    url: "/ajax/add_tobasket.php",
    dataType: 'html',
    data: {
      PRODUCT_ID: ID,
      QUANTITY: $(".quantity" + ID).val(),
    },

    success: function (data) {
     button.closest('button').text("In the basket");
  });
}

Прошу прощения, если есть ошибки в коде, главное донести мысль. Проблема лишь в том, что в success вы заводите событие при первом клике, но не вызываете изменение в кнопке

Answer 2

[Ольга]

Вы вешаете обработчик на кнопку, когда система УЖЕ попыталась добавить в корзину товар. В случае "success" нужно посмотреть, что приходит в "data" и в зависимости от содержимого менять содержимое кнопки. Например пришла ошибка и товар не был добавлен в корзину, тогда писать "в корзине" - нельзя.
Если в принципе на ошибки пофиг, то тогда вне зависимости от "data" сразу меняем надпись. Т.е. $(document).on('click' - не нужно.
Как найти, что за кнопка была нажата? В функцию приходит "ID" продукта, по нему находим кнопку на странице и заменяем кнопку. Либо можно найти , где вызывается функция add2basket(ID) и менять там, но этот вариант хуже, т.к. мы не будем знать,а был ли вообще ответ от сервера.