Jquery Datatables Reload Interval Error

October 26, 2023 Post a Comment

I'm trying to get my table to load on intervals. I am now receiving the below error: TypeError: g is null The user will enter form parameters and then hit the submit button which

Solution 1:

I've worked out a solution that seems to do the trick. I tried to keep this as simple as I could, while still incorporating jQuery and (I think) solving the issue you were having.

index.html

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Ajax Reloader</title></head><body><header><h1>AJAX Reloader</h1></header><section><formid="theForm"><inputid="theButton"type="button"value="Click me to load data"></form></section><section><p><h3>Data Reload in: <spanid="reloadCounter">5</span></h3></section><section><tableid="theTable"></table></section><templateid="theTemplate"><tr><td>Name:</td><tddata-js></td></tr></template><scriptsrc="https://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script><script>
        (function() {
            const $btn = $('#theButton');
            const $tbl = $('#theTable');
            const $tmpl = $('#theTemplate');
            const $span = $('#reloadCounter');

            let isLoading = false;
            let counter = 5;

            // Load data on Button click.
            $btn.click(() => {
                loadData(true);
            });

            // Auto-reload table data every 5 seconds.// Add a countdown, just for gits and shiggleswindow.setInterval(() => {
                if (counter === 0) {
                    loadData(false);
                    counter = 5;
                } else {
                    counter--;
                }

                $span[0].textContent = counter.toString();

            }, 1000);

            functionloadData(isBtnClick) {
                if (!isLoading) {
                    isLoading = true;

                    let file = (isBtnClick) ? 'data1' : 'data2';

                    $.ajax({
                        url: `./${file}.json`,
                        type: 'GET',
                        dataType: 'json',
                        success: (data, status) => {
                            console.log('loadData::success - Got data!', data);
                            $tbl[0].innerHTML = '';

                            let td = $tmpl[0].content.querySelector('td[data-js]');

                            data.forEach((item, idx, arr) => {
                                td.textContent = item.name;
                                let tr = document.importNode($tmpl[0].content, true);
                                $tbl[0].appendChild(tr);
                            });

                            isLoading = false;
                        }
                    });

                    if (isBtnClick) {
                        console.log('loadData - Button clicked');
                    } else {
                        console.log('loadData - Interval triggered');
                    }
                }
            }
        })();
    </script></body></html>

data1.json

[{"name":"Rincewind"},{"name":"Mustrum Ridcully"},{"name":"Ponder Stibbons"},{"name":"Gaspode The Wonder Dog"},{"name":"CMOT Dibbler"},{"name":"Nanny Ogg"}]

data2.json

[{"name":"Jason Ogg"},{"name":"Tiffany Aching"},{"name":"Rob Anybody"},{"name":"Mrs. Cake"},{"name":"Nobby Nobbs"},{"name":"Fred Colon"}]

My style of coding is a little different from yours, but the same basic concepts should be in play here.

Hope it helps. :-)

Solution 2:

How do you expect ajax.reload() to work? There is no AJAX in use and therefore no previous AJAX to reload. Do this instead (schematic) :

var table = $('#example1').DataTable({    
   ajax: {
     url: 'api/railmbs.php',
     data: function() {
        return { 
          searchCriteria: {
            bill: $('#import_bill').val(), 
            ramp: $('#import_ramp').val(), 
            // few other parameters
          } 
        }
     }
   },
   "columns": [
      { "data": "BILL" },   
      { "data": "RAMP" },   
      // few more columns
   ],
   "iDisplayLength": 25,
   "paging": true,
   "bDestroy": true,
   "stateSave": true,
   "autoWidth": true
});

Now you should be able to table.ajax.reload() from anywhere where table is available.

JavaScript Gen

Jquery Datatables Reload Interval Error

Solution 1:

Solution 2:

Post a Comment for "Jquery Datatables Reload Interval Error"