How do I stop javascript from autoloading when on a pagination page? - development

How do I stop javascript from autoloading when on a pagination page?

Basically, I have javascript refreshing a table of orders every 2 seconds. It queries a route called ‘autoload’ which triggers a method called autoloadOrders in the OrdersController. The controller simply returns a view of a partial blade file with the loop for the table in it (with necessary variables being passed).

My question is, the refreshing works fine and the table auto-updates. But for pagination, when I click to the next page, it auto-reverts back to the first page data every 2 seconds. How can I stop that from happening once I’m going through the pagination?

welcome.blade.php

<script>
            $(document).ready(function() {
                setInterval(function() {
                    $('#autoload').load('');
                }, 2000);
            });
        </script>
    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">Dashboard</h1>
        </div>

        <h2>View Orders</h2>
        <div class="table-responsive" id="autoload">
            <table class="table table-striped table-sm">
                <thead>
                <tr>
                    <th>id</th>
                    <th>phone</th>
                    <th>address</th>
                    <th>order</th>
                    <th>price</th>
                    <th>delivered</th>
                </tr>
                </thead>
                <tbody>
                @foreach ($orders as $order)

                <tr>
                    @if ($order->delivered == false)
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>{!! nl2br($order->products) !!}</td>
                    <td>$</td>
                        @if ($order->pickup == true)
                            <td><a href="/admin/orders/pickup/">Pickup</a></td>
                        @else
                            <td><a href="/admin/orders/deliver/">No</a></td>
                            @endif

                     @endif
                </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        

autoload.blade.php

<div class="table-responsive" id="autoload">
    <table class="table table-striped table-sm">
        <thead>
        <tr>
            <th>id</th>
            <th>phone</th>
            <th>address</th>
            <th>order</th>
            <th>price</th>
            <th>delivered</th>
        </tr>
        </thead>
        <tbody>
        @foreach ($orders as $order)

            <tr>
                @if ($order->delivered == false)
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>{!! nl2br($order->products) !!}</td>
                    <td>$</td>
                    @if ($order->pickup == true)
                        <td><a href="/admin/orders/pickup/">Pickup</a></td>
                    @else
                        <td><a href="/admin/orders/deliver/">No</a></td>
                    @endif

                @endif
            </tr>
        @endforeach
        </tbody>
    </table>

OrdersController

public function autoloadOrders(Orders $orders)
    {
        return view('admin.partials.autoload')->with(['orders' => $orders->getUndeliveredOrders()]);
    }

Route:

Route::get('autoload', 'OrdersController@autoloadOrders')->name('autoload');

from Laravel Questions and Answers https://laravelquestions.com/laravel/how-do-i-stop-javascript-from-autoloading-when-on-a-pagination-page/
via Lzo Media