Use custom form without popup

prema770 · January 2020

My use case involves the following the following workflow:

Default view table grid
Click custom button to edit / add
On custom button click hide grid, show form (no popup)
Edit and submit form
Form hides, grid shows.

Has anyone please got any pointers on how to do this making maximum use of datatables / editor library?
My implementation is Bootstrap4

Any help or comments appreciated
Mike

allan · January 2020

Hi Mike,

Have a look at this blog post which details how a display controller plug-in can be created to show the Editor form without a popup.

Allan

prema770 · January 2020

Thanks Allan - this is great and I'm sure that I can bend this to make it work.
The ideal solution involves a custom form that works like this

Clicking Edit / new (in row) hides the grid and shows the form
Click submit saves the row, hides the form, shows the grid.

Can do this in a hacky way but can't help feeling there is an easy way.
Any further comments gratefully received

Kindest regards and massive appreciation for Datatables / editor
Mike

allan · January 2020

What you want can be achieved with more or less the display controller in that blog post, but make sure you add code to show and / hide the table container when the form is shown / hidden - e.g.:

$(table.table().container()).css('display', 'none');

will hide the DataTable entirely.

Allan

prema770 · January 2020

Very cool -thank heaps for the tip
Kindest regards
Mike

prema770 · January 2020

Hi All!
Getting there with some help from the community!
Working to enable this scenario (bringing forward from previous postings)
Requirements:
* Create a simple session table
* Add CKEditor to some fields
* Create custom form
* Bootstrap4 enabled
* Need a custom display controller which kind of follows this pattern as pointed out by Allan:

https://datatables.net/blog/2017-06-30
And this https://datatables.net/media/blog/2017-06-30/onPage.js

The idea is to provide the following sequence
* Page load
* Table displayed
* Click inline edit to hide table / show form
* Submit form -> Hide form , show table again
* Click inline delete to delete record
* Click custom add button to hide table and show record in add mode
* Submit form
* Hide form, show table

Pretty conventional.
Requirements:
* Form must not popup. (Custom display controller as already mentioned by Allan)
* Custom form.

All this is in rough form at

http://hdl01.healthdatalab.com/datatables/hdl_sessions2/

Current stopper is
* With the custom code the form does not load
* Console error

Uncaught Cannot find display controller onPage0.492159745586013

Any tips on what is causing this error gratefully received.
Can provide any information that will help

Kind regards
MIke

colin · January 2020

I'm getting a 404 with that link, please can you fix it.

Colin

prema770 · January 2020

Colin - apologies!
http://hdl01.healthdatalab.com/datatables/ - Corrected link.
Please let me know if you need it tidied up or any clarification.
Appreciate your taking a look

Kind regards
Mike

colin · January 2020

Thanks. The page loads, but there's a console error ('Uncaught Cannot find display controller onPage0.18616914705287568') and only the page header is displayed.

Colin

prema770 · January 2020

Thanks very much for your comment
Yes Allan's code, in this case returns a name string instead of the expected display controller.

I feel sure that this is because in my case the form needs to be a custom form and Allan's code uses the normal editor form

Things go bad on line 42, when initializing the editor. I'm not clear what I should pass to the onPageDisplay function - the custom form? or an empy div for the custom Page display. At the moment I'm passing the selector of the div.

