get ajax data and display on bootstrap modal
11,609
Instead of this:
infoModal.find('#modal-body').innerHTML = htmlData;
You should use this:
infoModal.find('#modal-body')[0].innerHTML = htmlData;
If you want to stick to all-jQuery way, then use this:
infoModal.find('#modal-body').html(htmlData);
Here's the JSFiddle, using a fake response:
https://jsfiddle.net/6o7atqd3/1/
Author by
WaffleBoy
Updated on June 28, 2022Comments
-
WaffleBoy almost 2 years
Im building an app the hosts restaurant menus. When a menu item is clicked i want to fetch the item's data from my api via ajax and display it on a 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);
the modal trigger
<a class="modal-toggle" data-toggle="modal" data-target="#myModal" data-id="{{{ $item->id }}}"><h5>{{{ $item->name }}}</h5></a>
the modal
<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">×</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>
the apis response
{"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"}
when i click on the trigger the modal pops up and the ajax request appears on my browsers networks with a status code of 200, however the modals inner html is not updated. I know theres probably docens of these questions here, but i couldnt seem to find one that helped. please help
-
WaffleBoy about 9 yearsthank you so much for your input. Unfortunately this still does not fix my problem :( would you be kind enough to save the working fiddle and give me the link
-
Amar Syla about 9 yearsThen, the problem is at your AJAX call. Giving you the JS Fiddle wouldn't help, because I changed the success to error, because the AJAX call was of course returning an error. If you can upload a live demo of your work, I would help you solve this.
-
Amar Syla about 9 yearsI updated the question with the JSFiddle, just in case you want to see what I did.
-
Divij Sehgal about 7 yearsHi. Instead of AJAX, I am using AngularJS and currently without angular-ui or ui-bootstrap and facing the same problem. Any idea on how I would go about solving this problem with Angular, since accessing DOM elements directly from angular code is a bad practice?