JavaScriptで30秒ごとにdivを更新する

Question

30秒ごとにdivを自動的に更新しようとしています。

<script type="text/javascript"> 

    function refresh_handler() { 
     function refresh() { 
      $.get('/refresh/3', function(result) { 
       $(".roek").innerHtml = result; 
       console.log(result); 
      }); 
     } 
     setInterval(refresh, 3000); //every 5 minutes 
    } 

    $(document).ready(refresh_handler); 

</script> 

ここでは30秒ごとにdivを更新しようとしています。

<div class="col-md-12"> 
    <div class="roek"> 
     @foreach ($hours as $hour) 
      @if ($hour->repeat_day === "Monday") 
       <p> 
        <div class="col-md-3"> 
         <b> Day: </b> {{ $hour->repeat_day }} <a href="/deletehour/{{ $hour->id }}"> <span class="glyphicon glyphicon-info-sign" aria-hidden="true" style="color: cyan"></span></a> <br> 

         <b> Start: </b> {{ strftime("%H:%M", strtotime($hour->starttime))}} <br> 
         <b> End: </b> {{ strftime("%H:%M", strtotime($hour->endtime))}} <br> 
        </div> 
       </p> 
      @endif 
     @endforeach 
    </div> 
</div> 

現在、Divを更新しようとしていますが、リフレッシュ時に更新されません。

Route::get('/refresh/{id}', 'RefreshController@workhoursrefresh'); 

そして、これは私がリフレッシュした後に使用しているクエリです：

//show all standard workhours per specific user 
public function workhoursrefresh() 
{ 
    $hours = Availability::FindAvailabilitys()->where([['user_id', '=', Auth::id()], 
                 ['type', '=', 'standard']]) 
               ->orderBy('starttime', 'asc') 
               ->get(); 
} 

Answer 1

<script type="text/javascript"> 

    function refresh_handler() { 
     function refresh() { 
      $.get('/refresh/3', function(result) { 
       $(".roek").innerHtml = result; 
       console.log(result); 
      }); 
     } 
     setInterval(refresh, 3000); //every 3 second for 30 second replace it with 30000 
    } 

    $(document).ready(refresh_handler); 

</script> 

Answer 2

デバッグコンソールをチェック

1. ステップ私は、次のしている私のweb.phpで エラーのブラウザ用開発ツールのタブ
2. URL /refresh/3は、ブラウザの開発ツール
3. のネットワーク]タブでは、
4. 期待するデータを返す/refresh/3 URLはclass="roek"を有する少なくとも一つの要素は、ページ上

であることを確認していることを確認し使用して呼び出されていることを確認あなたのケースでは、jQueryを使用しているので、jQuery上にinnerHTMLがないので、html()メソッドをjQueryオブジェクトで使用してください。

function refresh_handler() { 
    function refresh() { 
     $.get('/refresh/3', function(result) { 
      $(".roek").html(result); 
      console.log(result); 
     }); 
    } 

    setInterval(refresh, 30000); 
} 

$(document).ready(refresh_handler);