Standalone Editor - Save and Delete buttons on same form?
Standalone Editor - Save and Delete buttons on same form?
I have a standard datatables/editor page representing a primary table in which I'm using rendered buttons to call up a separate standalone editor for editing records in a secondary table . This is a complete standalone record object with no DOM representation in the page and is only carried in a local javascript variable. After looking at the examples and reading the documentation, putting it together was pretty straightforward. The following works just as I wanted and will either pop up a create editor screen if no matching record exists or an edit screen if one does.
The one feature I can't seem to resolve is how to incorporate a 'delete record' button within the 'edit record' screen? Pre-determining whether a user wants to edit or delete a record is way beyond my limited javascript skills. Using the buttons API I can get lots of more buttons on the form but I can't seem to get .remove(id) to work from within an .edit(id) form without breaking something (usually back at Editor.php on the server side). I have noticed the record(s) object is slightly different between update and delete action where delete includes DT_RowId and update doesn't? Not sure if I have simply structured my way into a corner or am missing something in my record object??
On a side note, using an async ajax call seemed to cause complications, I understand my synchronous call is frowned on but there is absolutely nothing the user or the browser could be doing in the mean time here until the server responds back. Do I fail on principle or get a pass?
Ps. Fantastic tool! only been using it for a couple of weeks and love it :)
$('#turnover').on( 'click', 'button.bolt', function () {
ShiftHid = $(this)[0].id;
var record;
$.ajax( {
url: 'php/bolt.php?hid='+ShiftHid,
async: false,
dataType: 'json',
success: function ( json ) {
record = json.data[0];
}
} );
if (record) {
var id = record.DT_RowId;
delete record.DT_RowId; //had to do this to make edit happy
bolteditor
.title('Edit record')
.buttons('Save Record') //would like a second 'Delete Record' button also?
.edit( id, false )
.set( record )
.open();
}
else {
bolteditor
.title('Create new record')
.buttons('Create')
.create(false)
.val('hid', ShiftHid)
.open();
}
} );
Replies
The one thing I would say about the use of
async: false
is that asynchronous requests have been deprecated in the XMLHttpRequest and might potentially be removed in future. I'd suggest just dropping theif
code blocks into yoursuccess
callback - I don't see any benefit of having it synchronous there.Regarding the real issue - can you show me what you tried with the
remove()
call?Finally for now, the data submitted from edit is slightly different from delete since delete submits the original data object from the row, not the values form the editing form (since there is no editing form required when deleting an entry).
Regards,
Allan
Thanks Allan, simply moving everything into the ajax callback solved the async issue.
Here is one of my attempts at the edit/delete functionality. Save changes and Cancel work fine, can't seem to get my head around the remove part. Have confirmed the form action:"remove" is present in the ajax call but with no id parameter present.
Here is another attempt which defines my problem a bit simpler without the buttons complications. I don't seem to have the data source object properly defined for a standalone remove operation? As you and the Client/server documentation both note:
"On remove the original data source object for the row is submitted as the data object."
Create and edit operations appear to function fine with the provided data but my remove is still missing something that a normal DOM based editor instance provides?
Could you try:
I don't think
close()
should be required - thesubmit
success should do that automatically and probably isn't due to the error at the moment.modifier()
gets the id that was used to trigger the original edit, so I think that should just improve the reliability of that call.Allan
Thanks Allan, unfortunately still throws the following error for remove:
Warning: Invalid argument supplied for foreach() in /var/www/html/heading/php/lib/Editor/Editor.php on line 906
{"error":"No ids submitted for the delete","data":[]}
Here is a copy of the s: object from a console.log(this) at the remove attempt. A successful edit call object looks very much the same except the action: is null. (not sure the best way to post objects into this forum but I can expand any of these if needed?). I'm assuming the id:-1 is probably not what I need here?
I'm slowly coming to understanding of how all this works under the covers but have a ways to go yet. I can see how create just needs a defined editor instance to assemble a new record from nothing and be sent off to the db. An edit record gets processed through an editor form so it gets all put into order internally before being sent off. Remove as you noted doesn't need to pass through a edit form? This is where I'm still lost as I'm not seeing how my external data object (record) gets associated into the editor object (or the "original data source" reference)? For edit I can load up the field values with the set() method, how does remove know what I'm trying to do with what?
Thanks Again!
Are you able to give me a link to the page? I've just tried using this:
in this example and it does seem to work as expected (the row is deleted).
I don't understand why that wouldn't be working on your own page I'm afraid.
Thanks,
Allan
Unfortunately I can't provide an accessible link. I'll see if I can work something into http://live.datatables.net/ . I'll need an accessible data source to demonstrate. Are any of the demo datasources available here?
Your solution works perfectly when working with an editor instance that has a table reference. My Standalone editor instance has no table reference and my data object has no DOM representation. All I've got is my lonely little javascript variable that doesn't know how to join the Datatables party?
Couldn't figure out how to live.datable or jsfiddle the db sources so I modified one of the examples ( https://editor.datatables.net/examples/simple/join.html) as a starting point. This uses the users and sites tables and the join.php script from the examples. The result is pretty useless but it illustrates what I'm trying to do. The source paths will need to be changed of course.
Html source:
Javascript:
Needed one additional server script to access the sites table. This one has a bit of a hack with a selective "where" statement used to retrieve a single record. Not very pretty with a GET request and POST response but it appears to work fine for all normal CRUD operations.
Thanks for showing how to modify one of the existing examples to demonstrate this issue.
The problem is coming from the fact that there is no data to submit for the
name
(in that specific example). This comes about from the fact thatname
isundefined
since there is no element on the page that gives that value directly (indeed you useset()
to set that value for the edit case.So we need to work around that since in order for the id to be submitted there must be some data. Either the HTML5 attributes can be used for the standalone Editor to give the field a value, or we can add the following immediately prior to the
submit()
call:That will give it data and thus allow the submit to occur.
Allan
That did the trick Allan! Thank you very much!