Question

I’m using Twitter Bootstrap tabs in a Symfony2 project and they work great – but only in the development environment, in production they seem broken (instead of switching tabs, the links work like normal links and #de/#en is added to the url).

I’m using the following markup in my template:

    <ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
        <li class="active">
            <a data-toggle="tab" href="#de" data-translation-locale="de">Deutsch</a
        </li>
        <li>
            <a data-toggle="tab" href="#en" data-translation-locale="en">English</a
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="de">
             Deutsch
        </div>
        <div class="tab-pane" id="en">
             English
        </div>
    </div>

The Bootstrap .js files are included after jquery is loaded using Assetic:

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    {% javascripts output="js/frontend.js"
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-affix.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-alert.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-button.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-carousel.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-collapse.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-dropdown.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-modal.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-popover.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-scrollspy.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-tab.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-tooltip.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-transition.js'
        '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-typeahead.js'
       %}
    <script src="{{ asset(asset_url) }}"></script>
    {% endjavascripts %}

My configuration of assetic (in config.yml) looks like this:

assetic:
 debug: %kernel.debug%
 use_controller: false
 filters:
    cssrewrite: ~
    lessphp:
        file: %kernel.root_dir%/../vendor/leafo/lessphp/lessc.inc.php
        apply_to: "\.less$"

For the dev environment (config_dev.yml), the use_controller option is set to true:

assetic:
    use_controller: true

I used assetic:dump web (with and without –env=prod –no-debug options), and js/frontend.js generated and loaded, bootstrap-tab.js is in it (opened the file and checked), but the tabs work only on dev. I even set use_controller=true in config.yml just to see if anything changes.

What works though is to copy bootstrap-tab.js from its vendor dir to /web/js and include it manually.

Currently I’m using bootstrap.min.js from the website and it works great, but I would really like to know what I did wrong using Assetic.

Answer 1

Here is what did the trick:

    {% javascripts output="js/frontend.js"
       ...
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}

I’m not sure where I got this from, but asset(asset_url) seems to be wrong – using just asset_url works fine. So I simply changed

    <script src="{{ asset(asset_url) }}"></script>

to

    <script src="{{ asset_url }}"></script>

I don’t see any difference in the final html, but that did the trick. I’ll have to take a closer look at the Assetic documentation for the details.