field().multiSet() with html5 date field

INTONE

I am having an issue with field().multiSet() and html5 date field. In my dataTables I created html5 date fields like this:

         {
                data: "work.dateTimePlaced",
                "render": function ( data, type, full, meta ) {
                    return '<input type="date" class="form-control" name="dateTimePlaced" id="dateTimePlaced_'+full.work.work_id+'">';
                },
                orderable: false
            }

Then I extended the button plugin to allow one click submit of all selected rows with help from this forum post: https://datatables.net/forums/discussion/36459/customized-control-button-modification#latest. All works well if all the dates are the same. If I have differing dates the form does not get submitted. Here is my extend button code:

     buttons: [
            
            { extend: "edit",   editor: editor6 }
            ,
            {
              extend: "selected",
              text: "Submit Selected Row(s)",
              action: function ( e, dt, node, config ) {
               
                var rows = request_count_table.rows( { selected: true } ).indexes();

                editor6.edit( rows, false );

                $.each( rows, function (i, rowIdx) {
                 
                    var row = request_count_table.row( rowIdx );                        
                    var ir  = row.id().replace('row_','');
                    //these are inline elements in datatables
                    var pri = document.getElementById("priority_"+ir).value;
                    var dat = document.getElementById("dateTimePlaced_"+ir).value;
                    var cri = document.getElementById("criticalityNumber_"+ir).checked?"Yes":"No";
                    var dateFormat = "YYYY-MM-DD";

                    console.log(dat);

                   /* console.log(ir);
                    console.log(pri);
                    console.log(dat);
                    console.log(cri);*/
                    //console.log(moment(dat, dateFormat, true).isValid());
                    

                    if(moment(dat, dateFormat, true).isValid() === false){

                      swal({title:"Error!",  text: "Please select a date!",  type: "error"}); 
                      return false; 
                    }

                    editor6.field( 'work.priority' ).multiSet( row.id(), pri );
                    editor6.field( 'work.dateTimePlaced' ).multiSet( row.id(), dat );
                    editor6.field( 'work.criticalityNumber' ).multiSet( row.id(), cri );

                  
             
                });

                editor6.submit();

                //after submit
                editor6.on( 'submitComplete', function ( e, json,data ) {
                  //console.log(json.error);
                  if(!!json.error){
                    swal({title:"There was an error!",  text: json.error,  type: "error",  html: true});
                  }
                  
                });
                    
              }
            }

           
        ]

When the dates are different I get no error but the form is not submitted. Any thoughts?

ewmanthei

php/lib/Database/Driver/Mysql/Query.php has a line for logging sql statements to a file.

You might find some info by checking what you're actually sending out.

INTONE

Thank you so much for that tip.

allan

It would also be interesting to know if the Ajax request is actually made or not. If it is, what is the data that is being submitted to the server-side? Your browser's network tools will be able to show you that.

Allan

INTONE

From my examination no request is made to the server when different dates are given and no exception is thrown by Javscript. All those console.log() return values which indicate that the code block is actually running but it appears editor6.submit(); is not running. How can I fix this?

allan

Can you give me a link to the page showing the issue so I can debug it please? If that isn't possible and you show me your full Javascript initialisation for DataTabled and Editor.

Thanks,
Allan

INTONE

Hello Allan,

