CODEWITHSUNDEEP
twitter-bootstrapdatatablesx-editable
Yuri
Yuri

Reputation: 3284

X-Editable issue with DataTables

I have an Ajax loaded Datatable and I would like to use x-editable on its cells. I have already tried the simple way, exatcly like in the example:

$('a.editable').editable({
    type: 'text',
    pk: 1,
    name: 'nome',
    url: 'post.php',
    title: 'Edit name'
});:

on a basic link inside <td> like:

<a href='#' class='editable'>Name</a>

but it doesn't work. The only way I found to make it work is:

$(document.body).on('click', 'a.editable', function(e){
    $(this).editable('toggle');
});

with html:

<a href="javascript:;" class="" data-pk="id1" data-name="nome" data-type="text" data-url="post.php" data-title="Edit name">Name</a>

Now it works, but only the first time, then it get the dashed border-bottom and it is no more clickable/editable.

Is there a way to bind events on element inside DataTables cell?

Upvotes: 1

Views: 1906

Answers (1)

Yuri
Yuri

Reputation: 3284

I finally solved my problem. Reading carefullly the documentation:

How to toggle editable. Can be click|dblclick|mouseenter|manual.
When set to manual you should manually call show/hide methods of editable.
Note: if you call show or toggle inside click handler of some DOM element, you need to apply e.stopPropagation() because containers are being closed on any click on document.

Example:

$('.editable').click(function(e) {
    e.stopPropagation();
    $(this).editable('toggle');
});

But this wasn't enough to fix my problem, I also had to change from using 'toggle' to 'show', but still I can't understand why it is better than the other option. I noticed that with 'toggle' the second click quicly adds and removes the editable popover, but why? If anybody has any idea..

Upvotes: 3

Related Questions