Question posted in
You can find the official documentation here.

Refresh table data every 5 seconds with ajax based on toggle button status – Jquery ajax

I am creating a web page using Django and Ajax. I want to refresh my page every 5 seconds depending on the status of a bootstrap toggle switch.
i.e.

  • On – Auto refresh table data every 5 seconds
  • Off – Do not refresh

jQuery ajax call:

$(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);
                    }
                });
            }
        });
    });

I am expecting that if auto-switch (toggle button is enabled), the function setInterval will trigger and the table data will keep refreshing every 5 seconds and on any change in the toggle switch it will find its status as off and no auto refresh will take place. However currently its not auto-refreshing whether the switch is on or off.

Tags:

2

Answers


  1. 0

    Try to use :

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

    instead of

    $("#auto_switch").change(function () {
    Login or Signup to reply.
  2. 0 
    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);
    }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search