How to populate bubble editor form with grid data?

RSerfling

I am having an issue with getting the bubble editor form to populate with row data. I see in the example that the fields current value is presented in the form. I seem to have everything configured the same as the example but the form is blank for each field. Any ideas?

allan

Are you able to give me a link to the page showing the issue so I can take a look and debug it please? If that isn't possible can you show your Javascript initialisation for the DataTable, Editor and a sample of the data being loaded please.

Allan

RSerfling

Here is what I got.

$('#head').DataTable({
  dom: "Bfrtip",
  data: [{
    "Code": "H",
    "CompanyId": "Fake1",
    "Edi810HedId": 26,
    "InvoiceDate": "\/Date(1460782800000)\/",
    "InvoiceNum": "900005",
    "InvoiceTotal": 49.00,
    "Matched": false,
    "MisMatchedReason": "Not Found 1",
    "Notes": "Test Note 1",
    "PackSlip": "3",
    "PoNum": 23,
    "ShippedDate": "\/Date(1457244000000)\/",
    "SupplierNum": 1
  }, {
    "Code": "H",
    "CompanyId": "Fake2",
    "Edi810HedId": 27,
    "InvoiceDate": "\/Date(1460782800000)\/",
    "InvoiceNum": "900006",
    "InvoiceTotal": 50.00,
    "Matched": false,
    "MisMatchedReason": "Not Found 2",
    "Notes": "Test Note 2",
    "PackSlip": "25-1",
    "PoNum": 25,
    "ShippedDate": "\/Date(1457244000000)\/",
    "SupplierNum": 2
  }],
  columns: [{
    data: "Edi810HedId",
    visible: false
  }, {
    data: "SupplierNum"
  }, {
    data: "PoNum"
  }, {
    data: "InvoiceNum"
  }, {
    data: "InvoiceDate",
  }, {
    data: "InvoiceTotal"
  }, {
    data: "PackSlip"
  }, {
    data: "ShippedDate",
  }, {
    data: "Matched",
    visible: false
  }, {
    data: "MisMatchedReason"
  }, {
    data: "Notes"
  }]
});

var editor = new $.fn.dataTable.Editor({
  ajax: {
    "url": '',
    "type": "POST"
  },
  table: "#head",
  idSrc: 'Edi810HedId',
  fields: [{
    label: "PO:",
    name: "ponum"
  }, {
    label: "Pack Slip:",
    name: "packslip"
  }, {
    label: "Notes:",
    name: "notes"
  }, {
    label: "Match (Invoice manually created):",
    name: "matched",
    type: "checkbox",
    separator: "|",
    options: [{
      label: '',
      value: 1
    }]
  }]
});

$('#head').on('dblclick', 'tbody td', function(e) {
  editor.bubble(this, ['ponum', 'packslip', 'notes', 'matched'], {
    title: 'Edit',
    submit: 'all'
  });
});

allan

Javascript is case sensitive, so:

data: "PoNum"

and:

name: "ponum"

do not refer to the same property. Without a sample of the data I can't say which one it should be, but they should be consistent.

Allan

RSerfling

ugh...silly mistake. Thanks for looking at it for me!