Here goes:

      var editor6;
      var usertype = sessions().select("user_type")[0];
      editor6 = new $.fn.dataTable.Editor({
        ajax: {
                 url: "Editor-PHP-1.5.5/files/work.php",
                 data: {
                    "processWorkRequest": true,
                    "pageName": "request"
                }
        },
        table: "#request_count_table",
        fields: [
                {
                
                  "name":"work.work_id",
                  "type": "hidden"
                },
                {
                    "label": "Date",
                    "name": "work.dateTimePlaced",
                    "type": "datetime",
                    def:       function () { return new Date(); }
                },
                {
                    "label": "Latent Condition",
                    "name": "work.criticalityNumber",
                    "type": "checkbox",
                    "options": [
                        "Yes"
                    ], separator: ','
                },
                {
                    "label": "Priority",
                    "name": "work.priority",
                    "type": "select",
                    "options": 
                    [
                        "1 - High Impact on Production/EHS/Quality/Cost with High Probability of Failure/Incident",
                        "2 - High Impact on Production/EHS/Quality/Cost with Medium to Low Probability of Failure/Incident",
                        "3 - Moderate to Low Impact on Production/EHS/Quality/Cost with High Probability of Failure/Incident",
                        "4 - Moderate to Low Impact on Production/EHS/Quality/Cost with Medium to Low Probability of Failure/Incident"
                    ]
                }
               
            ],
         i18n: {
             edit: {
                 button: "View",
                 title: "<h3>Work Order</h3>"
             }
         }
     });

     request_count_table = $('#request_count_table').DataTable({
        dom: "Bfrtip",
        ajax: {
            url: "Editor-PHP-1.5.5/files/work.php",
            type: "POST",
            data: {
                "workType": "Request"
            }
        },
        //serverSide: true,
        processing: true,
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            {
                data: "work.jobDescription", "className":"cell-job-big"
            }, 
            {
                data: "department.name", 
            },
            {
                data: "work.dateTimePlaced",
                "render": function ( data, type, full, meta ) {
                    return '<input type="date" class="form-control" name="dateTimePlaced" id="dateTimePlaced_'+full.work.work_id+'">';
                },
                orderable: false
            },
            {
                data: "work.priority",
                render: function(data, type, full, meta){
                  return '<select id="priority_'+full.work.work_id+'" class="form-control" name="select" width="100%" style="width: 100%;"> <option value="1 - High Impact on Production/EHS/Quality/Cost with High Probability of Failure/Incident">1 - High Impact on Production/EHS/Quality/Cost with High Probability of Failure/Incident</option> <option value="2 - High Impact on Production/EHS/Quality/Cost with Medium to Low Probability of Failure/Incident">2 - High Impact on Production/EHS/Quality/Cost with Medium to Low Probability of Failure/Incident</option> <option value="3 - Moderate to Low Impact on Production/EHS/Quality/Cost with High Probability of Failure/Incident">3 - Moderate to Low Impact on Production/EHS/Quality/Cost with High Probability of Failure/Incident</option> <option value="4 - Moderate to Low Impact on Production/EHS/Quality/Cost with Medium to Low Probability of Failure/Incident">4 - Moderate to Low Impact on Production/EHS/Quality/Cost with Medium to Low Probability of Failure/Incident</option></select>'
                },
                orderable: false
            },
            {
                data: "work.criticalityNumber",
                render: function(data, type, full, meta){
                  return '<input type="checkbox" class="form-control" name="criticalityNumber" id="criticalityNumber_'+full.work.work_id+'"> Yes';
                } ,
                orderable: false

            },
            {
                data: "work.work_id",
                render:function(data, type, full, meta){
                  return '<button type="button" class="btn btn-primary btn-xs submitRequest" data-id="'+full.work.work_id+'">Submit</button>';
                } ,
                orderable: false
            }


        ],
         select: {
            style:    'os',
            selector: 'td:first-child'
        },
        "order": [[ 2, 'asc' ], [ 0, 'asc' ]],
        lengthChange: false,
        buttons: [
            
            { extend: "edit",   editor: editor6 }
            ,
            {
              extend: "selected",
              text: "Submit Selected Row(s)",
              action: function ( e, dt, node, config ) {
                //var workIDArray = request_count_table.rows( { selected: true } ).ids() ;
                var rows = request_count_table.rows( { selected: true } ).indexes();
                //console.log(rows);
                editor6.edit( rows, false );

                $.each( rows, function (i, rowIdx) {
                 
                    var row = request_count_table.row( rowIdx );                        
                    var ir  = row.id().replace('row_','');
                    var pri = document.getElementById("priority_"+ir).value;
                    var dat = document.getElementById("dateTimePlaced_"+ir).value;
                    var cri = document.getElementById("criticalityNumber_"+ir).checked?"Yes":"No";
                    var dateFormat = "YYYY-MM-DD";
                   
                   /*
                    console.log(ir);
                    console.log(pri);
                    console.log(dat);
                    console.log(cri);
                    */
                    //console.log(moment(dat, dateFormat, true).isValid());
                    

                    if(moment(dat, dateFormat, true).isValid() === false){
                     
                      swal({title:"Error!",  text: "Please select a date!",  type: "error"}); 
                      return false; 
                    }

                    editor6.field( 'work.priority' ).multiSet( row.id(), pri );
                    editor6.field( 'work.dateTimePlaced' ).multiSet( row.id(), dat );
                    editor6.field( 'work.criticalityNumber' ).multiSet( row.id(), cri );

                    //console.log(editor6)
                   
             
                });
                
                editor6.submit();

                //after submit
                editor6.on( 'submitComplete', function ( e, json,data ) {
                  //console.log(json.error);
                  if(!!json.error){
                    swal({title:"There was an error!",  text: json.error,  type: "error",  html: true});
                  }
                  
                });

                /*editor6.on( 'postEdit', function ( e, json, data ) {
                   request_count_table.ajax.reload( null, false );
                });*/
                    
              }
            }

           
        ]
       ,
        drawCallback: function(settings) {
            var api  = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last = null;
          // console.log(rows);
            api.column(2, {page:'current'} ).data().each( function ( group, i ) {
                //console.log(group);
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td colspan="6">'+group+'</td></tr>'
                    );

                    last = group;
                }
            });
        },
        columnDefs: 
        [
          { "visible": false, "targets": 2 }
        ]
    });

