Обновлять данные таблицы каждые 5 секунд с помощью ajax на основе состояния кнопки переключения

#jquery #django #ajax

Вопрос:

Я создаю веб-страницу с использованием Django и Ajax. Я хочу обновлять свою страницу каждые 5 секунд в зависимости от состояния переключателя начальной загрузки. т.е.

Включено — автоматическое обновление данных таблицы каждые 5 секунд
Выкл. — не обновлять

Вызов ajax jQuery:

 $(document).ready(function () {
        $('#auto_switch').hide();
        $('#loading').show();
        var broker = '{{ broker }}';
        $.ajax({
            type: "GET",
            cache: true,
            url: '{% url 'broker:load_data' %}',
            data: {
                'broker': broker,
            },
            data_type: 'html',
            success: function (data) {
                $('#loading').hide()
                $('#auto_switch').show();
                $('#stock_holdings').html(data.rendered_table);
            }
        });
        $("#auto_switch").change(function () {
            if ($(this).prop("checked") == true) {
                setInterval(function () {
                    $.ajax({
                        type: "GET",
                        cache: true,
                        url: '{% url 'broker:load_data' %}',
                        data: {
                            'broker': broker,
                        },
                        data_type: 'html',
                        success: function (data) {
                            $('#loading').hide()
                            $('#auto_switch').show();
                            $('#stock_holdings').html(data.rendered_table);
                        }
                    });
                }, 5000);
            else {
                $.ajax({
                    type: "GET",
                    cache: true,
                    url: '{% url 'broker:load_data' %}',
                    data: {
                        'broker': broker,
                    },
                    data_type: 'html',
                    success: function (data) {
                        $('#loading').hide()
                        $('#auto_switch').show();
                        $('#stock_holdings').html(data.rendered_table);
                    }
                });
            }
        });
    });

Развернуть фрагмент

Я ожидаю, что при автоматическом переключении (кнопка переключения включена) функция setInterval сработает, и данные таблицы будут обновляться каждые 5 секунд, и при любом изменении переключателя он обнаружит свой статус как выключенный, и автоматическое обновление не произойдет. Однако в настоящее время его автоматическое обновление не зависит от того, включен или выключен переключатель.

1. Есть лучшие способы обновления страниц, чем 5-секундный setInterval, но я думаю, это работает для демонстрации или простого веб-сайта.

2. ~ FSDford Не могли бы вы, пожалуйста, помочь, дайте мне знать, какие другие способы, кроме setInterval, могут помочь в решении этой задачи? Также в настоящее время этот код не работает. Независимо от состояния переключателя, автоматическое обновление данных таблицы не происходит.

Ответ №1:

Попробуйте использовать :

 $(document).on('change',"#auto_switch",function(){

вместо

 $("#auto_switch").change(function () {

1. Пробовал, но все равно никаких изменений. При переключении переключателя в положение on он запускает URL-адрес один раз, но не продолжает делать это каждые 5 секунд, пока переключатель все еще находится в положении on.

2. сделайте следующее add console.log («работает или нет») внутри вашей функции перед условиями

3. затем добавьте add console.log («его работа после условия») внутри вашей функции после условий

4. Я имею в виду это условие, если ($(this).prop(«проверено») == true) {

5. Вы правы, он не вводит условие if, поскольку я вижу только «его работа или нет» при переключении. Нужно найти способ проверить состояние переключателя сейчас.

Ответ №2:

 var shouldRefresh = false;

$(document).on('change', '#auto_switch', function()
{
    var isChecked = $(this).is(':checked');
    shouldRefresh = isChecked;
    
    if (shouldRefresh)
    {               
        var interval = setInterval(function() 
        {
           if (!shouldRefresh)
                clearInterval(interval);
                
            console.log('This is executed every second');
        }, 1000);
    }
});