Forums

How to choose the order of the assets ?

Permalink
There is a conflict between jQuery UI and Boostrap buttons.
If `bootstrap/button` is loaded before `jquery-ui`, the Bootstrap button functions don't work.

Asset loading example :

class MyDashboardPage extends DashboardPageController {
    public function view() {
        $this->requireAsset('javascript', 'bootstrap/button');
    }
}


Button toggling : 

// I have a simple bootstrap button in my template.
$('.btn').button('toggle'); // Doesn't work


Now, if I swap the contents of `jquery-ui.js` and `button.js`, everything works fine.

How can I force `jquery-ui.js` to load before `boostrap/button` ?
moobee
 
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi moobee,

I did a quick search and it looks like there is a conflict between Bootstrap 3 button.js and jQuery UI.

This blog post listed this as the cause:
"There’s a conflict between jQueryUI and Twitter Bootstrap buttons because they both define $.fn.button()."
http://dullsharpness.com/2013/04/29/resolve-jqueryui-and-twitter-bo...

I was able to get button.js working by requiring the assets in the single page where the buttons would be used.
View::getInstance()->requireAsset('javascript', 'jquery/ui');
View::getInstance()->requireAsset('javascript', 'bootstrap/button');

This will load jquery-ui.js before button.js.
moobee replied on at Permalink Reply
moobee
Thank you, very useful.
alenb replied on at Permalink Reply
alenb
Thank you!