Can't get Bootstrap features to work in UI Pages

yundlu316 · ‎10-28-2016

I'm creating a UI Page and am testing out possible site layout ideas from Codepen. The page I'm testing out uses jquery for a cool hero sliding feature upon hover and I've also included our team's Bootstrap inverse navbar. I used Bootstrap CDN from getbootstrap.com, but the Bootstrap navbar features don't seem to work (i.e. the dropdown doesn't work and when the screen size is minimized, the hamburger button won't expand).

I've read about noConflict, but am unsure if that's the issue and how to properly use it. For kicks, I added jQuery.noConflict(); within <script> tags and the hamburger icon actually worked, but the navbar dropdown still didn't work and the hero images hover feature stopped working as well.

Here is my code (the code works perfectly in JSFiddle though): Edit fiddle - JSFiddle

Any suggestions are greatly appreciated!

Arnoud Kooi · ‎10-29-2016

You can try setting the value of Direct to true, this way you can build your html from scratch (except a script tag for client script at the end)

By default with Direct set to false, a ui page includes an edited version of Bootstrap and also jQuery is loaded.

For jQuery the base function then is $j (or jQuery) instead of $

View solution in original post

Arnoud Kooi · ‎10-29-2016

You can try setting the value of Direct to true, this way you can build your html from scratch (except a script tag for client script at the end)

By default with Direct set to false, a ui page includes an edited version of Bootstrap and also jQuery is loaded.

For jQuery the base function then is $j (or jQuery) instead of $

yundlu316 · ‎10-29-2016

Hi Arnoud, what do you mean by setting value of Direct to true?

Arnoud Kooi · ‎10-29-2016

On the UI page there is a checknox direct, check that box, save and tru again.

prithvirajchaud · ‎10-29-2016

Hi,

I think your problem lies with the fact that service now blocks some of the APIs in scoped application. For more information on that check out the link below.

Scoped Applications and Client Scripts: A Primer Some APIs like document, jquery etc would not work in scoped application. To enable these APIs you would have to add glide.script.block.client.globals (Type true|false ) to the system properties with a value of false. Make sure you set the application to the application you want to enable jquery in. In this case the application of the UI Page you are creating.

The above solution will work provided you are working in scoped application.

Mark this answer correct if it helped you.

Thanks