Custom form layout - Fieldset stopped working?

Custom form layout - Fieldset stopped working?

esmurfesmurf Posts: 29Questions: 4Answers: 0

Hi Y'all,

I've worked with the form layout from https://editor.datatables.net/examples/simple/template.html
It worked fine for a long time on both my computer and server. But suddenly the fieldset stopped working (the fields in the form), but the legend (Headers/Title in the form) still works.

If I setup the project on a new server, the fieldset works straight from the start without any changes or issues..?

The project on my server hasn't been touched, and worked fine until an update or clear cache. I'm not sure which or if that is the problem..

If there's anyone who've had the same issue as me, please leave a comment.

Below is one of my tables using fieldset.

Cheers!

<style type="text/css">
    #customForm {
        display: flex;
        flex-flow: row wrap;
    }
    #customForm fieldset legend {
        padding: 5px 20px;
        border: 1px solid #aaa;
        font-weight: bold;
    }
    #customForm fieldset.DKsnip{
        flex: 2 100%;
    }
    #customForm fieldset.DKsnip legend {
        background: #bfffbf;
    }
    #customForm fieldset.ENGSNIP{
        flex: 10 100%;
    }
    #customForm fieldset.ENGSNIP legend {
        background: #ffbfbf;
    }
</style>

<body class="dt-example">
<div class="container"  style="float: left">
    <section>
        <div id ="customForm">
            <fieldset class="ENGSNIP">
                <legend>Engelsk</legend>
                <editor-field name="crapper_snippet.scan_vendor"></editor-field>
                <editor-field name="crapper_snippet.vendor_id"></editor-field>
               <editor-field name="crapper_snippet.identifier_id"></editor-field>
                <editor-field name="crapper_snippet.vuln_title"></editor-field>
                <editor-field name="crapper_snippet.type"></editor-field>
                <editor-field name="crapper_snippet.area"></editor-field>
                <editor-field name="crapper_snippet.severity"></editor-field>
                <editor-field name="crapper_snippet.vuln_descr"></editor-field>
                <editor-field name="crapper_snippet.vuln_conseq"></editor-field>
                <editor-field name="crapper_snippet.vuln_solution"></editor-field>
            </fieldset>
        <fieldset class="DKsnip">
            <legend>Dansk</legend>
            <editor-field name="crapper_snippet.snip_lang_title"></editor-field>
            <editor-field name="crapper_snippet.lang_description"></editor-field>
            <editor-field name="crapper_snippet.snip_lang_recom"></editor-field>
            <editor-field name="crapper_snippet.notes"></editor-field>
        </fieldset>
           </div>
        <table id="snippetTable" class="display" style="display: none" >
            <thead>
            <tr>
                <th>vul_id</th>
                <th>scan vendor</th>
                <th>vendor</th>
                <th>identifier</th>
                <th>vuln title</th>
                <th>type</th>
                <th>area</th>
                <th>base_cvss</th>
                <th>severity</th>
                <th>vuln descr</th>
                <th>vuln conseq</th>
                <th>solution</th>
                <th>snip id </th>
                <th>language </th>
                <th>title</th>
                <th>recom</th>
                <th>description</th>
                <th>description</th>
                <th>notes</th>
            </tr>
            </thead>
        </table>
    </section>