So any commments again very welcome.
Thanks for looking at this
Mike

    function onPageDisplay ( elm ) {
        var name = 'onPage'+Math.random();
        var Editor = $.fn.dataTable.Editor;
        var emptyInfo;

        Editor.display[name] = $.extend( true, {}, Editor.models.display, {
            // Create the HTML mark-up needed the display controller
            init: function ( editor ) {
                emptyInfo = elm.html();
                return Editor.display[name];
            },

            // Show the form
            open: function ( editor, form, callback ) {
                elm.children().detach();
                elm.append( form );

                if ( callback ) {
                    callback();
                }
            },

            // Hide the form
            close: function ( editor, callback ) {
                elm.children().detach();
                elm.html( emptyInfo );

                if ( callback ) {
                    callback();
                }
            }
        } );
        return name;
    }

    var editor;

    $(document).ready(function(){
        editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.session3.php',
        table: '#session3',
        display: onPageDisplay('.session-display'), <== Have created an empty div
        template: '#sessionForm',
        fields: [ ...........

allan · January 2020

name = 'onPage'+Math.random();

This is going to result in an invalid Javascript identifier, since it has a . in it - e.g. as you are seeing:

onPage0.18616914705287568

Try instead:

name = 'onPage'+Math.ceil( Math.random() * 1000 );

Allan

prema770 · January 2020

Thanks again Allan. We've made that change. The error does remain

Interesting discovery:
While the error message is Cannot find display controller onPage121
pointing to the display controller, it turns out that the table on line 41 in the code sample above is showing undefined with an active debugger breakpoint on line 42.

#session3 is on the page though.

kthorngren · January 2020

What happens if you use this between line 38 and 39 before initializing the Editor?
console.log($("#session3").get(0).tagName);

Kevin

prema770 · January 2020

Hi Kevin
Code updated with your suggestion -
Returns TABLE
Is this implying an HTML breakage

$(document).ready(function(){
    console.log($("#session3").get(0).tagName);
    editor = new $.fn.dataTable.Editor( {
    ajax: 'php/table.session3.php',
    table: '#session3',
    display: onPageDisplay('.session-display'), 
    template: '#sessionForm',
    fields: [

allan · January 2020

Are you able to update you JS file with the latest code - I'm still seeing just Math.random() without the integer parsing. Or is it on a different page now?

Thanks,
Allan

prema770 · January 2020

Our changes are in dev but updated now
http://hdl01.healthdatalab.com/datatables/
Thanks for checking :-)
Mike

allan · January 2020

Thank you. What is happening is that there is a Javascript function in your init function and unfortunately Editor is swallowing it due to a try/catch.

I believe the error is coming from this line:

emptyInfo = elm.html();

elm is a string, so it has no html() function.

I think what you want is:

onPageDisplay($('.session-display'))

or in your function:

elm = $(elm);

Allan

prema770 · January 2020

Thanks very much Alan. It takes us a step further
The updated code segment is pasted below

DT initializes fine and we are another step closer to actually embedding the form that appears below the table

The form template containing the custom layout is .session-form
The empty div that we would like contain the custom form is .session-display

In line 45 of the code below we call the onPageDisplay function, passing the empty .session-display div where we would like to place the custom form .session-form

We have an error
Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent. . The current issue is that we assumeH that we should pass the placeholder .session-display to the onPageDisplay handler.

The code we have been basing our approach on is here

https://datatables.net/blog/2017-06-30

however this example does not use a custom form and there's a bit of confusion around that

I'm very mindful of the effort you and your community are putting into this. It is important to use as a part of a startup project and wonder if commercial compensation could help.

Support so far has been excellent and we are very grateful.
This is a direct link to the dev enviroment and is fully up to date

http://no68go5oepetgkap.myfritz.net/hdl_sessions2/

We can answer any question or provide any codesamples needed


var editor;

// Plugin
function onPageDisplay (elm) {
    var name = 'onPage'+Math.ceil( Math.random() * 1000 );
    var Editor = $.fn.dataTable.Editor;
    var emptyInfo;
 
    Editor.display[name] = $.extend( true, {}, Editor.models.display, {
        // Create the HTML mark-up needed the display controller
        init: function ( editor ) {
            emptyInfo = elm.html();
            return Editor.display[name];
        },
 
        // Show the form
        open: function ( editor, form, callback ) {
            elm.children().detach();
            elm.append( form );
 
            if ( callback ) {
                callback();
            }
        },
 
        // Hide the form
        close: function ( editor, callback ) {
            elm.children().detach();
            elm.html( emptyInfo );
 
            if ( callback ) {
                callback();
            }
        }
    } );
    return name;
}


$(document).ready(function(){
    console.log($("#session3").get(0).tagName);
    editor = new $.fn.dataTable.Editor( {
    ajax: 'php/table.session3.php',
    table: '#session3',
    display: onPageDisplay($('.session-display')), 
    template: '#sessionForm',
    fields: [

allan · January 2020

The W3C HTML validator is picking up a few errors in the HTML and I'm wondering if that is the problem. The two that concern me are:

Error: Unclosed element div.
From line 187, column 9; to line 187, column 30
↩ <div id="sessionForm">↩

and

Error: End tag for body seen, but there were unclosed elements.
From line 321, column 21; to line 321, column 27
</body>↩

What the browser is doing with those unclosed elements might result in this error (trying to insert a node into a child of itself).

Could you possibly correct the HTML and let me know if that resolves it or not?

Thanks,
Allan

prema770 · January 2020

Yes will do thanks for pointing that out
Kind regards Mike

prema770 · January 2020

Just in case anyone is watching this - We're needing to attend to some urgent work but very keen on progressing -- will post any progress

Use custom form without popup

Use custom form without popup

Answers

Howdy, Stranger!

Categories

DataTables

Use custom form without popup

Use custom form without popup

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables