2017-07-26 17 views
0

Laravel BladesでAjaxを実装するのは本当に新しいです。私はチュートリアルなどを探してきましたが、本当に混乱しています。私はあなたが私と一緒に忍耐強くなることを願っていますLaravel BladeのAjax

私はAjaxを適用したいブレードを持っているので、たぶん1秒ごとにリフレッシュされます。

ページ全体にAjaxを適用することをお勧めしますか?

もしそうでなければ、ここにAjaxを適用したいブレードの部分があります。

<div class="row"> 
     @forelse($receipt_ids as $receipt_id) 
      <div class="col-md-4"> 
       <div class="panel panel-default"> 
        <div class="panel-heading text-center"> 
         {{$receipt_id->receipt_id}} 
        </div> 

        <div class="panel-body"> 
         <table class="table table-bordered table-responsive"> 
          <thead> 
           <th>Name</th> 
           <th>Quantity</th> 
          </thead> 

          <tbody> 
          @foreach($orders as $order) 
           @if($receipt_id->receipt_id == $order->receipt_id) 
            <tr> 
             <td>{{$order->item}}</td> 
             <td>{{$order->qty}}</td> 
            </tr> 
           @endif 
          @endforeach 
          </tbody> 
         </table> 
        </div> 

        <div class="panel-footer clearfix"> 
         <button type="submit" class="btn btn-success pull-right" style="margin-right: 10px;"> 
          <i class="fa fa-check-circle" aria-hidden="true"></i> Served 
         </button> 
        </div> 
       </div> 
      </div> 
     @empty 

     @endforelse 
    </div> 

私はAjaxが時間の変化などと関連していると感じています。

編集:私はちょっと先があります。私は使った。

<script type="text/javascript"> 
$(document).ready(function() { 
    setInterval(function() 
    { 
     alert('test'); 
    }, 2000) 
}); 
</script> 

私の問題はページを更新するためにどのようなことができますか?

答えて

0

あなたの質問は、ブレードシンタックスやLaravelよりもjavascriptともっと関係があります。

Laravelはブレードを使用してサーバーデータ(ケース内の領収書のリスト)をHTMLに送信し、ブラウザに送信します。そこから、AJAX(ブラウザからサーバと通信する)はクライアントからJavascriptで行われます。

Laravelを使用してこれを行うための現在の公式の方法は、Vue.jsを使用して何かを実装することですが、まだそれ以外の場合は、jQueryを使用することをおすすめします。あなたは結果を取得し、あなたのリストの内容を置き換えるためにjQueryの$.getを使用することができます関数内

setInterval(function() { 
    ... 
}, 1000); 

:あなたが使用することができますJavaScriptで毎秒何かを呼び出すことが

。最も簡単な方法は、上記のレンダリングされたHTMLを返すアクションを呼び出すことです。

私はこれがあなたの方法であなたを得ることを望みます。

+0

ありがとうございました!多かれ少なかれ私は今、リードを持っている。私はその機能を使って試してみました。今度は '$ .get'を使ってみましょう。私は私のメインポストを編集し、私のjavascriptは今働いています。 –

関連する問題