</div>
</body>
<script>

    var editorSnippet; 
    
    $(document).ready(function() {
        editorSnippet = new $.fn.dataTable.Editor( {
            ajax: {
                create: {
                    type: 'POST',
                    url: '../backend/backendCRUD/snippetCRUD/create.php'
                },
                remove: {
                    type: 'POST',
                    url:  '../backend/backendCRUD/snippetCRUD/remove.php?id=_id_'
                },
                edit: {
                    type: 'POST',
                    url: '../backend/backendCRUD/snippetCRUD/edit.php?id=_id_'
                }
            },


            table: "#snippetTable",
            template: '#customForm',
            fields: [
           {
                   label: "vul id",
                   name: "crapper_snippet.vul_id",
               },
                {
                    label: "scan vendor",
                    name: "crapper_snippet.scan_vendor",
                },
                {
                    label: "vendor",
                    name: "crapper_snippet.vendor_id"
                },
                {
                    label: "identifier",
                    name: "crapper_snippet.identifier_id"
                },
                {
                    label: "Title",
                    name: "crapper_snippet.vuln_title"
                },
                {
                    label: "Type",
                    name: "crapper_snippet.type"
                },

                {
                    label: "Area",
                    name: "crapper_snippet.area"
                },
                {
                    label: "base_cvss",
                    name: "crapper_snippet.base_cvss"
                },
                {
                    label: "severity",
                    name: "crapper_snippet.severity"
                },
                {
                    type: "textarea",
                    label: "Description",
                    name: "crapper_snippet.vuln_descr"
                },
                {
                    type: "textarea",
                    label: "Consequence ",
                    name: "crapper_snippet.vuln_conseq"
                },
                {
                     type: "textarea",
                    label: "Solution",
                    name: "crapper_snippet.vuln_solution"
                },
                {
                    label: "snip id",
                    name: "crapper_snippet.snip_id"
                },
                {
                    label: "sprog",
                    name: "crapper_snippet.snip_language"
                },
                {
                    label: "Title",
                    name: "crapper_snippet.snip_lang_title"
                },

                {
                    label: "Solution",
                     type: "textarea",
                    name: "crapper_snippet.snip_lang_recom"
                },
                {
                       type: "textarea",
                    label: "Description",
                    name: "crapper_snippet.lang_description"
                },
                {
                    label: "sv_key",
                    name: "crapper_snippet.sv_key"
                },
                {
                    type: "textarea",
                    label: "Notes",
                    name: "crapper_snippet.notes"
                },



            ]
        } );


        $('#snippetTable').DataTable( {
            dom: "rt",
            ajax: {
                url: "../backend/getSnippetBack.php",
                type: 'POST'},
            serverSide: true,
            searching: true,
            columns: [

                {
                    data: "crapper_snippet.vul_id"
                },
                {
                    data: "crapper_snippet.scan_vendor"
                },
                {
                    data: "crapper_snippet.vendor_id"
                },
                {
                    data: "crapper_snippet.identifier_id"
                },
                {
                    data: "crapper_snippet.vuln_title"
                },
                {
                    data: "crapper_snippet.type"
                },
                {
                    data: "crapper_snippet.area"
                },
                {
                    data: "crapper_snippet.base_cvss"
                },
                {
                    data: "crapper_snippet.severity"
                },
                {
                    data: "crapper_snippet.vuln_descr"
                },
                {
                    data: "crapper_snippet.vuln_conseq"
                },
                {
                    data: "crapper_snippet.vuln_solution"
                },
                {
                    data: "crapper_snippet.snip_id"
                },
                {
                    data: "crapper_snippet.snip_language"
                },
                {
                    data: "crapper_snippet.snip_lang_title"
                },
                {
                    data: "crapper_snippet.snip_lang_recom"
                },
                {
                    data: "crapper_snippet.lang_description"
                },
                {
                    data: "crapper_snippet.sv_key"
                },
                {
                    data: "crapper_snippet.notes"
                },

            ],
            select: true,
            buttons: [
                { extend: "create", editor: editorSnippet },
                { extend: "edit",   editor: editorSnippet },
                { extend: "remove", editor: editorSnippet },
            ]

        } );

    } );




</script>

