Разсуждения о работе кода php,js

Повторяю видеокурс для чайников. Как бывает “все работало работало и … само сломалось”

<a href="/cart/add/<?php echo $product['id']; ?>" 
class="btn btn-default add-to-cart" 
data-id="<?php echo $product['id']; ?>">

      <i class="fa fa-shopping-cart"></i>В корзину

</a>

по клику на кнопку “В корзину” должен запустится скрипт (action) который добавляет $product['id'] в сессию. Работало все штатно и я, осознанно, ничего не менял, но…перестал отрабатываться этот клик. Если убрать class - работает. CSS дефолтный bootstrap

Смотрю в Devtools-Network, а по клику запускается js: cart/addAjax/undefined

<script>
    $(document).ready(function(){
        $(".add-to-cart").click(function () {
            var id = $(this).attr("data-id");
            $.post("/cart/addAjax/"+id, {}, function (data) {
                $("#cart-count").html(data);
            });
            return false;
        });
    });
</script>

т.е. js по клику на элементе с классом add-to-cart берет значение аттрибута data-id и передает его по ссылке. Но почему undefined, если аттрибут data-id имет значение?

Так получилось что на одну кнопку 2 действия прописано: синхрон /cart/add/ и асинхрон /cart/addAjax. И как узнать кто из них в приоритете запуска?

Так тут JS обрабатывает клик и отменяет дальнейшее распространение события/стандартный обработчик.

Если JS отключен, то сработает обычный переход.

ок, отмечаю для себе JS имеет преимущество

здесь не понял. Если return false; то не выполнится код js и по ссылке из <a> смогу перейти?

Без return false сработает и обычный переход.

https://stackoverflow.com/a/1357151/964478

return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation on the passed jQuery.Event object.

e.preventDefault() will prevent the default event from occuring, e.stopPropagation() will prevent the event from bubbling up and return false will do both. Note that this behaviour differs from normal (non-jQuery) event handlers, in which, notably, return false does not stop the event from bubbling up.

результат должен вставится на страницу в html елемента #cart-count. Ok. Перерисовка(обновление) автоматически будет или тригер какой-то нужен?
Я ожидаю, например,

  • #cart-count.html = (0)
  • кликаю на .add-to-cart
  • #cart-count.html изменится на (1)

получаю:

  • #cart-count.html = (0)
  • кликаю на .add-to-cart
  • #cart-count.html = (0)
  • жму Обновить страницу
  • #cart-count.html изменяется на (1)

Так а адрес правильный уже?

Так, адрес уже правильный в js : cart/addAjax/34

Тогда надо смотреть

  1. Успешно ли завершился запрос.
  2. Если да, то что в ответе.
  3. Правильный ли селектор
  1. Headers-Status Code 200 ok
  2. Response 1
  3. Конечно же нет, сперва надо научится различать # и . :wink: