Answers

• allan Posts: 63,691Questions: 1Answers: 10,500 Site admin

  March 2015

  Is it this example you are referring to, or a different one?

  Thanks,
  Allan
• ANTOINE Posts: 8Questions: 1Answers: 0

  March 2015

  Yes it is this example.
  i have tried to put many checkbox in the same line but without success .

  when i checked one checkbow, all the line is checked.
• allan Posts: 63,691Questions: 1Answers: 10,500 Site admin

  March 2015

  Can you show me the code that you used please? I presume that you have duplicated (and then modified the duplicated code to be unique) for the drawing of the checkboxes and the event handlers?

  Allan
• ANTOINE Posts: 8Questions: 1Answers: 0

  March 2015 edited March 2015

  ahah, yes i'm not amazing in javascript.

  my part of html ( i show only interessant part)

  <th class="bleu">Diel</th>
  <th class="bleu">PCB/PCT</th>
  

  My part of php :

      Field::inst( 'diel' )
           ->setFormatter( function ( $val, $data, $opts ) {
                  return ! $val ? 0 : 1;
              } ),
          Field::inst( 'pcb' )
          ->setFormatter( function ( $val, $data, $opts ) {
                  return ! $val ? 0 : 1;
              } ),
  

  and finaly my part of JS who is wrong :

  (function($){
  
  $(document).ready(function() {
      var editor = new $.fn.dataTable.Editor( {
          "ajax": "php/table.suivi.php",
          "table": "#suivi",
          "fields": [
          
           
               {
                  "label":     "diel:",
                  "name":      "diel",
                  "type":      "checkbox",
                  "separator": "|",
                  "options":   [
                      { "label": '', "value": 1 }
  
                  ]
              },
              {
                  "label": "PCB\/PCT",
                  "name": "pcb", 
                  "type": "checkbox",
                  "separator": "|",
                 "options":   [
                      { "label": '', "value": 1}
                  ]
              }
          ]
          
      } );
  // Activate an inline edit on click of a table cell
      $('#suivi').on( 'click', 'tbody td:not(:first-child)', function (e) {
          editor.inline( this );
      } );
      
      $('#suivi').DataTable( {
          "dom": "Tfrtip",
          "ajax": "php/table.suivi.php",
          "columns": [
          
           { "data": "null", "defaultContent": '', "orderable": false },
           
          
              {
                   
                  data:   "diel",
                  render: function ( data, type, row ) {
                      if ( type === 'display' ) {
                          return '<input type="checkbox" class="editor-active ">';
                      }
                      return data;
                  },
                  className: "dt-body-center"
              
              },
              {
                  "data": "pcb",
                  "render": function ( data, type, row ) {
                      if ( type === 'display' ) {
                          return '<input type="checkbox" class="editor-active ">';
                      }
                      return data;
                  }
          ],
          "tableTools": {
              "sRowSelect": "os",
              "aButtons": [
                  { "sExtends": "editor_create", "editor": editor },
                  { "sExtends": "editor_edit",   "editor": editor },
                  { "sExtends": "editor_remove", "editor": editor }
              ]
              
          },
           rowCallback: function ( row, data ) {
              // Set the checked state of the checkbox in the table
          
          
            $('input.editor-active', row).prop( 'checked', data.diel == 1 );
       $('input.editor-active', data).prop( 'checked', data.pcb == 1 );
              
          }
      } );
      
       $('#suivi').on( 'change', 'input.editor-active', function () {
          editor
              .edit( $(this).closest('tr'), false )
              
            
               .set( 'pcb', $(this).prop( 'checked' ) ? 1 : 0 )
                .set( 'diel', $(this).prop( 'checked' ) ? 1 : 0 )
               
              .submit();
      
      } );
  } );
  
  }(jQuery));
  
  
• allan Posts: 63,691Questions: 1Answers: 10,500 Site admin

  March 2015

  The problem is with the editor-active class. You need a separate class for each field so they can each be addressed individually.

  For example you might have editor-pcb for one of the fields.

  Then in the rowCallback you would have:

  $('input.editor-pcb', data).prop( 'checked', data.pcb == 1 );
  

  And also an event handler for it:

       $('#suivi').on( 'change', 'input.editor-pcb', function () {
          editor
              .edit( $(this).closest('tr'), false )
              .set( 'pcb', $(this).prop( 'checked' ) ? 1 : 0 )  
              .submit();
       } );
  

  Do the same for the diel field (i.e. have its own class).

  Allan
• ANTOINE Posts: 8Questions: 1Answers: 0

  March 2015

  Okay i try to follow u'r advice, yesterday i have tried to modify class for each field, and i have replace row by data, but i have forgotten to modify the event handler.

  I hold you aware of Advanced emon
• ANTOINE Posts: 8Questions: 1Answers: 0

  March 2015

  Great ! its ok ( i have modify u'r code)

  $('input.editor-pcb', data).prop( 'checked', data.pcb == 1 );

  =>

  $('input.editor-pcb', row).prop( 'checked', data.pcb == 1 );

  I'm sory i'm confused whith active class, in my head its just for "enabled the line checkbox"

  Thanks a lot, amazing plugin, amazing support ,and very quickly .
  Have a good day Allan.
• allan Posts: 63,691Questions: 1Answers: 10,500 Site admin

  March 2015

  Good to hear you've got it working now :-)

  Allan
• ANTOINE Posts: 8Questions: 1Answers: 0

  March 2015 edited March 2015

  Hum last question, when i check ( the post data is submit) but when i dechecked just after check , no data submit. i'm obliged to checked in the other line, for that.

  I use Google Chrome for my tests
• ANTOINE Posts: 8Questions: 1Answers: 0

  March 2015

  i have found the problem.

  editor-inline, and editor with checkbox dont run, we cant check/decheck . So i have add

  // Activate an inline edit on click of a table cell
  $('#suivi').on( 'click', 'tbody td:not(:first-child,"editor-diel","editor-pcb","editor-pack1","editor-hydr","editor-gd","editor-tf","editor-tgd") ', function (e) {
  editor.inline( this );
  } );

  and now its perfect.
• allan Posts: 63,691Questions: 1Answers: 10,500 Site admin

  March 2015

  Can you link me to the page you are working on so I can take a look?

  Is an Ajax request made when you uncheck the box?Remember that unchecked === no data for checkboxes.

  Allan
• ANTOINE Posts: 8Questions: 1Answers: 0

  March 2015

  When i check a checkbox , then tried to uncheck, no ajax request transmited .
  I'm obliged for cast the ajax request , to click in other lines, then uncheck after my checkbox .

  When i have desactivate editor-inline , all fine .

  So i have add in the td:not my classe of my cells who contains checkbox.

  I have no links for u . But i can send by mails folders or shelters in the cloud.
• allan Posts: 63,691Questions: 1Answers: 10,500 Site admin

  March 2015

  Yes please, can you reply to my e-mail from earlier today so I can take a look at your very latest code to see what is happening.

  Thanks,
  Allan