Replies

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

    Hi @esmurf ,

    Sounds odd it stopped working. Are you seeing any errors in the browser or the server? Are you able to link to the page so we can take a look?

    Cheers,

    Colin

  • esmurfesmurf Posts: 29Questions: 4Answers: 0

    Hi @colin
    I'm not able to give you a link, the server is only reachable locally..
    I'm not getting any errors at all and I've been stuck on this issue for quite a while.

    I have no clue what the problem is and how to proceed, but if you have any idea please let me know!

    Kind regards,
    Esmurf.

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

    So its been working for a while, but has suddenly stopped working without any local changes? What aspect has stopped working - does the DataTable initialise? Does the Editor form show? Does it show, but the fields don't display? Does it not submit.

    As Colin suggested, really for this sort of issue (was working, but no longer, with no changes) we'd really need to be able to see the page to diagnose the issue from first principles.

    One thing that would be worth looking at as well is your remote JS / CSS includes if you have any? You might not have changed anything but possibly something has remotely? Assuming you are pulling any remote sources of course?

    Allan

  • esmurfesmurf Posts: 29Questions: 4Answers: 0

    Hi @allan

    The Legend still shows but the Fieldset doesn't as seen in the picture below.
    It can still do CRUD's and whatsoever, the only issue is that fieldset doesn't show.

    As written I'm not able to provide a link to the page. This post was just a small hope for a fix/solution for my problem. It was a long shot and wasn't hoping for much. You can close this discussion if you can't assist me any further.

    Below is my imported JS and CSS.

    Love your work btw!

    <head>
        <title>ReGen 2.0</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="ReGen Alpha">
        <meta name="author" content="Shiva">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.6/css/select.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="../Editor-PHP-1.7.4/css/editor.dataTables.min.css">
    
    <link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">
    
    
        <link rel="stylesheet" type="text/css" href="../Editor-PHP-1.7.4/examples/resources/syntax/shCore.css">
        <link rel="stylesheet" type="text/css" href="../Editor-PHP-1.7.4/examples/resources/demo.css">
        <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="icon" href="../images/favicon.ico" type="image/x-icon" />
        <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
    
        <!-- Nedenstående er for PHPWORD...-->
        <link rel="stylesheet" href="../PHPWord/samples/bootstrap/css/phpword.css" />
        <link rel="stylesheet" href="../PHPWord/samples/bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" href="../PHPWord/samples/bootstrap/css/font-awesome.min.css" />
    
    
        <!-- Nedenstående er for DataTables...-->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script type="text/javascript" src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript"  src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript"  src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js"></script>
        <script type="text/javascript"  src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
        <script type="text/javascript" src="../Editor-PHP-1.7.4/js/dataTables.editor.min.js"></script>
        <script type="text/javascript" src="../Editor-PHP-1.7.4/examples/resources/syntax/shCore.js"></script>
        <script type="text/javascript"  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type="text/javascript"  src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
        <script type="text/javascript"  src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
        <!-- Busy Load JS -->
        <script src="https://cdn.jsdelivr.net/npm/busy-load/dist/app.min.js"></script>
    
        <!-- Busy Load CSS -->
        <link href="https://cdn.jsdelivr.net/npm/busy-load/dist/app.min.css" rel="stylesheet">
        <script type="text/javascript"  src="https://cdn.datatables.net/plug-ins/1.10.13/api/fnDisplayRow.js"></script>
    
    </head>
    
  • allanallan Posts: 61,439Questions: 1Answers: 10,052 Site admin

    If you Inspect the model, is the content for the form present, but just hidden? Or has it not been appended to the document at all.

    I can't see how anything other than Editor would effect that, but if you haven't changed the Editor script recently, I can't see how it would suddenly stop working!

    Maybe bit rot is real :).

    Allan

  • esmurfesmurf Posts: 29Questions: 4Answers: 0

    Well... I found the model, but I'm not sure if it's hidden.
    When I hoover the editor-field has a padding of 0 x 0, I'm not sure what to get out of this, any clues?

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

    Yup - so that means Editor isn't replacing those custom tags with the field elements.

    Looking at the HTML there you have id="overviewForm" there, but in your Editor initialisation code that you posted earlier:

    template: '#customForm',
    

    Changing that to be #overviewForm should do it.

    Allan

  • esmurfesmurf Posts: 29Questions: 4Answers: 0

    Hi @allan

    That's my bad! That was the wrong picture in my last post .....!

    See the picture below.

    Here is the id="customForm" as in my Editor initialisation. So it should be setup correctly?

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

    Yes, that looks like it should work. I wonder if you could try changing:

    <editor-field name="crapper_snippet.scan_vendor"></editor-field>
    

    to be:

    <div data-editor-template="crapper_snippet.scan_vendor"/>
    

    Not sure it will fix it, but its worth a shot!

    Allan

  • esmurfesmurf Posts: 29Questions: 4Answers: 0

    Hi @allan
    Ive tried that already, doesn't work.. :neutral:

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

    And there is no way for you to open a port or something so I can load the page and debug it? I'm afraid I'm running out of ideas!

    Is the template in the document when you initialise the Editor instance?

    Allan

  • esmurfesmurf Posts: 29Questions: 4Answers: 0

    Forgot to answer you @allan I've been on a longer vacation and all...
    Anyway, I got it to work! I'm not sure what the problem was, but I might think it was a template issue... I solved it by upgrading from Editor-1-7-4 -> Editor-1.9.0.

    Ty for help!

This discussion has been closed.