получить данные ajax и отобразить на bootstrap modal

Im здание приложения меню ресторана хозяев. Когда щелкнут элемент меню, я хочу получить данные элемента из моего api через ajax и отобразить его на модуле bootstrap.получить данные ajax и отобразить на bootstrap modal

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"}

, когда я нажимаю на спусковом крючке модальный всплывает и на моих браузерах сети с кодом состояния 200, однако модальности внутренний HTML не обновляются появится запрос Ajax. Я знаю, что, вероятно, здесь есть эти вопросы, но я, похоже, не нашел того, что помогло. пожалуйста, помогите

источник

2015-04-12 WaffleBoy

Создание jsfiddle упростит процедуру, помогающую вам. –

https://jsfiddle.net/6o7atqd3/ idk, если он имеет большую помощь, хотя, поскольку вызов ajax на мой сервер не работает – WaffleBoy

Все в порядке, мне удалось сделать это с поддельным откликом. Я добавил ответ ниже. Пожалуйста, обратитесь к нему, чтобы устранить проблему. –

Вместо этого:

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

Вы должны использовать это:

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

Если вы хотите придерживаться все-JQuery образом, а затем использовать это:

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

Вот JSFiddle, используя фальшивый ответ:

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

источник

2015-04-12 22:26:16

Большое вам спасибо за ваш вклад. К сожалению, это еще не устраняет мою проблему :(вы были бы достаточно добры, чтобы сохранить рабочую скрипку и дать мне ссылку – WaffleBoy

. Тогда проблема заключается в вызове AJAX. Предоставление вам JS Fiddle не помогло бы, потому что я изменил успех в ошибке, потому что вызов AJAX, конечно, возвращал ошибку. Если вы можете загрузить демо-версию своей работы, я помогу вам решить эту проблему. –

Я обновил вопрос с помощью JSFiddle, на всякий случай, если вы хотите увидеть, что Я сделал. –

получить данные ajax и отобразить на bootstrap modal

ответ

Смежные вопросы