Open editor with a custom button without using a table

geonick

Hello everyone!

I am trying to open the editor and create a new row by clicking on a custom button.
I do not need to display any existing row information, therefore I am not using a datatable, just the editor.
I have tried including this in my js and it doesn't seem to be working (newrow is the button being clicked):

`$('#newrow').on('click', function (e) {
    e.preventDefault();
    editor.create({
        title: 'Create new row',
        buttons: [
            {
                label: 'Cancel',
                className: "btn",
                fn: function () {
                    editor.close();
                }
            },
            {
                label: 'Create',
                className: "btn btn-primary",
                fn: function () {
                    editor.submit();
                }
            }
        ]
    });
});`

Any ideas on this approach? Is there any better approach that I could try?

Thanks,

Nick

kthorngren

it doesn't seem to be working

What exactly isn't working? Please provide more details like any console errors generated and what happens. Better is to provide a link to a page that replicates the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

geonick

Thank you for replying, Kevin.

Unfortunately, there is no external access to the page, so we will have to try and figure it out via me providing what is needed.

As mentioned above, I am not using the datatable itself (not even declaring it, just declaring the editor and trying to use just that; there is also no table element on the page).

On the page there is a button for a new record. I would like to display the editor with a create option when that button is clicked. I used the code above for the onclick event of the button and the editor does not display.

I hope this helps; if not, I will upload code for all the files behind my approach.

Best regards,
Nick

allan

Hi Nick,

To jump in, I would expect what you have there to work, and indeed, pasting it into a simple example it does show the editing modal: https://live.datatables.net/cevudola/1/edit .

Can you modify that example to demonstrate the issue you are having?

Allan

geonick

Thank you for jumping in, Alan.

Your example works just fine. When I delete the table on the page, it stops working though. Do I need to have the table (even as hidden) for this to work? I really do not need the table on the page, just the editor for a new record.

Best regards,
Nick

kthorngren

Sounds like you might not have removed the Editor's table option. After just removing the HTML table the console shows an error. Updated example without the table and table option.
https://live.datatables.net/cevudola/2/edit

The Standalone docs make reference to not defining the table option. Also see these Standalone cexamples.

Kevin

geonick

Wow!

Kevin, I am doing exactly what you did and your example is working. I will need to take a closer look at the code and try to see what caused my try to not work as planned.

Thank you for helping!

Best regards,
Nick

allan

Could the form be hidden behind something else?

In the console try:

document.querySelector('div.DTE');

that would find the Editor form if it is somewhere in the document...

Allan

geonick

Thanks for your reply, Alan.

It was what Kevin suggested. I had left the table option in the editor creation and removing that resolved the issue.

I am now facing a different problem. For this page I am using the exact same code as in a different page of the application I am working on, where everything is working as expected. With just using the editor (without the datatable and table), a drop down list is not being populated with data. Does this ring any bells or should I provide as much of the relevant code as needed so that you could maybe help me out?

Best regards,
Nick

kthorngren

It would be good to see at least the code you are trying. Better is a running test case showing the issue. It's usually easier to debug test cases rather than code snippets. Feel free to update the above test case.

Kevin

kthorngren

Maybe the select docs and fields.options docs will help. Also the Standalone editing example has a select field.

Kevin

geonick

Thank you once again for your help, Kevin.

Here is some code that might help figure the problem out:

File: register.js

addEventListener("DOMContentLoaded", function () {
    var editor = new DataTable.Editor({
        ajax: "register.php",
        fields: [
            . . .
            {label: 'Country:', name: 'clients.country_id', type: 'select', placeholder: "", placeholderDisable: false, placeholderValue: '', attr: {style:"width: 100%"}},
            . . .
        ]
    });
    $('#register').on('click', function (e) {
        e.preventDefault();
        editor.create({
            title: 'Registration Form',
            buttons: [
                {
                    label: 'Cancel',
                    className: "btn",
                    fn: function () {
                        editor.close();
                    }
                },
                {
                    label: 'Register',
                    className: "btn btn-primary",
                    fn: function () {
                        editor.submit();
                    }
                }
            ]
        });
    });
});

File: register.php

<?php
    session_start();
    include( "../lib/DataTables.php" );
    use
        DataTables\Editor,
        DataTables\Editor\Field,
        DataTables\Editor\Format,
        DataTables\Editor\Mjoin,
        DataTables\Editor\Options,
        DataTables\Editor\SearchPaneOptions,
        DataTables\Editor\Upload,
        DataTables\Editor\Validate,
        DataTables\Editor\ValidateOptions;
    Editor::inst( $db, 'clients', 'id' )
        ->fields(
            . . .
            Field::inst( 'clients.country_id' )
                ->validator( Validate::notEmpty( ValidateOptions::inst()
                    ->message( 'Please select your country!' )  
                ) )
                ->options( Options::inst()
                    ->table( 'countries' )
                    ->value( 'id' )
                    ->label( 'country' )
                ),
            Field::inst( 'countries.country' ),
            . . .
        )
        ->leftJoin( 'countries', 'countries.id', '=', 'clients.country_id' )
        ->process( $_POST )
        ->json();

