Question

我正在尝试训练一个Bootstrap3和X-editable的HelloWorld示例。我在这篇文章中附上了我的页面源代码。我面临两个问题。

当我点击可编辑链接时，我将模式用作“弹出窗口”时出现以下错误。 TypeError：this.getCalculatedOffset不是函数
如果我从弹出窗口切换到内联，至少会显示页面，但按钮显示不正确。

enter image description here

任何反馈都将不胜感激。页面来源如下： -

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>X-Editable Bootstrap Hello World!</title>
      <link rel="stylesheet" href="twitter-bootstrap/css/bootstrap.css" type="text/css"/>
      <link href="bootstrap-editable/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet">
   </head>
   <body>
      <div class="container">
         <h1><a href="#">Hello World Bootstrap</a></h1>         
         <div class="hero-unit">
            <p>Hey.. this is my very first XEdit-able Bootstrap site.</p>
            <!-- <a href="#" id="username" data-type="text" data-placement="right" data-title="Enter username">superuser</a> -->
            <a href="#" id="username">superuser</a>
         </div>
      </div>

      <script src="http://code.jquery.com/jquery-2.0.3.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script src="twitter-bootstrap/js/bootstrap.js"></script>  
      <script src="bootstrap-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>     

        <script type="text/javascript">

            $.fn.editable.defaults.mode = 'inline';

            $(document).ready( function(){

                //$('#username').editable();

                $('#username').editable( {
                    type: 'text',
                    pk: 1,
                    url: '/post',
                    title: 'Enter username'
                });

            } );

        </script>
   </body>
</html>

Answer 1

您的bootstrap css和js文件必须来自2.xx版本的bootstrap，这是一个问题。使用x-editable for bootstrap 2或将引导程序更新为版本3 +。

Answer 2

从Bootstrap 2升级到Bootstrap 3后，我遇到了同样的问题。我升级了Bootstrap的CSS，X-Editable的CSS和JS，但忘了升级Bootstrap的JS，这仍然是v2。

不要忘记更新所有文件：

Bootstrap 3 <groupId>:<artifactId>和.css
X-Editable for Bootstrap 3 .js和.css

可能有点晚了，但希望这仍然可以帮助别人。

X-editable helloworld

2 个答案: