Обновление данных без обновления страницы?

Есть карточка товара , если корзина jqcart (сайт без CMS). В карточке товара есть общая стоимость(500 рублей) и опция (checkbox), которая добавляет к стоимости 200 рублей. При нажатии на чекбокс, data атрибуты меняются передаются на кнопку "Добавить в корзину" (data-id , data-title и data-price), всё это потом передается в корзину.
Скрипт, который передает атрибуты на кнопку:
var price = $('#price');
var plus = $('#plus');
var pricedata = $('#price').data('pr');
var plusdata = $('#plus').data('plus');
var summa = pricedata + plusdata;

plus.change(function() {
  if($(this).is(":checked")) {
      price.html(summa);
      $('.add_item').attr('data-id', '2');
      $('.add_item').attr('data-title', 'Справка в бассейн (взрослых)-1');
      $('.add_item').attr('data-price', price.html());
  } else {
    price.html(pricedata);
    $('.add_item').attr('data-id', '1');
    $('.add_item').attr('data-title', 'Справка в бассейн (взрослых)');
    $('.add_item').attr('data-price', price.html());
  }
});

Проблема в следующем - если добавить в корзину товар за 500 рублей а потом нажать чек бокс и добавить в корзину , то в корзину передастся только изначальное значение 500 рублей , несмотря на то , что все атрибуты на кнопке уже поменялись, но если обновить страницу и добавить в корзину с отмеченной опцией , то всё будет работать правильно (создастся два товара с разной стоимостью. Возможно ли реализовать правильную работу добавления в корзину без обновления страницы? Вопрос о другом скрипте для корзины заказчиком не рассматривается.
Технический домен сайта для теста брать только первый пункт меню "Справка в бассейн".
  • Вопрос задан
  • 388 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
А зачем вы меняете атрибуты?
Нужно менять данные.

$('.add_item').data('id', 2);
$('.add_item').data('title', 'Справка в бассейн (взрослых)-1');

И, кстати, код можно сократить, используя объекты (в обоих случаях)
$('.add_item').data({
  id: 2,
  title: 'Справка в бассейн (взрослых)-1'
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@titelhalter
Если при отправке используете $(selector).data("название аттрибута"), то он будет передовать только то значение, которое было записано изначально, а измения data-attribute не будет учитываться. Jquery метод data() и data-attributes в html не тождественны. Чтоб использовать актуальное состояние data-attribute состоит забирать значение с помощью $(selector).attr("название аттрибута").
Ответ написан
@phpavel
Каждой кнопке дать уник. data-id + класс add-to-cart-btn, при нажатии ajax запрос в бд...

$(document).ready(function () {
 $('.add-to-cart-btn').click(function () { (this.dataset.id); });
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы