Use custom form without popup

Use custom form without popup

prema770prema770 Posts: 37Questions: 11Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Answer ✓

    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

  • prema770prema770 Posts: 37Questions: 11Answers: 0

    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

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • prema770prema770 Posts: 37Questions: 11Answers: 0

    Very cool -thank heaps for the tip
    Kindest regards
    Mike

  • prema770prema770 Posts: 37Questions: 11Answers: 0

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • prema770prema770 Posts: 37Questions: 11Answers: 0

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • prema770prema770 Posts: 37Questions: 11Answers: 0

    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: [ ...........
    
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • prema770prema770 Posts: 37Questions: 11Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited January 2020

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

    Kevin

  • prema770prema770 Posts: 37Questions: 11Answers: 0

    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: [
    
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • prema770prema770 Posts: 37Questions: 11Answers: 0

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

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • prema770prema770 Posts: 37Questions: 11Answers: 0

    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: [
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    edited 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

  • prema770prema770 Posts: 37Questions: 11Answers: 0

    Yes will do thanks for pointing that out
    Kind regards Mike

  • prema770prema770 Posts: 37Questions: 11Answers: 0

    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

This discussion has been closed.