AJAX和Laravel - 在模态上加载数据"意外的标识符"

时间:2017-07-30 19:58:14

标签: jquery ajax laravel bootstrap-modal

我正在尝试使用ajax在bootstrap模式上动态加载数据,但我无法将其用于工作。我做了一些研究,我看过一些视频,但我仍然无法做到。我希望有人可以帮助我

                  <ul>
                  @foreach ($rs as $r)
                    <li><button class="viewData" value="view" id="{{$r->id}}">{{$r->title}}</button></li>
                  @endforeach
                  </ul>

这是我的物品

  <div class="portfolio-modal modal fade" id="projectView" role="dialog" tabindex="-1" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content" id="modal-content">
                  <div class="close-modal" data-dismiss="modal" data-remodal-action="close">
                      <div class="lr">
                          <div class="rl">
                          </div>
                      </div>
                  </div>
                      <div class="row">
                        <div class="col-lg-12">
                          <div class="modal-body" id="project-content">
                            <!-- CONTENT HERE -->
                          </div>
                        </div>
                     </div>
                  </div>
              </div>
            </div>

这是我的模态,我想在细节上显示我的项目

更新 我更新了我的js文件,现在我正在尝试在模态中打印我的对象的内容,但它给了我这个错误&#34;意外的标识符&#34;

 $(document).ready(function(){

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


   $('.viewData').click(function(){
     var project_id = $(this).attr("id");


     $.ajax({
   url:"/data",
   method:"POST",
   data:{'project_id' : project_id},

   success:function(data){
     var htmlString = "";

     htmlString += "<h3 class="text-center">" + data.title + "</h3>";

     $('#project-content').html(htmlString);
     console.log(data);
     $('#projectView').modal("show");
   }
 });

   });

});

这是我传递项目ID

的js文件
  public function dataToModal(Request $request) {

  if(!empty($request)){
    $id = $request->project_id;
    $project = content::FindOrFail($id);

    return  Response::json($project);

 } else {
  return 'asa';
}

}

这只是我为测试此功能而创建的项目,当它工作时我会在主站点上实现它。有人可以帮帮我吗?欢迎任何帮助和建议!

提前谢谢你。

1 个答案:

答案 0 :(得分:0)

您可以尝试以下代码:

<强> JavaScript的:

$(document).ready(function(){
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
   $('.viewData').click(function(){
     var project_id = $(this).attr("id");

     $.ajax({
       url:"/data",
       method:"POST",
       data: {project_id : project_id},
       success:function(data){
         $('#project-content').html(data);
         console.log(data);
         $('#projectView').modal("show");
       }
     });
   });
});

<强>控制器:

public function dataToModal(Request $request) {
 if(!empty($request)){
   $data = $request->all();
   //print_r($request->all());
   return $data;
 } else {
    return 'asa';
 }
}