user7087446 user7087446 - 1 month ago 8
JSON Question

check if class of dynamic content (json) still exists

I am building a shopping cart and after clicking the add button, the item image will fly visually to the cart and will remove itself from the store. Now I want to show some html content when the store is empty. I have already kicked off (check ajaxComplete function below). As you might see this is a dynamic content, so it must be checked if the class "item" exists, if not it will return the statement $("#mobile").html("No item in store anymore"). Anyone who knows how to fix this.



var smartphones = [{
rom: 'rom1',
image: 'image1.jpg',
alt_image: 'alt_image1.jpg'
}, {
rom: 'rom2',
image: 'image2.jpg',
alt_image: 'alt_image2.jpg'
}];

function renderSmartphones() {
var newContent = "";
for (var i = 0; i < smartphones.length; i++) {
newContent += '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 box item">';
newContent += '<div class="rom">' + smartphones[i].rom + '</div>';
newContent += '<img src="' + smartphones[i].image + '" class="image" alt="' + smartphones[i].alt_image + '" />';
newContent += '<button class="add-to-cart" type="button">add to cart</button>';
newContent += '</div>';
}
$("#mobile").html(newContent);
}

$(document).on("click", ".add-to-cart", function() {
var cart = $("#shopping-cart");
var item = $(this).closest(".item");
var imageToDrag = $(this).closest(".item").find(".image");
if(imageToDrag) {
var imageClone = imageToDrag.clone()
.offset({
top: imageToDrag.offset().top,
left: imageToDrag.offset().left
})
.css({
"background": "transparent",
"position": "absolute",
"height": "150",
"width": "150",
"z-index": "100"
})
.appendTo($("body"))
.animate({
"top": cart.offset().top -70,
"left": cart.offset().left -5,
"width": 80,
"height": 80
}, 1000);

setTimeout(function(){ //When the item is added to the cart, the item will be removed after 2 seconds
item.remove();
}, 2000);

imageClone.animate({ //image will fly to cart
"width": 0,
"height": 0
}, function () {
$(this).detach(); // removes selected element including all text and child nodes. However it keeps data and event.
});
}
});

$(document).ajaxComplete(function() {
if($("#mobile").closest(".item")) {
$("#mobile").html("");
} else {
$("#mobile").html("No item in store anymore");
}
});

renderSmartphones();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<div id="wrapper">
<span><i id="shopping-cart" alt="shopping-cart-icon"></i></span>

<div id="mobile"></div>
</div>
</body>




Answer

I believe you are looking for following behavior. Here we are actually checking the count of .item present in container. And if its zero then only we are showing the message.

var smartphones = [{
  rom: 'rom1',
  image: 'image1.jpg',
  alt_image: 'alt_image1.jpg'
}, {
  rom: 'rom2',
  image: 'image2.jpg',
  alt_image: 'alt_image2.jpg'
}];

function renderSmartphones() {
  var newContent = "";
  for (var i = 0; i < smartphones.length; i++) {
    newContent += '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 box item">';
    newContent += '<div class="rom">' + smartphones[i].rom + '</div>';
    newContent += '<img src="' + smartphones[i].image + '" class="image" alt="' + smartphones[i].alt_image + '" />';
    newContent += '<button class="add-to-cart" type="button">add to cart</button>';
    newContent += '</div>';
  }
  $("#mobile").html(newContent);
}

$(document).on("click", ".add-to-cart", function() {
  var cart = $("#shopping-cart");
  var item = $(this).closest(".item");
  var imageToDrag = $(this).closest(".item").find(".image");
  if (imageToDrag) {
    var imageClone = imageToDrag.clone()
      .offset({
        top: imageToDrag.offset().top,
        left: imageToDrag.offset().left
      })
      .css({
        "background": "transparent",
        "position": "absolute",
        "height": "150",
        "width": "150",
        "z-index": "100"
      })
      .appendTo($("body"))
      .animate({
        "top": cart.offset().top - 70,
        "left": cart.offset().left - 5,
        "width": 80,
        "height": 80
      }, 1000);

    setTimeout(function() { //When the item is added to the cart, the item will be removed after 2 seconds
      item.remove();

      checkItemPresence();

    }, 2000);

    imageClone.animate({ //image will fly to cart
      "width": 0,
      "height": 0
    }, function() {
      $(this).detach(); // removes selected element including all text and child nodes. However it keeps data and event. 

    });
  }
});

function checkItemPresence() {
  if ($("#mobile").find(".item").length == 0) {
    $("#mobile").html("No item in store anymore");
  }
}
$(document).ajaxComplete(function() {
  checkItemPresence();
});

renderSmartphones();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="wrapper">
    <span><i id="shopping-cart" alt="shopping-cart-icon"></i></span>

    <div id="mobile"></div>
  </div>
</body>

Comments