How to automatically reload the ajax/jQuery table data after a button click-CodePudding

I have created a jQuery/ajax API Call function to read the JSON data and insert it into the HTML Table and it works fine, But I want to auto-reload the table data after 5Sec when a button is clicked. I tried some codes to make it want, but I want help. So Please suggest a possible solution to fix it.

$(document).ready(function() {
        $.getJSON("http://mydevtest.in/wp-json/pmprocurrencies/v1/all", function(data){
            var currency_Data = '';
            
            $.each(data, function(key, value){
                currency_Data  = '<tr>';
                currency_Data  = '<td>'   value.id   '</td>';
                currency_Data  = '<td>'   value.country_alpha   '</td>';
                currency_Data  = '<td>'   value.currency_code   '</td>';
                currency_Data  = '<td>'   value.currency_sign   '</td>';
                currency_Data  = '<td>'   value.currency_rate   '</td>';
                currency_Data  = '<td><button type="submit" id="delBtn" value="'   value.id   '">x</button></td>';
                currency_Data  = '</tr>';
            });
            $("#currency_tables").append(currency_Data);
            // Reload the table data on "#addcr" button click. 
            $("#addcr").on("click", function(){
                $("#currency_tables").load(location.href   " #currency_tables");
            });
            
        });
  
    });

CodePudding user response：

You can use setTimeout(function,milliseconds) for this. https://developer.mozilla.org/en-US/docs/Web/API/setTimeout

CodePudding user response：

So, I was able to find the solution myself, below is the working code, But I think it's not the professional solution to repeat the same function to achieve the result. If anyone has any better idea, Please suggest.

$(document).ready(function() {
        $.getJSON("http://mydevtest.in/wp-json/pmprocurrencies/v1/all", function(data){
            var currency_Data = '';
            
            $.each(data, function(key, value){
                currency_Data  = '<tr>';
                currency_Data  = '<td>'   value.id   '</td>';
                currency_Data  = '<td>'   value.country_alpha   '</td>';
                currency_Data  = '<td>'   value.currency_code   '</td>';
                currency_Data  = '<td>'   value.currency_sign   '</td>';
                currency_Data  = '<td>'   value.currency_rate   '</td>';
                currency_Data  = '<td><button type="submit" id="delBtn" value="'   value.id   '">x</button></td>';
                currency_Data  = '</tr>';
            });
            $("#currency_tables").html(currency_Data);
            // Reload the table data on "#addcr" button click. 
            
            
        });

        $("#addcr").on("click", function(){
            setTimeout(function(){
                $.getJSON("http://mydevtest.in/wp-json/pmprocurrencies/v1/all", function(data){
                var currency_Data = '';
                
                $.each(data, function(key, value){
                    currency_Data  = '<tr>';
                    currency_Data  = '<td>'   value.id   '</td>';
                    currency_Data  = '<td>'   value.country_alpha   '</td>';
                    currency_Data  = '<td>'   value.currency_code   '</td>';
                    currency_Data  = '<td>'   value.currency_sign   '</td>';
                    currency_Data  = '<td>'   value.currency_rate   '</td>';
                    currency_Data  = '<td><button type="submit" id="delBtn" value="'   value.id   '">x</button></td>';
                    currency_Data  = '</tr>';
                });
                $("#currency_tables").replaceWith(currency_Data);
                // Reload the table data on "#addcr" button click. 
            });
            }, 4000)
        });
  
    });