Custom form layout - Fieldset stopped working?
Custom form layout - Fieldset stopped working?
esmurf
Posts: 29Questions: 4Answers: 0
in DataTables
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>
This discussion has been closed.
Replies
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
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.
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
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!
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
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?
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:Changing that to be
#overviewFormshould do it.Allan
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?Yes, that looks like it should work. I wonder if you could try changing:
to be:
Not sure it will fix it, but its worth a shot!
Allan
Hi @allan
Ive tried that already, doesn't work..
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
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!