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，但它不会在刷新时更新它。在我的web.php中，我有以下内容：

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

调试步骤

检查浏览器开发工具的控制台选项卡是否有错误
确保使用浏览器开发工具的网络标签调用网址/refresh/3
确保网址/refresh/3返回您期望的数据
确保页面上至少有一个class="roek"元素

在你的情况下，你正在使用jQuery - 所以在jQuery对象上使用html()方法，因为jQuery上没有innerHTML。

代码：

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

    setInterval(refresh, 30000);
}

$(document).ready(refresh_handler);

使用JavaScript每30秒刷新一次div

2 个答案: