如何顯示Ajax響應到引導模態

Question

我想彈出一個模態，它將顯示來自查詢的動態數據。 因此，當用戶單擊相關學校時，它將顯示為模態。 我得到了回應，但我不知道該如何展現這種模態。 有什么建議嗎？

按鈕：

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

Answer 1

只需更改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);
    });
});

快樂編碼:-)

Answer 2

$(".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;
      });
      });

Answer 3

如果要使用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成功時替換內容。

Answer 4

$(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")
            }
        });
    });