Create button with extra function

milap

Hello,

Is there any way to add an extra function to build-in create button? - that one that opens editing window.

I have code like this:

new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor,
        formButtons: [
            {
                label: 'Accept',
                fn: function () { 
                    var that = this;
                    var id_uzytkownik = this.val('operacja.id_uzytkownik'); //passing data
                    var id_s_operacja = this.val('operacja.id_s_operacja'); //passing data
                    this.submit(function () {
                        that.create();
                        that.field('operacja.id_uzytkownik').def(id_uzytkownik); //loading passed data
                        that.field('operacja.id_s_operacja').def(id_s_operacja); //loading passed data
                    });
                }
            }, {
                label: 'Save and close',
                fn: function () { var that = this; this.submit(function () {
                    that.field('operacja.id_uzytkownik').def(''); //setting default value
                    that.field('operacja.id_s_operacja').def(1); //setting default value
                    that.close();
                  }); }
            }
        ] }
] );

I have managed how to pass data between form instances and it works fine.
The problem is that when someone will click the "Accept" and then he will exit the window by blur() or close() with button (X), when he reopen create window the data are set still to:

var id_uzytkownik = this.val('operacja.id_uzytkownik'); //passing data
var id_s_operacja = this.val('operacja.id_s_operacja'); //passing data

In that case I want them to be back to defaults.
In button "Save and close" I am able to reset them to defaults (and it works) but user can still leave with blur() or close()...

Do I have to create custom button then?
If Yes then does the build-in Create button does something else than create()?

Or maybe there is an other clever method to clear that data back to defaults after close() call?

Iam also thinking about extending somehow the fnClick in dataTabled.editor.js:

    ttButtons.editor_create = $.extend( true, ttButtons.text, ttButtonBase, {
        formButtons: [ {
            label: null,
            fn: function (e) { this.submit(); }
        } ],

        fnClick: function( button, config ) {
            var editor = config.editor;
            var i18nCreate = editor.i18n.create;
            var buttons = config.formButtons;

            if ( ! buttons[0].label ) {
                buttons[0].label = i18nCreate.submit;
            }

            editor.create( {
                title: i18nCreate.title,
                buttons: buttons
            } );
        }
    } );

Is it even possibile without modifying core file it self?

allan

when he reopen create window the data are set still to:

How does he open it again? Click the create button? Can you link to the page showing the issue please?

Allan

milap

Yes by clicking create button again.
I cant easily link the page since I'am developing application on VMWare on my laptop.

Ill try to explain my case again:

1) User clicks Create button -> editor windows opens, fields are in default state.

2) user fills the data, and clicks Accept -> editor is submitting the data and passes 2 (of 3) fields values to next editor instance (without closing the editor window)

Now 2 alternative ways:

3a) If user will fill one empty field and will click "Save and exit" - everything is fine. When he will click Create button again all fields are in default state (since I have function on "Save and exit" button that is manually setting default values)

3b) If user will change his mind and will click blur or close button (X), when he will click Create button again 2 of 3 fields are set to values that was passed in pt. 2)

My problem is how to clear that values so he will get the edit window with default values (after he clicks Create button)

allan

Oh I see! But the issue is that you have set the default value for those fields. So yes, it would use the default value that has been set when next creating a new row.

On line 12 above rather than:

that.field('operacja.id_uzytkownik').def(id_uzytkownik)

could you try:

that.field('operacja.id_uzytkownik').val(id_uzytkownik)

i.e. set the value rather than the default.

Allan

milap

Of course I was trying with val() but for some reason it is not working.

that.field('operacja.id_uzytkownik').val(id_uzytkownik) is not setting the field value after submit&create and for some reason that.field('operacja.id_uzytkownik').def(id_uzytkownik) is...

Buttons code after change (completely not working now - fields in next instance after accept are empty):

    new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor,
                formButtons: [
                    {
                        label: 'Accept',
                        fn: function () { 
                            var that = this;
                            var id_uzytkownik = this.val('operacja.id_uzytkownik');
                            var id_s_operacja = this.val('operacja.id_s_operacja');
                            this.submit(function () {
                                that.create();
                                that.field('operacja.id_uzytkownik').val(id_uzytkownik);
                                that.field('operacja.id_s_operacja').val(id_s_operacja);
                            });
                        }
                    }, {
                        label: 'Save and close',
                        fn: function () { var that = this; this.submit(function () {
                            //that.field('operacja.id_uzytkownik').def('');
                            //that.field('operacja.id_s_operacja').def(1);
                            that.close();
                          }); }
                    }
                    ],
                }
    ] );

With set() is also not working:

that.field('operacja.id_uzytkownik').set(id_uzytkownik);
that.field('operacja.id_s_operacja').set(id_s_operacja);

For some reason only def() works but it cause problem from 1st post...

allan

Using the set method is absolutely the correct way to do this. I'm not sure why it wouldn't work.

Is there any way you can publish the page so I can access and debug it?

Allan

milap