<?php
>
?>

The country select is being populated when I use the datatable and the HTML table. When I use just the editor it remains empty.

Best regards,
Nick

EDIT: I don't know why the code formatting is not working here. Hope it is not unreadable!

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

kthorngren

See this thread for how to update the select options with Standalone editor.

I don't know why the code formatting is not working here. Hope it is not unreadable!

Use triple backticks (```) on new lines to highlight the code sections. The same instructions are noted below the Post Comment button.

Kevin

geonick

Thanks for pointing to the right direction, Kevin.

I have included the following code in the register.js file and the country select now seems to be populated with a couple of empty values. What am I doing wrong?

    var countryoptions = [];
    $.getJSON("register.php",
        {
            term: "-1"
        },
        function (data) {
            var option = {};
            $.each(data, function (i, e) {
                option.label = e.text;
                option.value = e.id;
                countryoptions.push(option);
                option = {};
            });
        }
    ).done(function () {
        editor.field('clients.country_id').update(countryoptions);
    });

kthorngren

The code looks ok. It's hard to say what the results will be without debugging it. The first step is to verify what the response data is and if its the structure you are expecting in your $.each() loop. Use the browser's network inspector to view the JSON response.

Use the browser's debugger and put a breakpoint on line 7. This will allow you to see what values data has. Do the objects in the array data have the keys text and id?

Step through the $.each() loop to make sure countryoptions is built with the values you expect.

Kevin

geonick

Thanks once again, Kevin.
I was just checking this and here is the response. I am getting the data, which seems normal for the field configuration and then this for the options part:

options { "clients.country_id": (195)[…] }
clients.country_id (195)[ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
. . .
label "Greece"
value 67
. . .

Does it make any sense? It provides the same response with or without the term: "-1" bit (what does that do anyway, is it relevant in my case?).

Best regards,
Nick

kthorngren

options { "clients.country_id": (195)[…] }

Looks like the loop should look something like this:

$.each(data.options.clients.country_id, function (i, e) {

Within the loop you will need to change e.text and e.id to the objects you are returning.

The returned JSON might be in the correct format. Just doing this might work:

$.getJSON("register.php",
    function (data) {
        editor.field('clients.country_id').update( data.options.clients.country_id );
    }
);

It provides the same response with or without the term: "-1" bit (what does that do anyway, is it relevant in my case?

I assume you copied and pasted the code from the thread I linked to. Read the [GetJSON]https://api.jquery.com/jQuery.getJSON/) docs to learn what term: "-1" is. It's the second parameter which is data that is passed to the server. Unless your server script is looking for a term value sent from the client you can remove it.

Kevin

geonick

Once again, thank you for all your help, Kevin.

Now I am getting this error: Uncaught TypeError: data.options.clients is undefined

geonick

The data returned looks like this:

Object { data: (15) […], options: {…}, files: [] }
data: Array(15)
files: Array []
​options: Object { "clients.country_id": […] }

kthorngren

I would debug the data variable to see what the structure is. Probably something incorrect in the syntax.

Kevin

geonick

The options part of the data returned looks like this:

Object { "clients.country_id": () […] }
"clients.country_id": Array() [ {…}, {…}, {…}, … ]
. . .
​​​​67: Object { label: "Greece", value: 67 }
​​. . .

geonick

For whoever is reading this, I ended up creating the following countries.php:

    session_start();
    include( "../lib/DataTables.php" );
    use
        DataTables\Editor,
        DataTables\Editor\Field;
    Editor::inst( $db, 'countries', 'id' )
        ->fields(
            Field::inst( 'countries.id' ),
            Field::inst( 'countries.country' )
        )
        ->process( $_POST )
        ->json();

And then I used this code to populate the countries select in the standalone editor field:

    var countryoptions = [];
    $.getJSON("countries.php", function (data) {
        var option = {};
        $.each(data.data, function (i, e) {
            console.log(e.countries.country);
            option.label = e.countries.country;
            option.value = e.countries.id;
            countryoptions.push(option);
            option = {};
        });
    }).done(function () {
        editor.field('clients.country_id').update(countryoptions);
    });

It now seems to be working, but I will give it some testing with a clear head.

Thanks ever so much for your help, guys.

Best regards,
Nick