allan

The problem might be row.id(). Could you try: row.id(false) please?

Also, at lines 128 and 161 in the above could you add:

console.log( JSON.stringify( editor6.multiGet() ) );

please and let me know what the output is.

Thanks,
Allan

INTONE

Hi Allan,

I have tried what you said and this is what was returned. The first block is from line 128 console log and the second block is from line 161 console log.

{
    "work.work_id": {
        "row_91": "91",
        "row_92": "92"
    },
    "work.dateTimePlaced": {
        "row_91": "",
        "row_92": ""
    },
    "work.criticalityNumber": {
        "row_91": "",
        "row_92": ""
    },
    "work.priority": {
        "row_91": "1 - High Impact on Production/EHS/Quality/Cost with High Probability of Failure/Incident",
        "row_92": "1 - High Impact on Production/EHS/Quality/Cost with High Probability of Failure/Incident"
    }
}



{
    "work.work_id": {
        "row_91": "91",
        "row_92": "92"
    },
    "work.dateTimePlaced": {
        "row_91": "2016-08-09",
        "row_92": "2016-08-10"
    },
    "work.criticalityNumber": {
        "row_91": "",
        "row_92": ""
    },
    "work.priority": {
        "row_91": "1 - High Impact on Production/EHS/Quality/Cost with High Probability of Failure/Incident",
        "row_92": "1 - High Impact on Production/EHS/Quality/Cost with High Probability of Failure/Incident"
    }
}

The form did not submit at first and showed no error when the dates are different but when they are the same it is submitted as previously reported. After further investigation of my code I got it to work . Thank you so much for your help.

allan

Did you try the row.id(false)? Without that id() will return the id with a # prefix causing the id to be incorrect relative to what Editor is seeing (row_91 for example).

The form did not submit at first and showed no error

Very weird. So it gets as far as executing the submit() call, but there is no error and no Ajax request?

I really think I'm going to need to be able to view the page so I can debug and trace the code through to see why that is happening.

Allan