Search code examples
jqueryjquery-uijquery-mobilejquery-plugins

how to do quan for other items? [priv]

So I am able to add quantity for all the items in the list and all the quantity is able to update in the array, however, I can't seem to update the quantity in the html and it only updates in the first item of the list, can someone help me with this problem.

This is my script and html code for page 3.

var arr = [{
    img: 'umbrella.png',
    item: 'Umbrella',
    price: '$10',
    value: 1,
    qty: 0
  },
  {
    img: 'lipbalm.png',
    item: 'Lip Balm',
    price: '$5',
    value: 2,
    qty: 0
  },
  {
    img: 'flu.png',
    item: 'Flu Medication',
    price: '$5',
    value: 3,
    qty: 0
  },
  {
    img: 'glucose.png',
    item: 'Glucose Sweets',
    price: '$1',
    value: 4,
    qty: 0
  }
];
var globalIndex = 0;

function populateList() {
  console.log('populateList');

  var s = "";
  $.each(arr, function(index, val) {
    console.log("index:" + index);
    var img = arr[index].img;
    var item = arr[index].item;
    var price = arr[index].price;
    var value = arr[index].value;
    var qty = arr[index].qty;
    s = s + "<li><a href='#'><img src='images/" + img + "'><h3>" + item + "</h3><p>" + price + "</p>" + "<p id='qty'>Qty: " + qty + "</p></a><a href='#' id='addQtyBtn' class='addQtyBtn'></a></li>";
  });
  $("#myList").html(s);
  $('#myList').listview('refresh');
}

$(document).on("pagecreate", "#page3", function() {
  populateList();

  $('#myList li').on('tap', function() {
    var index = $(this).index();
    globalIndex = index;
    console.log('list item was tapped' + index);

    if ($('#addQtyBtn').hasClass('addQtyBtn')) {
      var newQty = arr[globalIndex].qty;
      newQty += 1;
      console.log(newQty);

      //update in array
      arr[globalIndex].qty = newQty;

      console.log(arr);

      $('#qty').html("Qty: " + newQty);
    } else {
      return false;
      console.log('error');
    };

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.css" type="text/css" rel="stylesheet" />
  <link href="themes/jquery.mobile.icons.min.css" type="text/css" rel="stylesheet" />
  <link href="themes/CA1_Theme.min.css" type="text/css" rel="stylesheet" />

  <script src="jquery-1.12.4.min.js" type="text/javascript"></script>
  <script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<div data-role="page" id="page3">
  <div data-role="main" class="ui-content">

    <ul id='myList' data-role='listview' data-split-icon="plus"></ul>

    <div data-role="content" class="ui-content">
      <button id="checkoutBtn" class="ui-btn ui-corner-all" style="width: 70%; margin-left: auto; margin-right: auto;">
                        <a href="#page4" data-transition="flip">Checkout</a>
                    </button>
      <!-- <button id="checkoutBtn" class="ui-btn ui-corner-all">Checkout</button> -->
    </div>

  </div>

  <div data-role="footer" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li><a href="#page1" class="ui-btn ui-icon-home ui-btn-icon-top">Home</a></li>
        <li><a href="#page2" class="ui-btn ui-icon-plus ui-btn-icon-top">Page 2</a></li>
        <li><a href="#page3" class="ui-btn ui-icon-info ui-btn-icon-top">Page 3</a></li>
        <li><a href="#page4" class="ui-btn ui-icon-location ui-btn-icon-top">Page 4</a></li>
        <li><a href="#page5" class="ui-btn ui-icon-plus ui-btn-icon-top">Page 5</a></li>
      </ul>
    </div>
  </div>
</div>

</html>

Solution

  • You don't need that globalIndex, and You don't even need to assign an unique id to Your list items. You can use a custom data-attribute and store Your data inside the list item itself. This way, Your data is directly bound to each listview item and You can always retrieve it when a listview item will be clicked.

    DEMO:

    var arr = [
  {img: 'umbrella.png', item: 'Umbrella', price: '$10', value: 1, qty: 0},
  {img: 'lipbalm.png', item: 'Lip Balm', price: '$5', value: 2, qty: 0},
  {img: 'flu.png', item: 'Flu Medication', price: '$5', value: 3, qty: 0},
  {img: 'glucose.png', item: 'Glucose Sweets', price: '$1', value: 4, qty: 0}
];

function populateList() {
  var s = '';
  $.each(arr, function (index, item) {
    s += '<li data-icon="false" data-value="' + item.value + '" data-index="' + index + '">';
    s +=   '<a href="#">';
    s +=     '<h3>' + item.item + '</h3>';
    s +=     '<p>' + item.price + '</p>';
    s +=     '<p class="qty">Qty: ' + item.qty + '</p>';
    s +=   '</a>';
    s +=   '<div class="split-custom-wrapper">';
    s +=     '<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-notext split-custom-button"></a>';
    s +=     '<a href="#" class="ui-btn ui-icon-minus ui-btn-icon-notext split-custom-button"></a>';
    s +=   '</div>';
    s += '</li>';
  });
  $("#myList").html(s).listview("refresh");
}

$(document).on("pagecreate", "#page3", function() {
  populateList();

  $('#myList a.ui-icon-plus').on('vclick', function() {
    // go up to find the parent list item
    var listViewItem = $(this).closest("li"),
        index = parseInt(listViewItem.data("index"));
    // update in array
    arr[index].qty += 1;
    // update in listview
    listViewItem.find(".qty").text("Qty: " + arr[index].qty);
    return false;
  })
  
  $('#myList a.ui-icon-minus').on('vclick', function() {
    var listViewItem = $(this).closest("li"),
        index = parseInt(listViewItem.data("index"));
    if(arr[index].qty > 0) {
      arr[index].qty -= 1;
      listViewItem.find(".qty").text("Qty: " + arr[index].qty);
    }
    return false;
  })
  
});
    #myList > li > a {
  margin-right: 3em !important;
}

.split-custom-wrapper {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}

.split-custom-button {
  position: relative;
  box-sizing: border-box;
  height: 50% !important;
  margin: 0 !important;
  min-width: 3em !important;
}

#checkoutBtn {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

/* JQM no frills */
.ui-btn,
.ui-btn:hover,
.ui-btn:focus,
.ui-btn:active,
.ui-btn:visited {
  text-shadow: none !important;
}

/* Remove JQM blue halo */
.ui-btn:focus {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

/* Speed-up some android & iOS devices */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

  <div data-role="page" id="page3">
    <div data-role="main" class="ui-content">
      <ul id="myList" data-role="listview"></ul>
      <br>
      <a id="checkoutBtn" class="ui-btn ui-corner-all" href="#page4" data-transition="flip">Checkout</a>
    </div>

    <div data-role="footer" data-position="fixed">
      <div data-role="navbar">
        <ul>
          <li><a href="#page1" class="ui-btn ui-icon-home ui-btn-icon-top">Home</a></li>
          <li><a href="#page2" class="ui-btn ui-icon-plus ui-btn-icon-top">Page 2</a></li>
          <li><a href="#page3" class="ui-btn ui-icon-info ui-btn-icon-top">Page 3</a></li>
          <li><a href="#page4" class="ui-btn ui-icon-location ui-btn-icon-top">Page 4</a></li>
          <li><a href="#page5" class="ui-btn ui-icon-plus ui-btn-icon-top">Page 5</a></li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>