Editor save Form without closing it - when using custom forms templates.

MarkAndersonUK

Hi,

I am trying to allow my users to make saves to a record without closing the form. Very similar to a question asked some time ago in the forum at : https://datatables.net/forums/discussion/32727

The problem is, I am using a custom form template, and the formButtons are not appearing. Is this a limitation
of using a custom template? or is there a trick to adding or editing buttons in a form template ?

colin

The same principle with the formOptions should still apply - please see example here based on that thread you linked to.

Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

MarkAndersonUK

I see the example works fine... I will go through my code and see what I am doing differently.. Of hand, the one thing I know that I have that is different, is I have also have an ** init:** function in my form buttons section. I wonder if that is conflicting and stopping it working.. I will try removing it and get back to you.

MarkAndersonUK

Hi @colin,

I think the problem is down to me using a 'edit' icon/button on each record line to open the edit window. Here is the code:

        $('#recruits').on('click', 'td.editor-edit', function (e) {e.preventDefault();
            recruitEditor.edit($(this).closest('tr'), {title: 'Edit record',buttons: 'Update'});
        }); // Edit record

When I open the edit window using the official 'Edit' button, the form buttons appear correctly, but when I open it using the 'edit' icon/button, the edit window open
with only the one 'update' button (understandably as that is all I defined)

I tried moving the formButtons section into the code above, but that resulted
in the button disappearing totally. Do you know what the correct way of adding 'formButtons' when opening the edit box this way might be?

Thanks

MarkAndersonUK

Hi @colin ,

Thanks for your patience on this... I was able to adapt the code to work on the
button section of the '.edit' line. However, I am getting a strange problem.
Only the first SAVE is working, and the console.log line generates the correct ID number. On the second save the console.log generates an empty ID and also displays an error on the screen :

Also, the Save and Close button works, but only if used BEFORE the SAVE button is used at all.

Here is the code that I modified :

       $('#recruits_data').on('click', 'td.editor-edit', function (e) {
            e.preventDefault();
            r_dataEditor.edit($(this).closest('tr'), {title: 'Edit recruitment progress',
                buttons:[ {
                            text: 'Save',
                            action: function () { 
                                var that = this; 
                                var ids = this.ids(); 
                                console.log(ids); 
                                this.submit(function() { 
                                    that.edit(ids); 
                                }); 
                            }
                        },
                        {
                            text: 'Save and Close',
                            action: function () { 
                                var that = this;
                                var ids = this.ids();
                                console.log(ids);
                                this.submit(function() {
                                    that.edit(ids);
                                }); 
                                this.close();
                            }
                        }
                        ]

            });
        }); // Edit record

Any idea what I have messed up ?

colin

This code looks wrong:

                 {
                     text: 'Save and Close',
                     action: function () {
                         var that = this;
                         var ids = this.ids();
                         console.log(ids);
                         this.submit(function() {
                             that.edit(ids);
                         });
                         this.close();
                     }
                 }

I think it just needs to be

                 {
                     text: 'Save and Close',
                     action: function () {
                         this.submit();
                     }
                 }

Please see my earlier example updated here.

I'm not seeing the issue where only the first edit is being saved - are you seeing that on my example too? If not, could you update it, please, so it reflects your code.

Colin