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?

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();
});

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

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();
});