[英]How to show ajax response into bootstrap modal
我想弹出一个模态,它将显示来自查询的动态数据。 因此,当用户单击相关学校时,它将显示为模态。 我得到了回应,但我不知道该如何展现这种模态。 有什么建议吗?
按钮:
<a href="#." data-toggle="modal" data-target="#myModal" data-id="{{$user->id}}" class="chooseSchoolBtn">Choose School</a>
阿贾克斯:
$(".chooseSchoolBtn").on("click", function (argument) {
//console.log($(this).data("id"))
var user_id = $(this).data("id")
var info = $.get("{{url('school-list')}}", {
id: user_id
});
info.done(function (data) {
console.log(data)
});
});
莫代尔:
<div class="modal-body">
// This section will come dynamically
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school">
<div class="selection_area">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="school_img_area" style="background-image: url(school/images/school/school1.jpg);">
</div>
<div class="school_info">
<p class="school_name">School Name</p>
<p class="school_description">Good School...</p>
<p class="school_price">12$</p>
</div>
</div>
</div>
// dynamic section ends
</div>
json响应:
{
id: 1,
user_id: 2,
price: "2340.00",
name: "XYZ",
display_image: "1510570005ajaPXajmik.png"
}, {
id: 3,
user_id: 2,
price: "123.00",
name: "ABC",
display_image: "1510570049QZWiQUh7zY.jpg"
}
只需更改ajax响应数据
info.done(function(data){
$.each(data,function(index,value){
$(".school_img_area").attr("style","background-image: url(school/images/school/"+value.display_image+");");
$(".school_name").html(value.name);
$(".school_price").html(value.price);
});
});
快乐编码:-)
$(".chooseSchoolBtn").on("click", function (argument) {
//console.log($(this).data("id"))
var user_id = $(this).data("id")
var info=$.get("{{url('school-list')}}",{id:user_id});
info.done(function(data){
$('DIV WHERE YOU WNAT TO DISPLAY ID').html(data.id);
// repeat same for user_id, price, so on;
});
});
如果要使用JSON
响应来实现,则将遍历循环并将其附加为html。
对于前-
var html="";
for(var i=0; i<data.length; i++) {
var html +=<p>data.price</p>data.name<p>;
}
$('.appendTo').html(html);
另一个选择是在控制器方法中,而不是将数据作为JSON返回,而是可以返回HTML,并且在获得Ajax成功时替换内容。
$(document).on("click", ".chooseSchoolBtn", function () {
var schoolId= $(this).data('id');
$('#modalId').modal('show');
$.ajax({
type: "POST",
url: "some_url_to_get_school_info",
data: {'sid':schoolId},
success: function(data){
$('#div_id_to_show').html(data);
},
error: function(){
alert("Fail")
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.