单击按钮打开模式时禁用 location.reload()

Question

I have a page that reloads to update information in a database. THe page will show a list of files with some information about each file. To show more detailed info about the file the user can click a button for that file and open a modal with more information.

My problem is that the reload function kicks in and closes the modal. The update interval needs to be 10 seconds but when the modal is open I would either disable the reload or change the time value to a few minutes instead. And after the modal is closed the timer should go back to 10 seconds.

           <script type="text/javascript">
         setTimeout(function(){
                location.reload();
                },5000)
        </script>

        <script type="text/javascript">
        $(document).ready(function(){
        $('.orderinfo').click(function(){
        var orderId = $(this).data('id');
        // AJAX request
        $.ajax({
        url: 'ajaxfile.php',
        type: 'post',
        data: {orderNo: orderId},
            success: function(response){ 
                // Add response in Modal body
                $('.modal-body').html(response);
                // Display Modal
                $('#empModal').modal('show'); 
                }
                });
            });
        });
        </script>

And in the HTML part this opens the modal.

echo "<td style='width:15%'><button data-id='".$orderNo."' class='orderinfo'>Read report</button></td>";

I have tried different things but can't find a way to fix it. Appreciate any help

Thanks

Answer 1

you can use clearTimeout() to stop.

     var t = 0;

    function timer_pause(){
        clearTimeout(t);
        console.log('pause');
    }

    function timer_start(){
        t = setTimeout(function(){
                    location.reload();
                    },5000);
    }


    $(document).ready(function(){
        timer_start();
        $('.orderinfo').click(function(){
            timer_pause();
       });
    // use #modalid or whatever modal selector you have 
    // or if you have close function put resume in it
      $('.myModal').on('hidden.bs.modal', function () {
         timer_start();
      })

   })

this way when you modal open it will pause the timer and when modal is close it will reset it, you can make adjustment to continue the timer with previous time,

I wont suggest you reload the page too often, you can just reload the content, if you are showing a table, use datatables, or just simple ajax.

Answer 2

Thank you Ahmed Sunny.

I almost got it working. It open the modal and stops the timer. So far so good.

But I don't get it to start the timer when closing the modal. Here is how the code looks now.

<script>
        var t = 0;
        function timer_pause(){
            clearTimeout(t);
            console.log('pause');
        }

        function timer_start(){
            t = setTimeout(function(){
            location.reload();
            },5000);
        }

        $(document).ready(function(){
            timer_start();
            $('.orderinfo').click(function(){
                timer_pause();
                var orderId = $(this).data('id');
                // AJAX request
                $.ajax({
                url: 'ajaxfile.php',
                type: 'post',
                data: {orderNo: orderId},
                    success: function(response){ 
                        // Add response in Modal body
                        $('.modal-body').html(response);
                        // Display Modal
                        $('#empModal').modal('show'); 
                    }
                });

            // use #modalid or whatever modal selector you have 
            // or if you have close function put resume in it
            $('.orderInfo').on('hidden.bs.modal', function () {
                timer_start();
                })
            });                   
        })
        </script>

In the HTML for the close button I have this:

<div class="modal-footer">
<button type="button" class="button" data-dismiss="modal">Close</button>
</div>

I guess I'm not have the connection right here.

You have to excuse me I haven't done anything with this kind of stuff before. Just plain PHP, HTML and CSS

Thanks