title: JavaScript element issue in Twig template with Symfony 2
body: <p>I have an issue with Javascript elements in my twig template. </p>
  
  <p>JS carousel element on top of the page is not loading when href path when site menu is changed from a id style reference (e.g href = "#terms") to link to a different page (e.g href={{ path('terms') }}.</p>
  
  <p>This is my part of index.html.twig</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
      &lt;head&gt; 
          &lt;meta charset="utf-8"/&gt; 
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
          &lt;title&gt; {% block title %} Test Script {% endblock %}&lt;/title&gt; 
          &lt;link rel="shortcut icon" href="{{ asset('favicon.ico') }}"/&gt; 
          {% block stylesheets %} 
              {% stylesheets 'bundles/useruser/css/*' filter='cssrewrite' %} 
              &lt;link rel="stylesheet" href="{{ asset_url }}" type="text/css"/&gt; 
              {% endstylesheets %} 
          {% endblock %} 
          &lt;script type="text/javascript" charset="utf-8" src="//code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt; 
          {% block javascripts %} 
              {% javascripts '@UserUserBundle/Resources/public/js/*' %} 
              &lt;script type="text/javascript" src="{{ asset_url }}"&gt;&lt;/script&gt; 
              {% endjavascripts %} 
          {% endblock %} 
      &lt;/head&gt; 
      &lt;body&gt; 
          {% block body %} 
          &lt;div id="sTop" class="site-main"&gt; 
              &lt;div class="site-header"&gt; 
                  &lt;div class="main-header"&gt; 
                      &lt;div class="container"&gt; 
                          &lt;div id="menu-wrapper"&gt; 
                              &lt;div class="row"&gt; 
                                  &lt;div class="logo-wrapper col-md-4 col-sm-2 col-xs-8"&gt; 
                                      &lt;h1&gt; 
                                          &lt;a&gt;Travel Flex&lt;/a&gt; 
                                      &lt;/h1&gt; 
                                  &lt;/div&gt; 
                                  &lt;div class="col-md-8 col-sm-10 col-xs-4 main-menu text-left"&gt; 
                                      &lt;ul class="menu-first hidden-sm hidden-xs"&gt; 
                                          &lt;li class="active"&gt;&lt;a href="#"&gt;{{ 'About' }}&lt;/a&gt;&lt;/li&gt; 
                                          &lt;li&gt;&lt;a href="terms"&gt;{{ 'Terms &amp; Conditions' }}&lt;/a&gt;&lt;/li&gt; 
                                          &lt;li&gt;&lt;a href="privacy"&gt;{{ 'Privacy Policy' }}&lt;/a&gt;&lt;/li&gt; 
                                          &lt;li&gt;&lt;a href="#contact"&gt;{{ 'Subscribe' }}&lt;/a&gt;&lt;/li&gt; 
                                          &lt;li&gt;&lt;a href="unsubscribe"&gt;{{ 'Unsubscribe' }}&lt;/a&gt;&lt;/li&gt; 
                                      &lt;/ul&gt; 
                                      &lt;a href="#" class="toggle-menu visible-sm visible-xs"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt; 
                                  &lt;/div&gt; 
                              &lt;/div&gt; 
                          &lt;/div&gt; 
                          &lt;div class="menu-responsive hidden-md hidden-lg"&gt; 
                              &lt;ul&gt; 
                                  &lt;li class="active"&gt;&lt;a href="#"&gt;{{ 'About' }}&lt;/a&gt;&lt;/li&gt; 
                                  &lt;li&gt;&lt;a href="terms"&gt;{{ 'Terms &amp; Conditions' }}&lt;/a&gt;&lt;/li&gt; 
                                  &lt;li&gt;&lt;a href="privacy"&gt;{{ 'Privacy Policy' }}&lt;/a&gt;&lt;/li&gt; 
                                  &lt;li&gt;&lt;a href="#contact"&gt;{{ 'Subscribe' }}&lt;/a&gt;&lt;/li&gt; 
                                  &lt;li&gt;&lt;a href="unsubscribe"&gt;{{ 'Unsubscribe' }}&lt;/a&gt;&lt;/li&gt; 
                              &lt;/ul&gt; 
                          &lt;/div&gt; 
                      &lt;/div&gt; 
                  &lt;/div&gt; 
              &lt;/div&gt; 
              &lt;div class="site-slider"&gt; 
                  &lt;div class="slider"&gt; 
                      &lt;div class="flexslider"&gt; 
                          &lt;ul class="slides"&gt; 
                              &lt;li&gt; 
                                  &lt;div class="overlay"&gt;&lt;/div&gt; 
                                  &lt;img src="{{ asset('bundles/useruser/images/slide1.jpg') }}" alt=""&gt; 
                                  &lt;div class="slider-caption visible-md visible-lg"&gt; 
                                      &lt;h2&gt;test text 1&lt;/h2&gt; 
                                      &lt;p&gt;test text 1&lt;/p&gt; 
                                  &lt;/div&gt; 
                              &lt;/li&gt; 
                              &lt;li&gt; 
                                  &lt;div class="overlay"&gt;&lt;/div&gt; 
                                  &lt;img src="{{ asset('bundles/useruser/images/slide2.jpg') }}" alt=""&gt; 
                                  &lt;div class="slider-caption visible-md visible-lg"&gt; 
                                      &lt;h2&gt;test text2&lt;/h2&gt; 
                                      &lt;p&gt;test text 2&lt;/p&gt; 
                                  &lt;/div&gt; 
                              &lt;/li&gt; 
                              &lt;li&gt; 
                                  &lt;div class="overlay"&gt;&lt;/div&gt; 
                                  &lt;img src="{{ asset('bundles/useruser/images/slide3.jpg') }}" alt=""&gt; 
                                  &lt;div class="slider-caption visible-md visible-lg"&gt; 
                                      &lt;h2&gt;test text 3&lt;/h2&gt; 
                                      &lt;p&gt;test text 3&lt;/p&gt; 
                                  &lt;/div&gt; 
                              &lt;/li&gt; 
                          &lt;/ul&gt; 
                      &lt;/div&gt; &lt;!-- /.flexslider --&gt; 
                  &lt;/div&gt; &lt;!-- /.slider --&gt; 
              &lt;/div&gt; &lt;!-- /.site-slider --&gt; 
          &lt;/div&gt; &lt;!-- /.site-main --&gt; 
  </code></pre>
  
  <p></p>
  
  <p>Carousel element is loading fine when i use href = "#terms".
  <a href="https://i.stack.imgur.com/hDeZr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hDeZr.jpg" alt="enter image description here"></a>
  However link does not work as it should (links in red rectangular not redirecting to a different page). </p>
  
  <p>When i use href={{ path('terms') }} link works as it should, however carousel element is not loaded.
  <a href="https://i.stack.imgur.com/9TT93.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9TT93.png" alt="enter image description here"></a>
  Looks like there is an issue with how i include js files into index.html.twig however i am not sure how to fir it. Below is the error from browser console:</p>
  
  <p><a href="https://i.stack.imgur.com/5Yf7m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Yf7m.png" alt="enter image description here"></a></p>
  
  <h3>Any assistance is appriciated</h3>