Update the last row and create a new row by clicking on the button.

Hordovenko

Hello.
I have a task to update the last row and create a new row by clicking on the button.
The last row update works well, and when creating a new row, the form is given without the assigned values.
I give a part of the code with comments, I hope it will be enough.
I hope for help, thank you.

    //...
 var table = $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url: "http://localhost/DataTables/staff.php?nick=" + nick + "&start=" + start,
            type: 'POST'
            },          
        // serverSide: true,    
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "table1.telecast_date" },
            { data: "table1.telecast_time" },           
            { data: "table1_telecast_type.type", editField: "table1.telecast_type" },           
            { data: "table1.telecast_name" },
            { data: "table1_telecast_genre.genre", editField: "table1.telecast_genre" },
            { data: "table1_telecast_lang.lang", editField: "table1.telecast_lang" },
            { data: "table1_telecast_tak_ni.tak_ni", editField: "table1.telecast_owner" },
            { data: "table1_telecast_tak_ni_ua.tak_ni",editField: "table1.telecast_ua" },
            { data: "table1.telecast_note" },
            { data: "table1.telecast_timing" },
            { data: "table1.nick" },
            { data: "table1.start" }        
        ],      
        keys: {
            columns: ':not(:first-child)',
            editor:  editor
            //,keys: [32]
        },
        select: {
            style:    'os',
            selector: 'td:first-child',
            blurable: true
        },
        buttons: [
            {   text: '<u>M</u>y button', 
                action: function ( e, dt, node, config ) {

                function timestrToSec(timestr) {
                  var parts = timestr.split(":");
                  return (parts[0] * 3600) +
                         (parts[1] * 60) +
                         (+parts[2]);
                }

                function pad(num) {
                  if(num < 10) {
                    return "0" + num;
                  } else {
                    return "" + num;
                  }
                }

                function formatTime(seconds) {
                  return [pad(Math.floor(seconds/3600)),
                          pad(Math.floor(seconds/60)%60),
                          pad(seconds%60),
                          ].join(":");
                }           
                
                var last_row = table.row( ':last', { order: 'applied' } ).data();
                
                editor  // It work
                    .bubble( ':last', { order: 'applied' })
                    .set( 'table1.telecast_timing', '00:01:30' )
                    .submit()

                
                editor  // It d'ónt work. Only show form  without assigned values (using .set)          
                    .create( true )
                    .set( 'table1.telecast_date', last_row.table1.telecast_date )
                    .set( 'table1.telecast_time', formatTime(timestrToSec(last_row.table1.telecast_time) + timestrToSec(last_row.table1.telecast_timing))) 
                    .set( 'table1.telecast_name', '' )                      
                    .set( 'table1.telecast_note', '')
                    .set( 'table1.telecast_timing', '00:00:00' )    
                    .set( 'table1.nick', nick )
                    .set( 'table1.start', start )
                    .submit()
                    
                    
                console.log('last_row= ', last_row); // all values are assigned 
                
                
                
                //...

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Hi @Hordovenko ,

It works here for me, with a few tweaks for the different field names. I suspect the issue is because of the field names in your code too. Are there any console errors? Could you link to your page, or if not, could you post your Editor initialisation, please.

Cheers,

Colin

Hordovenko

Hi @colin
Thank you for answer.
There are no any console errors.
Unfortunately, I can not give access to my page, but I can post the code.

Editor initialisation:

editor = new $.fn.dataTable.Editor( {
        ajax: "http://localhost/DataTables/staff.php?nick=" + nick + "&start=" + start,
        table: "#example",
        fields: [ {
                label: "telecast_date",
                name: "table1.telecast_date"
            }, {
                label: "telecast_time",
                name: "table1.telecast_time"
            }, {
                label: "telecast_type",
                name: "table1.telecast_type",
                type: "select"              
            },{
                label: "telecast_name",
                name: "table1.telecast_name",
                type: "autoComplete",
                opts:   {
                            "source": function( request, response ) {
                              $.getJSON("autocompletefaults", {
                                term: extractLast(request.term)
                            }, response);
                            }
                        }
       
            },{
                label: "telecast_genre",
                name: "table1.telecast_genre",
                type: "select"  
            },{
                label: "telecast_lang",
                name: "table1.telecast_lang",
                type: "select"  
            },{
                label: "telecast_owner",
                name: "table1.telecast_owner",
                type: "select"
            },{
                label: "telecast_ua",
                name: "table1.telecast_ua",
                type: "select"
            },{
                label: "telecast_note",
                name: "table1.telecast_note"
            },{
                label: "telecast_timing",
                name: "table1.telecast_timing"
            },{
                label: "telecast_nick",
                name: "table1.nick"
            },{
                label: "telecast_start",
                name: "table1.start"
            }
        ]
    } );

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Hordovenko

I also noticed that both editor (editor.bubble... and editor.create) work separately well.
If you comment on the first, then the second is working well and vice versa.

colin

Hi @Hordovenko ,

I was able to reproduce that - it seems to be a timing issue when using Ajax, the test case before was local editing where no ajax request is made during the submit. I've raised it internally (DD-978 for my reference) and we'll report back here when there's an update.

As a workaround, it seems (for me at least) that putting a slight timeout around the second submit does the trick, something like this:

setTimeout( function () {        
               editor  // It d'ónt work. Only show form  without assigned values (using .set)         
                   .create( true )
                   .set( 'table1.telecast_date', last_row.table1.telecast_date )
                   .set( 'table1.telecast_time', formatTime(timestrToSec(last_row.table1.telecast_time) + timestrToSec(last_row.table1.telecast_timing)))
                   .set( 'table1.telecast_name', '' )                     
                   .set( 'table1.telecast_note', '')
                   .set( 'table1.telecast_timing', '00:00:00' )   
                   .set( 'table1.nick', nick )
                   .set( 'table1.start', start )
                   .submit()
}, 100 );

Would you be able to give that a try, please.

Cheers,

Colin

allan

          editor // It work
            .bubble(':last', {
              order: 'applied'
            })
            .set('position', new Date())
            .submit()


          editor // It d'ónt work. Only show form  without assigned values (using .set)         
            .create(true)
            .set('name', 'ZZZZ')
            .set('position', 'XXX')
            .submit()

This won't work with Editor (when Ajax is enabled - unless you make it synchronous, which might be an option) as it can't currently handle two different edit actions (i.e. create / edit / delete). What you'd need to do is either:

1. Use two different instances of Editor, or
2. Wait for submitComplete from the first action before performing the second.

The setTimeout will work, but if you have an Ajax request that takes more than 100mS (or whatever you set it to be) its going to fail (and probably fairly unpredictably).

Allan

colin

Yep, good point.

@Hordovenko , the code would look like this:

editor.one('submitComplete', function() {
  editor // It d'ónt work. Only show form  without assigned values (using .set)        
    .create(true)
    .set('table1.telecast_date', last_row.table1.telecast_date)
    .set('table1.telecast_time', formatTime(timestrToSec(last_row.table1.telecast_time) + timestrToSec(last_row.table1.telecast_timing)))
    .set('table1.telecast_name', '')
    .set('table1.telecast_note', '')
    .set('table1.telecast_timing', '00:00:00')
    .set('table1.nick', nick)
    .set('table1.start', start)
    .submit()
});

editor // It work
  .bubble(':last', {
    order: 'applied'
  })
  .set('table1.telecast_timing', '00:01:30')
  .submit()

Cheers,

Colin

Hordovenko

Hi @allan, @colin
thanks for the help

1. I tried to use the function setTimeout with time=1000 but it did not work
2. Two different instances of Editor - I also thought about it. It works.
3. Wait for submitComplete from the first action before performing the second - I will try this. I will write about the result.

Hordovenko

Hi @allan, @colin

It work very well (point 3.).
This is the most elegant solution.
Thank you very much for the help!

colin

Excellent, glad to hear it's working.