2017-09-06 108 views
0

我正在處理項目,並在我的應用程序的第一頁中顯示隨機順序中的一個帖子,但也有一個按鈕用於刷新此隨機帖子並顯示另一個帖子而不需要用戶刷新頁面。在laravel中創建隨機按鈕5.5

現在我的問題是,如何使該按鈕的作品?

這裏是我的控制器:

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 

enter image description here

UPDATE:

JS代碼,現在就像是從這個檢查後, http://www.jslint.com/

$(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] 
+1

使用Ajax調用刷新隨機職位。 –

+0

@SagarGautam你能幫我怎麼做嗎? – mafortis

+0

由於您知道從數據庫中獲取隨機發布的邏輯。點擊按鈕時,您必須檢測javascript中按鈕點擊的事件,並對調用函數的路由進行ajax調用。在這個函數中,你需要編寫代碼來獲得隨機的帖子,並將隨機的帖子作爲來自函數的json響應返回。之後,在ajax的成功函數上,你必須編寫代碼來刷新html中的當前發佈數據和來自json響應的數據。希望你能理解。 –

回答

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', '[email protected]')->name('food.randompost'); 

控制器

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 
} 

我們怎麼通過使用Ajax調用調用此方法,將其添加在你的腳本段的視圖中。綁定添加到按鈕的點擊動作太大:

<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> 

而這一切,國際海事組織,讓我知道,如果你不undersand東西

+0

評論不適用於擴展討論;這個談話已經[轉移到聊天](http://chat.stackoverflow.com/rooms/153795/discussion-on-answer-by-aaron0207-creating-random-button-collect-in-laravel-5-5) 。 – Andy