Answers

• rf1234 Posts: 2,956Questions: 87Answers: 416

  March 2017

  Consider this:
  1. JS - with Ajax you pass the id of the selected row of the parent table on to the PHP Editor instance of the child table:

  var childEditor = new $.fn.dataTable.Editor( {
          ajax: {
              url: 'actions.php?action=tblChild',
              data: function ( d ) {
                  var selected = parentTable.row( {selected: true} ); 
                  if (selected.any()) {
                      d.id = selected.data().id;
                  }
              }
          },
  

  1. PHP - set value of parent_id in child table with ->set and ->setValue

  if ( ! isset($_POST['id']) || ! is_numeric($_POST['id']) ) {
          echo json_encode( [ "data" => [] ] );
      } else {
          Editor::inst( $db, 'child' )
          ->field(
              Field::inst( 'child.parent_id' )->set(Field::SET_CREATE)
                                      ->setValue( $_POST['id'] )
              
          )
          ->process($_POST)
          ->json();
      }
  
• allan Posts: 63,350Questions: 1Answers: 10,443 Site admin

  March 2017

  Is it this you are using? Parent / child with Editor?

  The parent id should be set by the call to field().def() for new records.

  Allan
• rf1234 Posts: 2,956Questions: 87Answers: 416

  March 2017

  Why wouldn't you recommend my way of doing it on the server side? Under normal circumstances you don't really want to see the artificial auto-increment id of a parent row on the screen anyway ...
• allan Posts: 63,350Questions: 1Answers: 10,443 Site admin

  March 2017

  I was keeping it as part of the Editor form submit as it means its easy to change the value (either on create or edit).

  Doing it server-side with the extra parameter as you have is perfectly valid as well. A little extra code on the server-side, rather than a little extra on the client .

  Allan
• cypressit Posts: 4Questions: 1Answers: 0

  March 2017 edited March 2017

  I had tried that I thought. When the new form opens, I have to manually populate the invoice_id. Here is my code:

  <script>
      var editor; // use a global for the submit and return data rendering in the examples
      var detailsEditor;
      var invoiceTable;
      var detailsTable;
      $(document).ready(function() {
  
  
  
  
          editor = new $.fn.dataTable.Editor( {
              "ajax": "invoice/invoiceData",
              "table": "#invoices",
              "fields": [ {
                      "label": "Number:",
                      "name": "number"
                  }, {
                      "label": "Customer Id:",
                      "name": "customer_id"
                  }, {
                      "label": "Date:",
                      "name": "date",
                      "type": "datetime"
                  }, {
                      "label": "Status:",
                      "name": "status"
                  }
              ]
          } );
  
         invoiceTable =  $('#invoices').DataTable( {
              dom: "Bfrtip",
              ajax: {
                  url: "<?php echo base_url();?>invoice/invoiceData",
                  type: "POST"
              },
              serverSide: true,
              columns: [
                  { data: "id" },
                  { data: "number" },
                  { data: "customer_id" },
                  { data: "date" },
                  { data: "status"}
              ],
              select: {   style: 'single' },
              buttons: [
                  { extend: "create", editor: editor },
                  { extend: "edit",   editor: editor },
                  { extend: "remove", editor: editor }
              ]
          } );
  
  
          detailsEditor = new $.fn.dataTable.Editor( {
              "ajax": {
                  url: "<?php echo base_url();?>invoice/invoiceDetailsData",
                  data: function ( d ) {
                      var selected = invoiceTable.row( { selected: true } );
                      if ( selected.any() ) {
                          d.invoice_id = selected.data().id;
                      }
                  }
              },
              "table": '#invoiceDetails',
              "fields": [
                  {
                  "label": "Invoice Id:",
                  "name": "invoice_id"
              }, {
                  "label": "Item:",
                  "name": "item"
              }, {
                  "label": "Description:",
                  "name": "description"
  
              }, {
                  "label": "Rate:",
                  "name": "rate"
              }, {
                  "label": "Quantity:",
                  "name": "quantity"
              }, {
                  "label": "Amount:",
                  "name": "amount"
              }
              ]
  
          } );
  
         detailsTable =  $('#invoiceDetails').DataTable( {
              dom: 'Bfrtip',
              ajax: {
                  url: "<?php echo base_url();?>invoice/invoiceDetailsData",
                  type: 'post',
                  data: function ( d ) {
  
  
                      var selected = invoiceTable.row( { selected: true } );
  
                      if ( selected.any() ) {
                          //detailsEditor.field( 'invoice_is').def( selected.data().id );
                          d.invoice_id = selected.data().id;
                      }
                  }
              },
              columns: [
                  { data: 'id' },
                  { data: 'invoice_id' },
                  { data: 'item' },
                  { data: 'description' },
                  { data: 'rate' },
                  { data: 'quantity' },
                  { data: 'amount' }
              ],
  
              select: true,
  
              buttons: [
                  { extend: 'create', editor: detailsEditor },
                  { extend: 'edit',   editor: detailsEditor },
                  { extend: 'remove', editor: detailsEditor }
              ]
          } );
  
          invoiceTable.on( 'select', function () {
              $('#childDiv').show();
              detailsTable.ajax.reload();
              detailsEditor.field( 'invoiceDetails.invoice_id' );
          } );
          
          invoiceTable.on( 'deselect', function () {
              $('#childDiv').hide();
              detailsTable.ajax.reload();
          } );
      } );
  
  </script>
  
• cypressit Posts: 4Questions: 1Answers: 0

  March 2017

  Wow, this is the first time I tried to post code. How do I format it so you can read it?
• rf1234 Posts: 2,956Questions: 87Answers: 416

  March 2017 edited March 2017 Answer ✓

  Use Markdown, see below. Triple back ticks to highlight code.
• rf1234 Posts: 2,956Questions: 87Answers: 416

  March 2017

  You can also drop the invoice id from the form of the child table and set it on the server side as per my example above. If it is not in the child table form you cannot be asked to enter it Allan confirmed that both ways (client or server side) are acceptable.
• allan Posts: 63,350Questions: 1Answers: 10,443 Site admin

  March 2017

  I've edited the post to use Markdown to make the code readable.

  I don't see any code in the above that will set the default for the invoice_id.

  This is the part of the blog post that is relevant for that.

  Allan
• cypressit Posts: 4Questions: 1Answers: 0

  March 2017

  Thanks! That one line change made all the difference!