Uncaught ReferenceError: table is not defined

Uncaught ReferenceError: table is not defined

Stacey1134Stacey1134 Posts: 112Questions: 20Answers: 0
edited December 2022 in Free community support

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

This question has accepted answers - jump to:

Answers

  • Stacey1134Stacey1134 Posts: 112Questions: 20Answers: 0

    Okay, that didn't post right :(

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961
    Answer ✓

    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

  • Stacey1134Stacey1134 Posts: 112Questions: 20Answers: 0

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

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961
    Answer ✓

    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

  • Stacey1134Stacey1134 Posts: 112Questions: 20Answers: 0

    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!

Sign In or Register to comment.