3

(This problem is specific to Bootstrap Studio)

I need to include a piece of JS that is specific to just one page.

  • I can’t put it in a JS file since it is specific to one page and BSS apparently has no option to link JS files to individual pages. It always imports all JS files in all pages (which itself is a serious limitation in my opinion).
  • I can’t put it in a Custom Code block in the page because it uses jQuery, which is loaded AFTER the entire page content (including jQuery.js) by BSS, thus I see $ is not defined error when my script runs.

What is my way out?

dotNET
  • 33,414
  • 24
  • 162
  • 251

2 Answers2

3

You have :

  • 1) to wait jQuery is loaded, you can do this with such code : 

    $( document ).ready(function() {
  // Handler for .ready() called.
  if (window.location.pathname == '/mypage.php') {
    // execute my custom code
  }
});

or

    var waitForJQuery = setInterval(function () {
    if (typeof $ != 'undefined') {    
        // place your code here.
        if (window.location.pathname == '/mypage.php') {
          // execute my custom code
        }

       clearInterval(waitForJQuery);
        }
    }, 50);

  • 2) if you want to execute your code only on a custom page, you can check on which page you are, and if you are on the good page, you execute your custom code

    if (window.location.pathname == '/mypage.php') {
  // execute my custom code
}

    See more possibilities here : Best way to execute js only on specific page

PierreN
  • 968
  • 4
  • 11
  • Thank you. #1 won't work since `$` is not defined yet. Interval also sounds a bit hacky. #2 is a better option though. I'll try that out. – dotNET Jul 11 '18 at 19:46
  • It does. I used the css class method mentioned in the page you linked. Though I do feel this is a problem with Bootstrap Studio. Why in the world should we be forced to include all scripts on all pages of our website? – dotNET Jul 11 '18 at 19:59
  • 1
    I don't know how they have thought the specifications of BSS, maybe for doing SPA single pages applications, so that's why they didn't maybe think to manage one script per different page... – PierreN Jul 11 '18 at 20:01
  • anyway, happy to have helped you ! ;-) – PierreN Jul 11 '18 at 20:01
0

You can easily right-click on the js file. In the dropdown you can select "Visibility" and then select all the html pages where you want to use your js file.

Jonas Q.
  • 38
  • 3
  • This doesn't seems to answer to the question – Elikill58 Jan 22 '22 at 21:00
  • 1
    Thanks. This is the correct answer. I just checked their [version history](https://bootstrapstudio.io/pages/releases). BSS guys added this option in version 5.1.0 (May 2020), long after I had posted this question (maybe someone from the team read my post, lol). I'll mark this as answer for the future readers. – dotNET Jan 23 '22 at 06:27