Child table stack on loading

julesverne

Hi I am trying the example from the following link:
https://datatables.net/blog/2016-03-25

When I start the page parent table is ok, but child table is stack on loading.
This is the debugger link:
https://debug.datatables.net/etolom

On page load in Chrome console I got message:
Uncaught ReferenceError: siteTable is not defined
at data (table.users.js:53)

After click on parent table row I got message:
table.sites.js:47 Uncaught ReferenceError: usersTable is not defined
(table.sites.js:47)

My files are attached.
Js files are not allowed on upload so I put it here.

table.sites.js

(function($){

$(document).ready(function() {
var siteEditor = new $.fn.dataTable.Editor( {
ajax: "php/table.sites.php",

    table: "#sites",
    fields: [ {
            label: "Site name:",
            name: "name"
        }
    ]
} );


    siteEditor.on( 'submitSuccess', function () {
    usersTable.ajax.reload();
} );

    var siteTable = $('#sites').DataTable( {
    dom: "Bfrtip",
    ajax: "php/table.sites.php",
    columns: [
        { data: 'name' },
        { data: 'users', render: function ( data ) {
            return data.length;
        } }
    ],
    select: {
        style: 'single'
    },
    buttons: [
        { extend: "create", editor: siteEditor },
        { extend: "edit",   editor: siteEditor },
        { extend: "remove", editor: siteEditor }
    ]
} );
    siteTable.on( 'select', function () {
    usersTable.ajax.reload();

    usersEditor
        .field( 'users.site' )
        .def( siteTable.row( { selected: true } ).data().id );
} );

    siteTable.on( 'deselect', function () {
    usersTable.ajax.reload();
} );

} );

}(jQuery));

table.users.js

(function($){

$(document).ready(function() {
var usersEditor = new $.fn.dataTable.Editor( {
ajax: {
url: "php/table.users.php",
data: function ( d ) {
var selected = siteTable.row( { selected: true } );
if ( selected.any() ) {
d.site = selected.data().id;

            }
        }
    },
    table: '#users',
    fields: [ {
            "label": "first_name:",
            "name": "first_name"
        }, {
            "label": "last_name:",
            "name": "last_name"
        }, {
            "label": "phone:",
            "name": "phone"
        }, {
            "label": "site:",
            "name": "site",
            type: "select",
            placeholder: "Select a location"
        }
    ]
} );

    usersEditor.on( 'submitSuccess', function () {
    siteTable.ajax.reload();
} );

var usersTable = $('#users').DataTable( {
    dom: 'Bfrtip',
    ajax: {
        url: "php/table.users.php",
        type: 'post',
        data: function ( d ) {

            var selected = siteTable.row( { selected: true } );
            if ( selected.any() ) {
                d.site = selected.data().id;
            }
        }
    },
    columns: [
        {
            "data": "first_name"
        },
        {
            "data": "last_name"
        },
        {
            "data": "phone"
        },
        {
            "data": "site"
        }
    ],
    select: true,
    buttons: [
        { extend: 'create', editor: usersEditor },
        { extend: 'edit',   editor: usersEditor },
        { extend: 'remove', editor: usersEditor }
    ]
} );

} );

}(jQuery));

kthorngren

My guess would be that you are loading them in different $(document).ready(function()). I think you can either define those two variables globally or put them in the same $(document).ready(function()) function.

Kevin

julesverne

Thanks, I will try !

julesverne

Everything works.
Thanks.