Open a edit dialog in Event InitComplete

marcox

After loading all data and displaying I want to open a certain row for edit. How can I do this?

The row has the id="dev" inside the table data, so i tried this way:

"initComplete": function(settings, json) {
    $("#dev").addClass("selected");
    $("#dev").click();
    $(".buttons-selected").removeClass("disabled");
    $(".buttons-selected").click();
}

This flags the correct row and enables the edit-button, but just opens a blank edit dialog without any content. How can I get this?

rf1234

I think you would need to use the api and you would need the dt select extension as well.

table.
    .on( 'init', function (e, settings, json) {
        var row = $('#dev tr');
        table.row( row ).select();
        table.buttons(".buttons-selected").enable();
        $(".buttons-selected").click();
    });

marcox

Hi rf123,

thank you for your help... I tried this code but got an error:
ReferenceError: table is not defined
How do I have to initialize "table" here?

rf1234

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

kthorngren

table is the Datatables API. You maybe using a different name or haven't assigned the API to a variable. This doc shows how to access the API.

Kevin

marcox

Found the solution by myself:

setTimeout(function(){ loadEditor(); }, 1000);
function loadEditor() {  
    var table = $("#aclAccess").DataTable();
    table.row( $("#dev") ).edit();
}

Very strage here: if it's done too fast, you'll get the empty editor dialog with error:

TypeError: b is undefine

rf1234

Don't see enough of your code to be able to tell, but consider that JS is asynchronous and that lots of code get executed initializing a Data Table for example. Using the API events or promises is good practice - or simple timeouts can be helpful as well.

If you stick to using the API events you will hardly ever need timeouts or promises though.

kthorngren

Very strage here: if it's done too fast, you'll get the empty editor dialog with error:

You are better off using the init event as shown by rf1234. If, for some reason, it takes longer than 1 second to load your table you will see errors. You will want something like this:

// Assign the Datatable API to the variable `table`.
var table = $("#aclAccess").DataTable({
    // Datatable initialization options
});

table.
    .on( 'init', function (e, settings, json) {
        table.row( $("#dev") ).edit();
    });

Kevin

marcox

Hi Kevin,

I tried it this way, but the error still remains:

        $(document).ready(function () {
            var table = $('#aclAccess').DataTable({
                dom: "Bfrtip",
                ajax: '/acl/access/',
                rowId: 'username',
                columns: [
                    {data: "username"},
                    {data: "groups"},
                    {data: "name"},
                ],
                select: true,
                pageLength: 50,
                buttons: [
                        {extend: "edit", editor: aclAccess,
                        formButtons: [
                            'Update',
                            {text: 'Cancel', action: function () {
                                    this.close();
                                }}
                        ]},
                 ]
            });

            table.on("init").on( 'init', function (e, settings, json) {
                    table.row( $("#dev") ).edit();
            });

        });

colin

Is this using Editor? If so, your line 25 should be using an Editor object for edit().

Are you able to link to your page or create a test case so we can take a look?

Colin

marcox

Hi Colin,

