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

Есть карточка товара , если корзина 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 рублей , несмотря на то , что все атрибуты на кнопке уже поменялись, но если обновить страницу и добавить в корзину с отмеченной опцией , то всё будет работать правильно (создастся два товара с разной стоимостью. Возможно ли реализовать правильную работу добавления в корзину без обновления страницы? Вопрос о другом скрипте для корзины заказчиком не рассматривается.
Технический домен сайта для теста брать только первый пункт меню "Справка в бассейн".
  • Вопрос задан
  • 308 просмотров
Решения вопроса 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); });
});
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
R52.RU Нижний Новгород
от 30 000 до 50 000 руб.
Трэвел Ритэйл Волгоград
от 30 000 до 50 000 руб.
19 окт. 2019, в 02:31
3500 руб./за проект
19 окт. 2019, в 01:07
60000 руб./за проект
18 окт. 2019, в 23:45
150000 руб./за проект