JSONデータをBootboxモーダルにロード

Question

現在、Bootbox/Bootstrapモーダルに表示する.JSONデータが必要なプロジェクトに取り組んでいます。

この私の現在のHTMLは次のようになります。ここでは

<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ファイルされる：モーダルがうまく働いている、それが表示されないデータそのもの

var _modalData = function() { 
    $('.item').click(function(e) { 

    $('#myModal').on("show", function() { 
     $('#myModal button.btn').on("click", function(e) { 
     $('#myModal').modal('hide'); 
     }); 
    }); 

    $('#myModal').on("hide", function() { 
     $('#myModal button.btn').off("click"); 
    }); 

    $('#myModal').modal({ 
     "backdrop" : "static", 
     "keyboard" : true, 
     "show"  : true 
    }); 

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

ですモーダルで。これはBootboxのcustom dialog機能を使用しています

var _modalData = function() { 
    $('.item').on('click', function(e) { 

    var list = $('<div class="product-list"></div>'); 

    $.each(_itemData, function(idx, it){ 
     if(currentItemID === it.id){ 
     var det = '<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: 'Select Product', 
     message: list, 
     buttons: { 
      addToCart: { 
       label: 'Add to Cart', 
       className: 'btn-primary', 
       callback: function(){ 
        // do something here 
       } 
      } 
     } 
    }); 
    }) 
} 

：あなたはこのBootboxタグを付けたので

Answer 1

は、ここにあなたが何をしようとしての（IMO）簡易版です。プロダクトのリストを構築し、それをダイアログのメッセージ（コンテンツ）として使用することができます。あなたはそのボタンのコールバックであなたの 'カートに追加'ボタンがしたいものを何でも処理します。モーダルを閉じたくない場合は、return falseをコールバックの最後の行として追加します。

このルートに行くと、今使っているダイアログマークアップは必要ありません.Bootboxは独自のものを生成します。