X-редактируемый привет мир

Я пытаюсь отработать пример HelloWorld для Bootstrap3 и X-editable. Я прикрепляю исходный код своей страницы в этом посте. Я столкнулся с двумя проблемами.

  1. Я получаю следующую ошибку, когда использую режим «всплывающее окно», как только я нажимаю редактируемую ссылку. TypeError: this.getCalculatedOffset не является функцией

  2. Если я переключаюсь с всплывающего на встроенный, по крайней мере, страница появляется, однако кнопки отображаются неправильно.

введите здесь описание изображения

Любая обратная связь будет оценена. Источник страницы ниже: -

<!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>

twitter-bootstrap-3 x-editable
person noi.m    schedule 03.06.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Ваши файлы bootstrap css и js должны быть из версии bootstrap 2.xx, это проблема. Используйте x-editable для bootstrap 2 или обновите загрузчик до версии 3+.

person Jarzyn    schedule 22.08.2014

arrow_upward
0
arrow_downward

У меня была такая же проблема после обновления с Bootstrap 2 до Bootstrap 3. Я обновил CSS Bootstrap, CSS X-Editable и JS, но забыл обновить JS Bootstrap, который все еще был для v2.

Не забудьте обновить все файлы:

  • Начальная загрузка 3 .css и .js
  • X-Editable для Bootstrap 3 .css и .js

Возможно, немного поздно, но, надеюсь, это все еще может кому-то помочь.

person BenMorel    schedule 06.10.2015