laravel 5.5でランダムボタンを作成する

Question

私はプロジェクトで作業しています。アプリケーションの最初のページには、ランダムな順序で投稿の1つを表示するブロックがありますが、このランダムな投稿を更新して別のものを表示するボタンもあります代わりにユーザーがページを更新する必要はありません。

私の質問は、そのボタンを動作させる方法です。ここで

は私のコントローラです：

public function index() { 
     $randomfood = Food::where('status', 1)->inRandomOrder()->take(1)->get(); 
     return view('welcome', compact('randomfood')); 
} 

これが私の見解です：

@foreach($randomfood as $randfood) 
     <div class="col-md-2"><a href="{{ route('showrecipe', $food->slug) }}"><img src="{{url('/')}}/images/{{$randfood->image}}" class="thumbnail img-responsive" alt="food image"></a></div> 
     <div class="col-md-8"> 
       <h5><a href="{{ route('showrecipe', $food->slug) }}">{{$randfood->title}}</a></h5> 
       {!! str_limit($randfood->description, 100) !!} 
     </div> 
     <div class="col-md-2 text-center"> 
       <p>Don't like?</p> 
       <a class="bhover" href="#">Find another recipie</a> 
     </div> 
@endforeach 

UPDATE：で確認した後

JSコードは次のようにありますコンソールで

$(document).ready(function() { 
$("a.bhover").click(function() { 
$.ajax({ 
      url: "{{route('food.randompost')}}", 
      data: {"token_": "{{Session::token()}}"}, //session token, neccesary to use POST request 
      type: "food", 
      success: function (data) { 
      $("#live_content").empty(); //clean the actual post 
      $("#live_content").append(data); // add new post from the controller 
      }, 
      error: function(data){ 
       //handle errors here 
      } 
     }); 
}); 
}); 
}); 

エラー：

SyntaxError: expected expression, got '}'[Learn More] 

Answer 1

あなたが本当にここに何をしたいかは、次のとおりです。

public function index() { 
     $randomfood = Food::where('status', 1)->inRandomOrder()->first(); 
     return view('welcome', compact('randomfood')); 
} 

ですから、単一の要素としての代わりとして、あなたのランダムな食品のポストを使用することができますコレクション。ライブ、それを作るために必要なライブ要素をラップdiv要素を追加してみましょう：今

<div id="live_content"> 
        <div class="col-md-2"><a href="{{ route('showrecipe', $food->slug) }}"><img src="{{url('/')}}/images/{{$randomfood ->image}}" class="thumbnail img-responsive" alt="food image"></a></div> 
        <div class="col-md-8"> 
        <h5><a href="{{ route('showrecipe', $food->slug) }}">{{$randomfood->title}}</a></h5> 
         {!! str_limit($randomfood->description, 100) !!} 
        </div> 
</div> 
        <div class="col-md-2 text-center"> 
         <p>Don't like?</p> 
         <a class="bhover" href="#">Find another recipie</a> 
        </div> 

オーケー、のはすなわちlive.recipe.blade.php、更新されたデータを埋めるために、ブレードのビューを作成してみましょう：

<div class="col-md-2"><a href="{{ route('showrecipe', $food->slug) }}"><img src="{{url('/')}}/images/{{$randomfood ->image}}" class="thumbnail img-responsive" alt="food image"></a></div> 
         <div class="col-md-8"> 
         <h5><a href="{{ route('showrecipe', $food->slug) }}">{{$randomfood->title}}</a></h5> 
          {!! str_limit($randomfood->description, 100) !!} 
         </div> 

我々が必要としますルートと私たちのコントローラにAJAX呼び出しを処理する方法それでは、それを追加してみましょう：

web.php

Route::post('update-post', 'YourController@updateRandomPost')->name('food.randompost'); 

私たちは、ビュー内のスクリプトのセクションでそれを追加し、AJAX呼び出しを使用してこのメ​​ソッドを呼び出すつもり

コントローラ

public function updateRandomPost(Request $request) { 
     $randomfood = Food::where('status', 1)->inRandomOrder()->first(); // get new random post 
     return view('live.recipe', compact('randomfood')); //fill our live post template and retrieve it to the view 
} 

。

<script 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script> 
<script> 
    $(document).ready(function() { 
    $("a.bhover").click(function() { 
     $.ajax({ 
       url: '{{route('food.randompost')}}', //our fresh route name 
       data: {"token_": '{{Session::token()}}'}, //session token, neccesary to use POST request 
       type: 'post', 
       success: function (data) { 
        $('#live_content').empty(); //clean the actual post 
        $('#live_content').append(data); // add new post from the controller 
       }, 
       error: function(data){ 
        //handle errors here 
       } 
      }); 
    }); 

    }); 
</script> 

そして、それはIMO、あなたが