Обновить мое представление в e js после отправки запроса ajax на узел без перезагрузки страницы - PullRequest
Новая
       3

Обновить мое представление в e js после отправки запроса ajax на узел без перезагрузки страницы

0 голосов
/ 16 июня 2020

У меня есть корзина, в которой есть поле количества, содержащее кнопку «плюс», которую пользователь может нажать, чтобы увеличить количество.
Я искал способ обновить DOM без перезагрузки страницы.
Я узнал около AJAX запросов сегодня, и мне удалось написать код таким образом, что если пользователь нажимает кнопку добавления (+), цена за единицу добавляется к общей цене и отображается.
Моя проблема в том, что это работает только с первой попытки, но при последующих щелчках пользовательский интерфейс не обновляется.

Ajax скрипт: 

$("#plus_btn").on("click", function (event) {
  event.preventDefault();
  event.stopPropagation();
  var onekg = document.getElementById("onekg").value;
  var totalPrice = document.getElementById("totalPrice").value;

  var data = {};
  data.onekg = onekg;
  data.totalPrice = totalPrice;

  $.ajax({
    url: "/update-shopping-cart",
    type: "POST",
    data: data,
  })
    .done(function (result) {
      updateDOM(result);
    })
    .fail(function (err) {
      console.log(err);
    });
});

var updateDOM = function (result) {
  var totalPrice_div = document.getElementById("price_span");

  totalPrice_div.innerHTML = result;
};

E JS ПРОСМОТР 

   <h1>$ 1000</h1>

   //Unit price of item
    <input type="hidden" name="onekg" id="onekg" value="1000">

 <button id="plus_btn" type="button" name="button">+</button>

 //Total price to be updated and displayed on the DOM
   <span id="price_span" >$ 1000</span>
     <input type="hidden" name="totalPrice" id="totalPrice" value="1000">

маршрутов. js

router.route("/update-shopping-cart").post((req, res) => {
    console.log(req.body);
    let totalPrice = parseInt(req.body.totalPrice) + parseInt(req.body.onekg);
    res.status(200);
    res.render('includes/totalPrice', {
        subTotal: totalPrice
    });
    res.end();

});

включает / totalPrice.e js - шаблон e js Для обновления DOM 

<span id="price_span">Ksh. <%=subTotal %></span>

1 Ответ

0 голосов
/ 17 июня 2020

Я обнаружил, что он не обновляется, потому что я не обновлял поле ввода, также содержащее значение includes / totalPrice.e js 

<span id="price_span" class="price text-right">Ksh. <%=subTotal %></span>
<input type="hidden" name="totalPrice" id="totalPrice" value="<%=subTotal %>">

I затем обернул и диапазон, и вход с помощью div 

   <div id="total_div" class="total-price border">
      <span id="price_span" class="price text-right">Ksh. <%=cake.price %></span>
      <input type="hidden" name="totalPrice" id="totalPrice" value="<%=cake.price %>">
   </div>

Затем, наконец, в функции запроса ajax я изменил функцию updateDOM с получения идентификатора диапазона на получение идентификатора этого total_div

var updateDOM = function (result) {
  var totalPrice_div = document.getElementById("total_div");

  totalPrice_div.innerHTML = result;
};

:))

...