Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

x-editable (jQuery UI build) throws Uncaught TypeError

Consider the following code:

Inside jQuery document.ready:

$.fn.editable.defaults.mode = 'popup';
$("#username").editable({
        send: 'never',
       success: function(response, newValue) {
        userModel.set('username', newValue); //update backbone model
       }
});

HTML:

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

This throws Uncaught TypeError: this.tip(...).find is not a function at jqueryui-editable.js:4727.

I assume this is because of incompatibilities with the jQuery UI version. But how can I get around it?

Update: Adding full example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
  <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jqueryui-editable/js/jqueryui-editable.min.js"></script>
  <script>
    $(function() {
        $.fn.editable.defaults.mode = 'popup';
        $("#username").editable({
            send: 'never',
           success: function(response, newValue) {
            userModel.set('username', newValue); //update backbone model
        }
        });
      });
  </script>
</head>
<body>
    <div class="editable">
        <a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>
    </div>
</body>
</html>
like image 604
user3262713 Avatar asked Dec 09 '25 17:12

user3262713


1 Answers

I had the same error, but solved it by using an older version of jquery-ui. I was on v 1.12.0, but noticed the editable demo used 1.10.1. Using the 1.10.1 version of jquery-ui allowed me to use editable.

I'm using

https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/smoothness/jquery-ui.css

and

https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js

like image 184
Kyrre Avatar answered Dec 12 '25 06:12

Kyrre



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!