x-editable with Bootstrap 4 table and jquery

Question

I'm trying to implement xeditable ([xeditable1) with a Bootstrap 4 table. I am trying to emulate this snippet (https://bbbootstrap.com/snippets/edit-forms-inline-using-x-editable-editor-11973728) with no luck. Here is what I have in my index.php file:

 <th data-field="macAddr_id" data-sortable="true" data-filter-control="input" data-editable="true">Mac Address</th> 

........................

<?php
   while($row = $result->fetch_assoc()) {  ?>
   <tr>
     <td> <a href="#" id="macAddr" data-type="text" data-pk="1" class="editable editable-click editable-empty" data-abc="true"><?php echo $row["macAddr_id"]; ?></a> </div>
   </tr>

The table is displayed fine. In my index.js (which I include in my index.php file),I have:

$('#macAddr').editable({
    mode: 'inline',
    type: 'text',
    name: 'macAddr',
    pk: 1
});

But editing does not work. When I single-click or double-click, I get nothing.

I have tried multiple versions of x-editable, including:

https://github.com/Talv/x-editable

https://vitalets.github.io/x-editable/index.html (jquery version)

Neither works. Is there something I am missing? Or a better plugin to use?

Answer 1

As your a tags is inside while loop so same id will get assign to each a tag . Instead change that to class="macAddr" . Then , use each loop to iterate and initialize editable plugin to each a tags with class="macAddr" .

Demo Code :

$(function() {
  $('#table').bootstrapTable()
  $.fn.editable.defaults.mode = 'inline';
  $.fn.editableform.buttons =
    '<button type="submit" class="btn btn-primary btn-sm editable-submit">' +
    '<i class="fa fa-fw fa-check"></i>' +
    '</button>' +
    '<button type="button" class="btn btn-warning btn-sm editable-cancel">' +
    '<i class="fa fa-fw fa-times"></i>' +
    '</button>';
  //loop through each a tags
  $(".macAddr").each(function() {
    //intialize..
    $(this).editable({
      mode: 'inline',
      type: 'text',
    });
  })
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

<table id="table">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="macAddr_id" data-sortable="true" data-filter-control="input" data-editable="true">Mac Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <!--change to class-->
      <td> <a href="#" data-type="text" data-pk="1" class="editable editable-click editable-empty macAddr" data-abc="true">xyz</a></td>
    </tr>
    <tr>
      <td>2</td>
      <td> <a href="#"  data-type="text" data-pk="1" class="editable editable-click editable-empty macAddr" data-abc="true">abc</a></td>
    </tr>
  </tbody>
</table>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>