CODEWITHSUNDEEP
jquerytwitter-bootstrapx-editable
tetsujinsan
tetsujinsan

Reputation: 93

x-editable v1.5.1 Uncaught TypeError: $(...).editable is not a function

I would like to implement inline-editing using bootstrap and x-editable but no matter which version of jquery/bootstrap/x-editableand I use the following error occurs

Uncaught TypeError: $(...).editable is not a function

when calling:

$('#field_name').editable();

and

Uncaught TypeError: Cannot read property 'defaults' of undefined

when calling:

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

It's just like the library itself has not been initialized:

How the files are included

   <script src="path/jquery.min.js"></script>           /v: 3.2.1 and 1.9.1
   <script src="path/tether.min.js"></script>         
   <script src="path/bootstrap.min.js"></script>        /v:4-alpha
   <script src="path/jquery.ui.min.js"></script>           /v: 1.12.1
   <script src="path/bootstrap3-editable.js"></script>   /v: 1.5.1
   <script src="path/customFile.js"></script>

how the editable is called

  <script type="text/javascript"> 
   (function () {
         customFile.init();
   })();
  </script>

customFile.js 

  var customFile = (function(){
      var scope = {
           init : function(){
              $('#field_name').editable();
           }
       };

      return {
           init : scope.init
      };

  })(window, undefined)

HTML code

  <a href="#" id="field_name" data-type="text" (...)>Some text</a>

I've just put some console.log inside bootstrap-editable.js vendor and it launches so the library is included however somehow function $.fn.editable does not exists. I would really appreciate for some word of advice

PS The application is based on Syfony 3.x and I use Twig Templating system for templates inheritance. The bower is used for vendor dependencies

Upvotes: 2

Views: 3150

Answers (1)

tetsujinsan
tetsujinsan

Reputation: 93

As I mentioned twig was used to create main layout site. The structure was like this:

  <head>
    {% block javascripts %}
        <script type="text" src="path/bootsrtap3-editable.js"></script>
    {% endblock %}
  </head>

  <body>
    {% page_content %}
       some content here
    {% endblock %}

    {% block javascripts_inline %}
       <script type="text/javascript"> 
          (function () {
             customFile.init();
          })();
       </script>
    {% endblock %} 
 </body>

The solution was to move library includion to javascripts_inline block

  <head>
    {% block javascripts %}

    {% endblock %}
  </head>

  <body>
    {% page_content %}
       some content here
    {% endblock %}

    {% block javascripts_inline %}
       <script type="text" src="path/bootsrtap3-editable.js"></script>
       <script type="text/javascript"> 
          (function () {
             customFile.init();
          })();
       </script>
    {% endblock %} 
 </body>

Upvotes: 1

Related Questions