Bootstrap-table editable extension and x-editable writeback JSON

Question

This is the project that I use (Bootstrap-table)
http://bootstrap-table.wenzhixin.net.cn/documentation/

I use a Table with those options:

  data-toggle="table"
  data-url="api/api.php/"
  data-side-pagination="client"
  data-query-params="queryParams"
  data-response-handler="responseHandler"
  data-pagination="true"
  data-page-list="[10, 25, 50, 100, ALL]"
  data-page-size="20"
  data-sort-name="nr"
  data-sort-order="desc"
  data-striped="true"
  data-show-refresh="true"
  data-show-columns="true"
  data-height="720"
  data-detail-view="true"
  data-detail-formatter="detailFormatter"
  data-sortable="true"
  data-search="true"
  data-show-export="true"
  data-export-types="['excel']"

Everything works well. It receives the data for Display the Table from my API in JSON.

Now to the Problem:
I want to add some editable fields. I included these stuff like I saw in an example:

[example]
http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/editable.html
 
[included stuff] 
JS:
bootstrap-table/extensions/editable/bootstrap-table-editable.js
http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js
CSS:
http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css<br>

I added for testing a "data-editable="true" Attribute to one of my fields on the table. The result is that it optically change the field, but it does not writeback to my API. It's only display the change on the browser and if I refresh the page the changes are gone.

Do you think that I will need to use jquery? Do I need define a PK anywhere on the Table or Tableoptions to get it work properly? Could someone give me an example how can I writeback(POST) to an API (URL) and format the JSON which should post to the API please?

Thank you all very much!

Answer 1

jQUERY has to be loadet on the header not in the footer :/ then it works:

My Test Function which works now:

$('#table').on('editable-save.bs.table', function(e, field, row, oldValue, $el){
    console.log(row);
    // write an ajax call to post back the values to your database
})