title: $(...).gantt is not a function
body: <p>I want to display some gantt-charts on my website, but they won't show up. Instead I get a TypeError.</p>
  
  <p>The Site (not fully shown):</p>
  
  <pre><code>&lt;body&gt;
     {% block body %}
         &lt;div class="container"&gt;
            &lt;div class="gantt" id="gantt"&gt;&lt;/div&gt;
            //... some stuff (only &lt;div&gt;&lt;/div&gt; and some &lt;span&gt;&lt;/span&gt; tags)
            &lt;div class="gantt" id="gantt2"&gt;&lt;/div&gt;
            //... even more stuff
            &lt;div class="gantt" id="gantt3"&gt;&lt;/div&gt;
         &lt;/div&gt;
     {% endblock %}
  
     //Here I include the jquery.fn.gantt.js, etc.
     {% block javascripts %}
          {% javascripts '@jquery_js' '@bootstrap_js' '@jquery_gantt' combine=true       %}
          &lt;script src="{{ asset_url }}"&gt;&lt;/script&gt;
          &lt;script&gt;
              $("#gantt").gantt({
                  source: [{
                      name: "Example",
                      desc: "Lorem ipsum dolor sit amet.",
                      values: [{
                              from: "/Date(1333411200000)/",
                              to: "/Date(1328832000000)/",
                              label: "Example Value",
                              desc: "Something",
                              customClass: "ganttRed"}]
                      }],
                 scale: "weeks",
                 minScale: "hours",
                 navigate: "scroll"
             });
             $("#gantt1").gantt({
                 source: [{... same as above ...}],
                 scale: "weeks",
                 minScale: "hours",
                 navigate: "scroll"
             });
             $("#gantt2").gantt({
                 source: [{... same as above ...}],
                 scale: "weeks",
                 minScale: "hours",
                 navigate: "scroll"
             });
          &lt;/script&gt;
          {% endjavascripts %}
      {% endblock %}
  &lt;/body&gt;
  </code></pre>
  
  <p>and the config.yml:</p>
  
  <pre><code>jquery_js:
      inputs:
          - '%kernel.root_dir%/../vendor/components/jquery/jquery.js'
          - '%kernel.root_dir%/../vendor/components/jquery/jquery.min.js'
  bootstrap_js:
      inputs:
          - '%kernel.root_dir%/../vendor/components/bootstrap/js/bootstrap.min.js'
  jquery_gantt:
      inputs:
          - '%kernel.root_dir%/../src/AppBundle/js/jquery.fn.gantt.js'
          - '%kernel.root_dir%/../src/AppBundle/js/jquery.fn.gantt.min.js'
  </code></pre>
  
  <p>If I run this code now, nothing happens except that this error appears:</p>
  
  <pre><code>TypeError: $(...).gantt is not a function
  </code></pre>
  
  <p>I don't know what's happening or how to fix this, as everything seems correct to me. the .js/.css-files are included and load correctly.</p>