laravel中的bootstrap-modal动态内容ajax

时间:2017-11-11 16:53:36

标签: jquery ajax laravel bootstrap-modal

我想从ajax加载我的bootstrap模式中的内容我可以在警报或控制台日志中获取它,但我想要更新的部分消失了!

我尝试使用$(' .modal-content')。html(数据),但我的模态内容消失或.append(数据)但它无法正常工作!

我重新制作它非常简单,但它仍然无法正常运行我的错误?

感谢您的时间和帮助!!!

离开我的主页

<a class="btn btn-primary"  class="quickview22" href="#" data-target="#quickviewMain55" data-categorie="1" data-trigger="hover" data-toggle="modal">Trigger modal</a>
@include('bootmodal')  

我的bootmodal视图

<div class="modal fade in " id="quickviewMain55">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal ffffffffffffffftitle</h4>
            </div>
            <div class="modal-body">
                <h1>{{ $quickProducts1->first()->name }}</h1>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

这是我的剧本        

   jQuery( document ).ready( function( $ ) {
   $('#quickviewMain55').on('show.bs.modal', function(e) {

   var category = $(e.relatedTarget).data('categorie');

     $.ajax({

           url: 'quick-view',
           data: { category : category }, 
           success: function(data)
           {


         $('.modal-content').html(data);  


           alert(data);
           }
         });


});
});

       $.ajaxSetup({
  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  }
});



</script>

我的控制器

class QuickViewController extends Controller
{
    public function index(Request $request)
    {



         $quickProducts1 = Product::where('category_id', $request->category)->get();



         return view('bootmodal', compact('quickProducts1'))->render();
    }

}

1 个答案:

答案 0 :(得分:0)

您确定要将其附加到.modal-content而不是.modal-content .modal-body吗?

您可能想尝试: $('.modal-content .modal-body').html(data)

让我们更新!

肯尼