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

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

MarkAndersonUKMarkAndersonUK Posts: 43Questions: 16Answers: 0

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 ?

Answers

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

    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

  • MarkAndersonUKMarkAndersonUK Posts: 43Questions: 16Answers: 0

    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.

  • MarkAndersonUKMarkAndersonUK Posts: 43Questions: 16Answers: 0
    edited May 2022

    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

  • MarkAndersonUKMarkAndersonUK Posts: 43Questions: 16Answers: 0

    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 ?

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

    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 :smile:

                     {
                         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

Sign In or Register to comment.