如何在bootstrap模式中获取动态数据?在laravel

时间:2017-04-19 18:34:45

标签: javascript jquery twitter-bootstrap laravel-5.3 laravel-eloquent

我是laravel的新手我在做一个查看事件图片的网页项目。在页面我每个事件查看一张照片但我在用户点击照片时我打开一个自举模式,它的身体包含轮播以显示特定的evet的所有图片。问题是,点击照片我想显示数据库中的相关照片,但似乎没有执行javascript代码(从db检索照片)。我也得到错误。 sd应该是从查询中退出的数组 未定义的变量:sd 这就是视图的代码

<section class="no-padding" id="media">
        <div class="container-fluid">

       <ul id="hexGrid">
@foreach($items as $item)  

 <li class="hex">
        <div class="hexIn">
          <a class="hexLink" href="#" id="{{$item->id}}"  role="button" data-toggle="modal" data-dismiss="modal"  data-target="#myModal">
             
            <img src="{{$item->pic}}" alt="" />
            <h1>sdfghjk</h1>
            <p>Some sample text about the article this hexagon leads to</p>

          </a>
        </div>
      </li>   

@endforeach
</ul>
</div>
</section>
 
 
  <!-- Trigger the modal with a button -->
 <!-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-dismiss="modal" data-target="#myModal">Open Modal</button>-->

  <!-- Modal -->
   <div class="modal fade" hidden="true" id="myModal" role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="panel panel-filled">
                <div class="panel-body">
                       <div class="modal-header">Events</div>
                <div class="modal-body">


 
  <div id="myCarousel" class="carousel slide" data-ride="carousel" >
         <!-- Indicators -->
 
   <ol class="carousel-indicators">
        @foreach( $sd->pic as $photo )
      <li data-target="#myCarousel" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li>
                    @endforeach
    </ol>  


    <!-- Wrapper for slides -->
   <div class="carousel-inner" role="listbox">
      @foreach( $sd->pic as $photo )
       <div class="item {{ $loop->first ? ' active' : '' }}" >
                            <img src="{{ $photo }}" alt="">
                        </div>
        @endforeach
    </div>
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div> 
</div>
</div>
        </div>
       
      </div>
      
    </div>
  </div>
  </div>


<script>
    $(document).ready(function(){
      $("#myModal").on("show.bs.modal", function(e) {
        var id = $(e.relatedTarget).data('target-id');
        $.get('/media' + id, function( data ) {
        alert(data);
          $(".modal-body").html(data);
        });

      });
    });
  </script>
那个代码在控制器和路由

public function getpic($id)
{
     $sd = DB::table('media')->where('id', '=', $id);
     dd($sd);
     return view('event', ['sd' => $sd])->render();
}
Route::get('media/{id}', [
    'uses' => 'MediaController@getpic',
    'as' => 'media'
]);

0 个答案:

没有答案