Simple ajax.reload() example not working

Simple ajax.reload() example not working

randomname456randomname456 Posts: 2Questions: 1Answers: 0

Description of problem:
I'd like to make use of the documented ajax.reload function, but I can't get this function to work. It would be nice if anyone can point out my mistake, or show me a working example for using the ajax.reload function... I've created a (simple) test case that demonstrates the problem. You should open the console to see the exception appear.

Link to test case:
~~http://live.datatables.net/hojature/1/edit~~ --> Not sure this example is transferrable to others...

HTML:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
        <meta charset=utf-8 />
        <title>DataTables - JS Bin</title>
    </head>
    <body>
        <div class="container">
            <table id="example" class="display" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>

                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>
            </table>
        </div>
        <script>
// Server-side processing with object sourced data
$(document).ready(function() {
    var table = $('#example').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "/ssp/objects.php",
        "columns": [
            { "data": "first_name" },
            { "data": "last_name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );

    // why doesn't reload work?
    // it's done according to https://datatables.net/reference/api/ajax.reload()#Examples
    table.ajax.reload();

} );
        </script>
    </body>
</html>

Error messages shown:
"TypeError: Cannot read properties of undefined (reading 'reload') at HTMLDocument.<anonymous>

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    It appears to be working in this example from this thread. Clicking on "Change" and you'll see the table change, then the "Reload" gets the original data back.

    Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

    Cheers,

    Colin

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited February 2022

    The link to your test case doesn't seem to work. There are two problems. The first is the ajax call is asynchronous. The ajax process isn't complete when table.ajax.reload(); is executed which means Datatables initialization isn't complete and the table variable is still undefined.

    The second is to use the Datatables API you need to use $('#example').DataTable( ... );. Notice the D. See the [Accessing the API docs}(https://datatables.net/manual/api#Accessing-the-API) for more details.

    Here is an example using a button to reload the table:
    http://live.datatables.net/merelato/1/edit

    To execute code once Datatables initialization is complete use initComplete or init.

    Kevin

  • randomname456randomname456 Posts: 2Questions: 1Answers: 0

    It seems I cannot edit my own post above, so I'll add this separately:

    I found the problem. The ajax functions can be called, via the api(). For the above example it should be like this:

    table.api().ajax.reload();

    I'm sorry for wasting anyone's time.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Easily done, thanks for posting back,

    Colin

Sign In or Register to comment.