The problem is that I dont have access to any public php/mysql server.
I can of course configure interface bridging in VMWare and set port forwarding on router but still - server is on my laptop that is with me when I am at work (and I'm working at very chaotic days and hours) so it would be hard to coordinate that...

I can extract some part of my solution and send You zip file (incl. sql), but due to my investigation results (read bellow) it is probably pointless...

I have played with my code and I can see that functions set() and val() simply don't work for me... val() is reading field properly but not writing...

var id_uzytkownik = this.val('operacja.id_uzytkownik');
console.log(id_uzytkownik); //console returns proper value.

I have even created a test field:

{
  label: "XX",
  name: "test"
}

Even if I try to set field value directly by string (not var) at the begining of js code nothing happens:

editor.field('test').set('XX'); //don't work
editor.field('test').val('XX'); //don't work
editor.set('test','XX'); //don't work
editor.val('test','XX'); //don't work
        
editor.field('test').def('XX'); //and for some reason - works

I'm using Editor-PHP-1.5.4 package at CentOS 6.7 with php/mysql accessing from Windows 7 with newest versions of Chrome and Firefox

And now the most interesting thing.

I have created new page at my server with extracted from Editor-PHP-1.5.4.zip files only.
The only 2 files that I have modified are:

1) php/config.php (hostname and credentials for database connection)

2) examples/simple/simple.html

In the second file in line 68th I have added one line:

editor.field('first_name').set("MAKING YOU HAPPY");

And when I call simple.html in my browser the "First name" field (which supposed to make me happy) is empty :(

editor.field('first_name').val("MAKING YOU HAPPY"); // don't work either
editor.field('first_name').def("MAKING YOU HAPPY"); // works...

Is this a bug?

Full js code of simple.html (additional code in line 32nd):

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff.php",
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "datetime"
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    } );
        editor.field('first_name').set("MAKING YOU HAPPY");
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "../php/staff.php",
        columns: [
            { data: null, render: function ( data, type, row ) {
                // Combine the first and last names into a single table field
                return data.first_name+' '+data.last_name;
            } },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );

milap

Allan,
I have modified my code a little bit:

    new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor,
                formButtons: [
                    {
                        label: 'Accept',
                        fn: function () { 
                            var that = this;
                            var id_uzytkownik = this.val('operacja.id_uzytkownik');
                            var id_s_operacja = this.val('operacja.id_s_operacja');
                            this.submit(function () {
                                that.create();
                            });
                            this.field('operacja.id_uzytkownik').set('XXXXX');
                            this.field('operacja.id_s_operacja').set(id_s_operacja);
                        }
                    }, {
                        label: 'Save and exit',
                        fn: function () { var that = this; this.submit(function () {
                            //that.field('operacja.id_uzytkownik').def('');
                            //that.field('operacja.id_s_operacja').def(1);
                            that.close();
                          }); }
                    }
                    ],
                }
    ] );

now the part that is setting field value

this.field('operacja.id_uzytkownik').set('XXXXX');
this.field('operacja.id_s_operacja').set(id_s_operacja);

is outside the submit function but still in button function.

Now if I press Accept the 'XXXXX' value shows for about half a second (or less) in field('operacja.id_uzytkownik') and suddenly disappear (field becomes blank)

Do You suspect why it could happen like that?

Maybe it is related somehow with data proces cycle?

allan

Thanks for the updates. Simply inserted the field().set() method into line 32 as you have above won't work since nothing has started editing when that code executes. There is no create, edit or delete action.

If you were to use initCreate then it would make a lot more sense to use field().set():

editor.on( 'initCreate', function () {
  editor.field('first_name').set("MAKING YOU HAPPY");
} );

Then when the create form is shown the field is set.

As I mentioned above, when you start the create or edit forms, the field values are set to the defaults (for create) or to the current values (for edit). It has to be like that. And that will override the value you set, since the create or edit occurs after your field().set() call.

Its all about timing and events. When you do want to set those values - probably when the create or event form is used. The initCreate and initEdit events are there for exactly that.

Regards,
Allan

milap

Thanks for answer Allan

TBH this code behaves very similar to def():

editor.on( 'initCreate', function () {
  editor.field('first_name').set("MAKING YOU HAPPY");
} );

After few days of brake with fresh mind I have found an answer to my problem in no time.
The answer is to remove almost all fn code that is setting/getting values from inputs by buttons and add code below:

        var id_uzytkownik = '';
        var id_s_operacja = '';
        
        editor.on( 'close', function () {
            this.field('operacja.id_uzytkownik').def('');
            this.field('operacja.id_s_operacja').def(1);
        } );
        
        editor.on( 'preSubmit', function () {
            id_uzytkownik = this.val('operacja.id_uzytkownik');
            id_s_operacja = this.val('operacja.id_s_operacja');
        } );
        
        editor.on( 'postCreate', function () {
            this.create();
            this.field('operacja.id_uzytkownik').def(id_uzytkownik);
            this.field('operacja.id_s_operacja').def(id_s_operacja);
        } );

inside (document).ready(function() ... right after editor declaration

Now everything works like a dream!! :)