the website internal so i cannot provide a link to the page, but I can provider the content of the script-Tag. This is my "workaround" with setTimeout:

    <script>

        var aclAccess; // use a global for the submit and return data rendering in the examples

        $(document).ready(function () {

            aclAccess = new $.fn.dataTable.Editor({
                ajax: {
                    create: {
                        type: 'POST',
                        url: '/acl/access/',
                        data: function (d) {
                            // return d.data[0];
                            return d.data[Object.keys(d.data)[0]];
                        }
                    },
                    edit: {
                        type: 'PUT',
                        url: '/acl/access/',
                        data: function (d) {
                            return d.data[Object.keys(d.data)[0]];
                        }
                    },
                    remove: {
                        type: 'DELETE',
                        url: '/acl/access/',
                        data: function (d) {
                            return d.data[Object.keys(d.data)[0]];
                        }
                    }
                },
                idSrc: "username",

                table: "#aclAccess",
                fields: [
                    {
                        label: "Bennutzername",
                        name: "username",
                        attr: {
                            required: true
                        }
                    },
                    {
                        label: 'Passwort <span title="Nur bei Neuanlage oder Änderung eingeben!"><i class="fas fa-question-circle text-info"></i> </span>',
                        name: "newpassword",
                        attr: {
                            required: true,
                        }
                    },                        {
                        label: "password",
                        name: "password",
                        attr: {
                            disabled: true
                        },
                        type: "hidden",
                    },
                    {
                        label: "Name des Benutzers",
                        name: "name",
                        attr: {
                            required: true
                        }
                    },
                    {
                        label: "Bereiche:",
                        name: "aclAccessGroup[].id",
                        type: "checkbox"
                    }
                ]
            });

            aclAccess.on('submitError', function (e, xhr, err, thrown, data) {
                this.error(xhr.responseText);
            });

            aclAccess.on('submitComplete', function (e, xhr, err, thrown, data) {
                $.ajax( "/admin/upload-htaccess.php" );
            });

            aclAccess.on( 'onInitEdit', function () {
                aclAccess.disable('username');
                                } );

            aclAccess.on( 'onInitCreate', function () {
                aclAccess.enable('username');
            } );

            $('#aclAccess').DataTable({
                dom: "Bfrtip",
                ajax: '/acl/access/',
                rowId: 'username',
                columns: [
                    {data: "username"},
                    {data: "groups"},
                    {data: "name"},
                ],
                select: true,
                pageLength: 50,
                buttons: [
                                            {extend: "create", editor: aclAccess,
                        formButtons: [
                            'Create',
                            {text: 'Cancel', action: function () {
                                    this.close();
                                }}
                        ]},
                                            {extend: "edit", editor: aclAccess,
                        formButtons: [
                            'Update',
                            {text: 'Cancel', action: function () {
                                    this.close();
                                }}
                        ]},
                                            {extend: "remove", editor: aclAccess,
                        formButtons: [
                            'Delete',
                            {text: 'Cancel', action: function () {
                                    this.close();
                                }}
                        ]},
                    ['pageLength']
                                        ]
            });

            setTimeout(function(){ loadEditor(); }, 1000);
            function loadEditor() {  
                var table = $("#aclAccess").DataTable();  
                table.row( $("#dev") ).edit();
            }
        });

    </script>

kthorngren

You have:

    table.on("init").on( 'init', function (e, settings, json) {
            table.row( $("#dev") ).edit();
    });

Try removing one of the.on("init"). so it looks like this:

    table.on( 'init', function (e, settings, json) {
            table.row( $("#dev") ).edit();
    });

Kevin

colin

Ignore my previous comment, I've just learned something new - I didn't realise you could call edit() off of row() - you learn something every day!

Colin

kthorngren

Also in line 88 of the above you can assign the Datatables API to the variable table, like this: var table = $('#aclAccess').DataTable({.

This will remove the ReferenceError: table is not defined error.

Kevin

marcox

Hi Kevin,

I tried it this way, but the error still remains:

        $(document).ready(function () {
            var table = $('#aclAccess').DataTable({
                dom: "Bfrtip",
                ajax: '/acl/access/',
                rowId: 'username',
                columns: [
                    {data: "username"},
                    {data: "groups"},
                    {data: "name"},
                ],
                select: true,
                pageLength: 50,
                buttons: [
                        {extend: "edit", editor: aclAccess,
                        formButtons: [
                            'Update',
                            {text: 'Cancel', action: function () {
                                    this.close();
                                }}
                        ]},
                 ]
            });

            table.on("init").on( 'init', function (e, settings, json) {
                    table.row( $("#dev") ).edit();
            });

        });

colin

You've still got the double init - see Kevin's comment two back, he gave a code sample showing how to remove it.

Colin

kthorngren

but the error still remains

If you make the change suggested of removing the duplicated .on("init") in line 24 then please let us know what happens. Saying the error remains doesn't help us understand what is happening or not happening.

Kevin