Can you open the create modal on page load with parameters on the url string?

ChuckT

I have DataTables and Editor that I am using to display database information for customers. I need to open my table page from a link on another page and automatically have the create modal pop-up.

Here is my table:

 var table = $('#the-table').DataTable( {
        dom: "Bfrtip",
        ajax: {
                url: database URL,
                type: 'GET',
                dataSrc: "data.customers",
                beforeSend: function (request) {
                    request.setRequestHeader("X-Access-Token", user.token);
                    request.setRequestHeader("Content-Type", "application/json");
                }
                },
        columns: [
            { data: "first_name" },
            { data: "last_name" },
            { data: "email" },
            { data: "description" }
        ],
        select: true,
        buttons: [
            { extend: "create",
                 editor: editor,
                 formButtons: [
                        {
                            label: 'Cancel',
                            fn: function () { this.close(); }
                        },
                        'Create'
                    ] 
            },
            { extend: "edit",
                 editor: editor,
                 formButtons: [
                        {
                            label: 'Cancel',
                            fn: function () { this.close(); }
                        },
                        'Update'
                    ] 
            },
            { extend: "remove", 
                editor: editor,                 
                    formButtons: [
                        {
                            label: 'Cancel',
                            fn: function () { this.close(); }
                        },
                        'Delete'
                    ]
                }
            ]
        });

Here is the Editor:

editor = new $.fn.dataTable.Editor( {
        ajax: {
            create: {
                type: 'POST',
                dataSrc: "data.customers",
                url:  apiPathProtected + "customer",
                beforeSend: function (request) {
                    request.setRequestHeader("X-Access-Token", user.token);
                    request.setRequestHeader("Content-Type", "application/json");
                },
                contentType: 'application/json',
                data: function ( d ) {
                    var customBody = {
                        "data":{ 
                            "id_user": user.userid, 
                            "id_group": user.groupid, 
                            "first_name": d.data[0]["first_name"], 
                            "last_name": d.data[0]["last_name"],
                            "email": d.data[0]["email"],
                            "description": d.data[0]["description"],
                            "password": d.data[0]["password"]
                     }
                    }
                    return JSON.stringify(customBody);
                },
            },
            edit: {
                type: 'PUT',
                dataSrc: "data.customers",
                url:  apiPathProtected + "customer/_id_",
                beforeSend: function (request) {
                    request.setRequestHeader("X-Access-Token", user.token);
                    request.setRequestHeader("Content-Type", "application/json");
                },
                contentType: 'application/json',
                data: function ( d ) {
                    var customerData = d.data[Object.keys(d.data)[0]];
                    var customBody = {
                        "data":{ 
                            "id_user": user.userid, 
                            "id_group": user.groupid, 
                            "first_name":customerData.first_name, 
                            "last_name":customerData.last_name,
                            "email": customerData.email,
                            "description": customerData.description,
                            "password": customerData.password
                     }
                    }
                    return JSON.stringify(customBody);
                }
            },
            remove: {
                type: 'DELETE',
                dataSrc: "data.customers",
                url:  apiPathProtected + "customer/_id_",
                beforeSend: function (request) {
                    request.setRequestHeader("X-Access-Token", user.token);
                    request.setRequestHeader("Content-Type", "application/json");
                },
                data: function ( d ) {
                    delete d.action;
                    delete d.data;
                }
            }
                },
        table: "#the-table",
        idSrc:  'id',
        fields: [ {
                label: "First Name:",
                name: "first_name"
            }, {
                label: "Last Name:",
                name: "last_name"
            }, {
                label: "Email:",
                name: "email"
            }, {
                label: "Password:",
                name: "password",
                type: "password"                
            }, {
                label: "Description:",
                name: "description"
            }
        ]        
    });

Here is a snippet of my jQuery code that works to open the page from the link:

var url = window.location.href;
        if(url.indexOf('?add=true') != -1) { 
            console.log('open modal');   //this works as it should            
            $('#the-table').modal("show");
        } else {
            $('#the-table').modal("hide");
        }

This jQuery will darken the page as if the modal is open but nothing shows. I need to find the class of the modal to allow jQuery to open the create modal.

allan

Do you mean the Editor modal? If so, you would call the edit() method to edit a specific row in the DataTable.

Allan

ChuckT

Thanks Allan, it was far more simple than I was making it out to be.

Here's my code in case someone else may need it.

 var url = window.location.href;
        if(url.indexOf('?add=true') != -1) { 
                  
            editor
                .title( 'Add new record' )
                .buttons( 'Create' )
                .create();
        }