How to use bootstraps x-editable in table rows?

Question

I would like to use the bootstraps X-editable plugin. I retrieve server side data in my table and I would like to edit them in-line. As I see, X-editable is proposed to work with id's. Would be possible to handle this with multiple data?

The documentation:

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>

$(document).ready(function() {
    $('#username').editable();
});

What about if I have more usernames?

Drusy

You don't need to use an element's id to initialize x-editable. Just set class="username" in your a tags and then use $('.username').editable(); – Steersman

you are right I made a test jsfiddle.net/lgtsfiddler/FgqH6/1 – Drusy

Answer 1

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>

change to

<a href="#" class="username">superuser</a>

And

$(document).ready(function() {
    $('#username').editable();
});

Change to

$(document).ready(function() {
    $('.username').editable();
});

Yvonneyvonner

Thank you. You should use this feature also in Laravel applications – Plutus

Answer 2

if you have more usernames would be better change that names. You can set editable any element that you want. Just make a selector to do that. You can do it with data-* attributes..

Greatings, Hugo Pedrosa

Crust

Answer 3

Use id for <table>:

<table id="user" class="table table-striped">
<tr><td>
<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>
</td></tr>
</table>

$(document).ready(function() {
    $('#user a').editable();
});

Painter

This does not work, the anchor link needs to be unique, so class must be used instead of id when calling editable(); – Confute