How to keep editing window open

milap

Hello,

Is there any way, using primary editing method (with big pop-up window), to add additional execute button that will do the same as the existing submit button but that will not close the pop-up window it self? - so I will be able to instantly add another record.

The button it self isn't a problem:

$('#myTable').DataTable( {
    buttons: [
        {
            extend: 'create',
            editor: myEditor,
            formButtons: [
                {
                    label: 'Accept',
                    fn: function () { this.submit(); }
                },
                'Save and close'
            ]
        }
    ]
} );

But how to change the action that it will not close the window? - submit() is closing.

2nd question is it possible to pass directly data between form instance fields (other way than by session variables)? For example:

I've got form with 2 fields:

1) Option (dropdown)

2) Input

Iam filling them with data.
After pressing "Accept" button I wish to send the data to a database and also forward Option selection to a new form instance without closing the edit window.

Is it posiible? If not maybe is it possible to automatically reopen the edit window? - only after proper validation and db submission

allan

You can use the formOptions.main option to set the complete option to none. That will keep the Editor window open after submission and you would need to call close() to close it.

Allan

milap

Allan thank You,
It is almost doing what I want.
I have added this code:

formOptions: {
                    main: {
                        onComplete: 'none'
                    }
                },

and - as You said - during submission window does not close.
The problem is that I cant submit the next data.
When I am clicking the button nothing happens.

To make it work I have to close the window and reopen it again - any suggestions?

milap

Ok,
I have figured out it by my self.
The solution was to call create():

    // Display the buttons
    new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor, 
                formButtons: [
                    {
                        label: 'Accept',
                        fn: function () { this.submit(); this.create(); }
                    }, {
                        label: 'Save and close',
                        fn: function () { this.submit(); this.close(); }
                    }
                ] }
    ] );

Now I have a problem how to stop next step after the submit() if there are some errors from validator?

Since submit 1st parameter calls a function during the success callback my idea was to:

                formButtons: [
                    {
                        label: 'Accept',
                        fn: function () { this.submit(this.create()); }
                    }, {
                        label: 'Save and close',
                        fn: function () { this.submit(this.close()); }
                    }
                ]

but it does not work...
Another try was using submitSuccess

                formButtons: [
                    {
                        label: 'Accept',
                        fn: function () { this.submit(); this.on( 'submitSuccess', function () {this.create();});  }
                    }, {
                        label: 'Save and close',
                        fn: function () { this.submit(); this.on( 'submitSuccess', function () {this.close();});  }
                    }
                ] }

Now it works but when I will for instance submit 3 times with "Accept" and then 1 time with "Save and close" something strange happens with interface (I've got blur without edit window)

allan

One thing about this:

this.submit(); this.create();

That will execute the create immediately after submit is called - and since the submit is async, that will be before the data has been returned from the server.

Perhaps what you want is:

var that = this;
this.submit( function () {
  that.create();
} );

And likewise for the close option.

I'm not sure I've quite understood the issue / goal correctly, but I think that will resolve the issue.

Allan

milap

Ok now it works, but TBH I don't know why...
In my code (look above) I was using very similar:

fn: function () { this.submit(this.create()); }

Why var that = this; done the job?

Regardless of that, thank You!

allan

this.submit(this.create());

Here you are executing this.create() and then passing the result into this.submit() which you don't want! You want this.create() to execute after the submit function is done which is why you pass it in as a function - the submit function knows what to do with it.

Allan

milap

You are right :) Thank You