0 Replies - 1672 Views - Last Post: 27 September 2017 - 04:42 PM Rate Topic: -----

#1 kaitrobe  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 27-September 17

Bootbox.js/Bootstrap Modal loading JSON data

Posted 27 September 2017 - 04:42 PM

I am trying to use a bootbox.js modal to load my JSON file's data. I am able to get the modal to show up, but the JSON data that I want to display will not display.

JSON file:
{
      "id": 30,
      "categoryName": "Home",
      "itemName": "Bench",
      "itemPrice": "$80.00",
      "itemDescription": "A place for someone to sit and enjoy the weather",
      "itemImage": "img/outdoor_bench.jpg"
    },
    {
      "id": 31,
      "categoryName": "Jewelry",
      "itemName": "Silver Ring",
      "itemPrice": "$170.00",
      "itemDescription": "Beatiful ring that will make your girl happy",
      "itemImage": "img/jewelry_silverRing.jpg"
    },



HTML for the modal:
<div id="myModal" class="modal fade">

        <div class="modal-dialog">

            <div class="modal-content">

                <!-- dialog body -->
                <div class="modal-body">

                    <button type="button" class="close" data-dismiss="modal">&times;</button>

                </div>

                <!-- dialog buttons -->
                <div class="modal-footer">
                    <button type="button" class="btn add-to-cart">ADD TO CART</button>
                </div>
            </div>
        </div>
    </div>




JS file:
var _modalData = function() {
    $.getJSON("data/data.json", function (data) {
        $('.item').click(function(e) {

            var list = $('.modal-body');

            $.each(_itemData, function(idx, it){
                if(currentItemID === it.id){
                    var list = '<div><h2 class="Product">' + it.itemName + '</h2><h4 class="Price">' + it.itemPrice + '</h4><p class="Description">' + it.itemDescription + '</p></div><img src="' + it.itemImage + '">';
                    det.appendTo(list);
                }
            });

            var dialog = bootbox.dialog({
                title: "Product Name",
                message: "Description",
                buttons: {
                    addToCart: {
                        label: 'Add to Cart',
                        className: 'btn-primary',
                        callback: function(){
                            // do something here
                        }
                    }
                }
            });
        })
    })

}



I have tried to replace the title and description of the bootbox to the same format as my list, but its just completely makes the modal stop working.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1