x-editable in bootstrap 4?

Question

I am currently exploring Bootstrap 4.

In Bootstrap 3, I had implemented inline editing using x-editable.

But for Bootstrap 4, I couldn't find how to implement inline editing.

Any suggestions?

Heptane

I'm having the same issue. I get an error when trying to use it with it: bootstrap editible null not found. Have you included corresponding js file? – Tragus

Ah actually, I got it kinda working - but the toottip is broken (weird styling). The issue I had was not including tether.min.js. It still doesn't fix the overall issue though – Tragus

I haven't tried it, but one alternative could be jinplace.org (I'm not affiliated with it in any way) – Sollie

Answer 1

Works for me with this trick:

$.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit"><i class="fa fa-fw fa-check"></i></button>' + '<button type="button" class="btn editable-cancel"><i class="fa fa-fw fa-remove"></i></button>' ;
	

Guidotti

Welcome to Stack Overflow! While this piece of code may answer the question, it is better to include a description of what the problem was, and how your code will tackle the given problem. For the future, here is some information, how to crack a awesome answer on Stack Overflow. – Patchwork

Answer 2

Editable field in bootstrap 4

I am using this .contenteditable function for making table editable or non-editable.

<tr>
  <td class="pt-3-half" contenteditable="false">Example</td>
  <td class="pt-3-half" contenteditable="false">Example</td>
  <td class="pt-3-half" contenteditable="false">Example</td>
  <td class="pt-3-half" contenteditable="true">Example</td>
  <td class="pt-3-half" contenteditable="true">Example</td>
  <td>
    <span class="table-remove"><button type="button" class="btn btn-danger">Remove</button></span>
  </td>
</tr>

And For make form editable or non-editable i am using .readyonly function inside the input field.

<tr>
  <td class="pt-3-half"><input type="text" class="text-center" value="hello1" autocomplete="none" readonly></td>
  <td class="pt-3-half"><input type="text" class="text-center" value="hello2" autocomplete="none" readonly></td>
  <td class="pt-3-half"><input type="text" class="text-center" value="hello3" autocomplete="none" readonly></td>
  <td class="pt-3-half"><input type="text" class="text-center" value="hello4" autocomplete="none"></td>
  <td class="pt-3-half"><input type="text" class="text-center" value="hello5" autocomplete="none"></td>
</tr>

Palmate