Open editor with a custom button without using a table
Open editor with a custom button without using a table

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
This question has an accepted answers - jump to answer
Answers
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
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
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
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
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 andtable
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
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
Could the form be hidden behind something else?
In the console try:
that would find the Editor form if it is somewhere in the document...
Allan
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
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
Maybe the
select
docs andfields.options
docs will help. Also the Standalone editing example has aselect
field.Kevin
Thank you once again for your help, Kevin.
Here is some code that might help figure the problem out:
File: register.js
File: register.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
See this thread for how to update the select options with Standalone editor.
Use triple backticks (```) on new lines to highlight the code sections. The same instructions are noted below the
Post Comment
button.Kevin
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?
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 arraydata
have the keystext
andid
?Step through the
$.each()
loop to make surecountryoptions
is built with the values you expect.Kevin
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
Looks like the loop should look something like this:
Within the loop you will need to change
e.text
ande.id
to the objects you are returning.The returned JSON might be in the correct format. Just doing this might work:
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 isdata
that is passed to the server. Unless your server script is looking for aterm
value sent from the client you can remove it.Kevin
Once again, thank you for all your help, Kevin.
Now I am getting this error: Uncaught TypeError: data.options.clients is undefined
The data returned looks like this:
Object { data: (15) […], options: {…}, files: [] }
data: Array(15)
files: Array []
options: Object { "clients.country_id": […] }
I would debug the data variable to see what the structure is. Probably something incorrect in the syntax.
Kevin
The options part of the data returned looks like this:
For whoever is reading this, I ended up creating the following countries.php:
And then I used this code to populate the countries select in the standalone editor field:
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