獲取ajax數據並在引導模式中顯示

Im構建應用程序的主機餐廳菜單。當一個菜單項被點擊時，我想通過ajax從我的api中獲取項目的數據並將其顯示在引導模式中。獲取ajax數據並在引導模式中顯示

的javascript

(function() { 
var infoModal = $('#myModal'); 
$('.modal-toggle').on('click', function(){ 
    $.ajax({ 
     type: "GET", 
     url: '/api/menu-item/'+$(this).data('id'), 
     dataType: 'json', 
     success: function(data){ 
      var item = JSON.parse(data); 
      var htmlData = '<ul><li>'; 
      htmlData += item.name; 
      htmlData += '</li></ul>'; 
      infoModal.find('#modal-body').innerHTML = htmlData; 
     } 
    }); 
    infoModal.modal(); 
}); 
})(jQuery);

模態觸發

<a class="modal-toggle" data-toggle="modal" data-target="#myModal" data-id="{{{ $item->id }}}"><h5>{{{ $item->name }}}</h5></a>

模態

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-  labelledby="exampleModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    <h4 class="modal-title" id="exampleModalLabel">New message</h4> 
    </div> 
    <div class="modal-body" id="modal-body"></div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="button" class="btn btn-primary">Add to cart</button> 
    </div> 
</div>

這些API響應

{"id":4,"menu_category_id":446,"name":"kunzereichert","description":"Dolores impedit ut doloribus et a et aut.","price":"999.99","created_at":"2015-04-10 05:55:23","updated_at":"2015-04-10 05:55:23"}

當我在扳機上單擊模式彈出，Ajax請求會出現在我的瀏覽器使用的200狀態碼網絡，但是模態內部HTML不會被更新。我知道他們可能會在這裏提到這些問題，但我似乎找不到有幫助的人。請幫助

來源

2015-04-12 WaffleBoy

創建一個jsfiddle會簡化我們幫助你的過程。 –

https://jsfiddle.net/6o7atqd3/ idk如果它的幫助很大，因爲ajax調用我的服務器將無法正常工作 – WaffleBoy

沒關係，我設法用假響應來做到這一點。我在下面添加了一個答案。請參考它來解決問題。 –

取而代之的是：

infoModal.find('#modal-body').innerHTML = htmlData;

你應該使用這樣的：如果你要堅持全jQuery的方式

infoModal.find('#modal-body')[0].innerHTML = htmlData;

，然後使用此：

infoModal.find('#modal-body').html(htmlData);

這裏是JSFiddle，使用假響應：

https://jsfiddle.net/6o7atqd3/1/

來源

2015-04-12 22:26:16

非常感謝您的意見。不幸的是，這仍然不能解決我的問題:(你會善待保存工作小提琴，並給我鏈接 – WaffleBoy

然後，問題是在你的AJAX調用。給你的JS小提琴不會幫助，因爲我改變了因爲AJAX調用當然會返回一個錯誤，如果你可以上傳你的工作的實時演示，我會幫你解決這個問題。 –

我用JSFiddle更新了這個問題，以防萬一你想看到什麼我做了 –

獲取ajax數據並在引導模式中顯示

回答

相關問題