2017-08-04 22 views
1

画像を作成しようとしていますギャレー画像がクリックされたモーダルが開きますが、私のページが一瞬読み込まれたときメダルの内容が表示されていますそれを修正できますか? view.blade.phpで私のコードです:画像ギャラリーを作成するLaravelにajaxを持つモーダル

<script> 
    $(".li-img").click(function() { 
    $.ajax({ 
     method: 'GET', 
     url: './comment?media_id=' + this.id, 
     success: function (data) { 
      /*$("#comments").html(data);**/ 
      $("#getCodeModal").modal("toggle"); 
      $("#getCode").html(data); 

     } 
    }); 
    }); 
</script> 
    <body> 
    @foreach($array as $img) 
    <div class=" portfolio-container text-center"> 
    <ul class="portfolio-list" style="margin:0 auto"> 
     <li id = "{{$img['id']}}" class="li li-img" style="margin:0 
      auto"> 
      <img id="{{$img['id']}}" src="{{$img['image']}}"> 
     </li> 
    </ul> 
    </div> 
    @endforeach 
    <div class="modal fade" id="getCodeModal" tabindex="-1" role="dialog" 
    aria- 
    labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria- 
      label="Close"><span aria-hidden="true">&times;</span> 
      </button> 
     <h4 class="modal-title" id="myModalLabel"> API CODE </h4> 
     </div> 
     <div class="modal-body" id="getCode" style="overflow-x: scroll;"> 
     //ajax success content here. 
     </div> 
    </div> 
</div> 

また、私は、モーダルマイコントローラーでコントローラーからJSON情報を送信する場合は、このコードを持っている:

public function comment(Request $request) 
    { 
    $media_id = $request->get('media_id'); 
    if ($request->session()->has("access_token")) { 
    $access_token = $request->session()->get("access_token"); 
    $client = new Client(); 
    $res = $client->request('GET', 'https://api.instagram.com/v1/media/' 
     . $media_id . '/comments?access_token=' . $access_token); 
    /*echo /*$res->getBody();*/ 
    } else { 
     echo "there is no access token in session"; 
    } 
} 

私は$ RES-を送信したいです> getbody()をview.blade.phpのモーダルに変更

答えて

0

依存関係としてブートストラップを追加しなかったためです。

はheadタグに追加します:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

を、私はあなたがdiv要素の中にモーダルコンテンツのショーを私は、このリンクを追加しましたクラスmodal

+0

を持っていますが、現時点では終了タグ</div>を失ったことがわかりましたページ – Honey

関連する問題