Uncaught ReferenceError: table is not defined

Stacey1134

The line table.row($(this).parents('tr')).data(); is giving me a table not defined error. I got the verbiage from your site only changing the array values and status text.

Here's the code: and the associated libraries. What am I missing? Thanks. BTW I originally just wanted to capture the row data and send off to a modal function so the user could update it, the click button is my alternative, but I get this console error, and it doesn't process. Most other parts of the table work fine.

<script>
    $(document).ready(function () {
        $('#example').DataTable({
            'processing': true,
            'serverSide': true,
            'serverMethod': 'post',
            'ajax': {
                'url':'ajaxUserTable.php'
            },
            'columns':[
                {data:'id'},
                {data:'username'},
                {data:'FirstName'},
                {data:'LastName'},
                {data:'Active'},
                {data:'Primary_Role'},
                {data: null, 'defaultContent': '<button>Edit</button>'},
            ]                     
                
        });
        $('#example tbody').on('click', 'button', function () {
             var data = table.row($(this).parents('tr')).data();
             alert(data[1] + "'s status is: " + data[4]);
        });       
    }); 
    $("#btn_saveUser").click(function() {
      saveFacility();
    });        
</script>         
<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>#</th>
            <th>Username</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Status</th>
            <th>Role</th>
            <th>Action</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>#</th>
            <th>Username</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Status</th>
            <th>Role</th>
            <th>Action</th>
        </tr>
    </tfoot>
</table>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
        <script src="https://kit.fontawesome.com/d30fa74399.js" crossorigin="anonymous"></script>
        <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> 

        <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsive.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.4.0/js/responsive.bootstrap5.min.js"></script>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
        <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> 
        <link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css" rel="stylesheet" />
        <link href="https://cdn.datatables.net/responsive/2.4.0/css/responsive.dataTables.min.css" rel="stylesheet" />    

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

Stacey1134

Okay, that didn't post right

kthorngren

You need to assign the variable table with an instance of the Datatables API. On line 3 above you can do this:

var table = $('#example').DataTable({

Kevin

Stacey1134

So, first, Thank you. That got rid of the error, and the alert comes up, but the data elements passed are undefined.

kthorngren

Your data structure is objects, ie, using columns.data but you are using array notation to access the row elements:

data[1] + "'s status is: " + data[4]

Should be

data.username + "'s status is: " + data.Active

Kevin

Stacey1134

I figured it out! I was using array notation data[0] to access my data. But I defined columns.data. Changing the 0 to the name of the defined field worked.

Thanks for quick assist, you all are Awesome!