Error when using x-editable with BS3

Question

I want to make a simple use of the plugin x-editable, following step by step what's to do in the official doc.

It actualy worked fine when I was on Bootstrap 2, though, it doesn't work anymore on BS3 (even if I updated everything to the latest version etc.).

So when I click on the link to trigger the editable popover, I got this error in firebug :

TypeError: this.$element.data(...) is undefined
[...]/Bootstrap3/js/bootstrap-editable.js
Line 154

Which is actually this line :

this.$element.data('popover').tip().addClass('editable-popover');

Btw, I'm using CakePHP, all the plugins (js and CSS) are declared etc...

So I'm running out of idea, if someone knows about it, would be cool !

Thanks !

EDIT : Problem solved, just had to reload the cache... Old script was still in it so there was compatibility problems.

Answer 1

Did you download the latest Bootstrap 3 ready version from: http://vitalets.github.io/x-editable/assets/zip/bootstrap3-editable-1.5.0.zip

I didn't find any problem following the steps from http://vitalets.github.io/x-editable/docs.html. See: http://jsfiddle.net/xaRbU/

Note the examples use jquery-2.0.3 (the fiddle above works with 1.9.1). Since jQuery 2 doesn't support IE8 Bootstrap requires the newest 1.x version of jQuery, see also: Updating Bootstrap to version 3 - what do I have to do?

Code used:

html:

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

javascript:

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

});

css:

/* create some space cause the popup shows on the top of the element */
body{padding-top:100px;}