.js on specific pages? [added in 5.1]

Bootstrap Studio Help
1

So apparently BSS loads all javascripts on every page. There seems to be no way to load a script on just one page (unless I'm mistaken.)

I have a script I need to execute after jquery.min.js is loaded, but this can't be done via custom code since you can't place custom code after the body. I can, of course, go in and manually edit the HTML file (my current solution) but it seems like a strange program limitation. In other builders, I've been able to add custom code before the HTML, in the head, in the body, or after the HTML.

I think this should be an option the dev should consider adding.

2

+1 on having js applied global or specific to pages.

On your second comment I am confused. If you right click on Javascript and add a script by importing, creating, or linking, its always going to come after jquery.min.js, bootstrap.min.js, in that order. What am I missing ?

3

Yes, if I add the script by importing it, it will come after jquery.min.js, but it will also be loaded on every page of the site which I don't want. If I place the script on just the page I want by using a custom code component, then it is appears before <script src="assets/js/jquery.min.js"></script> and for some reason, it won't run.

4

As a option to editing your html page externally you could use jquery's getScript to load the script based on a conditional statement.

https://api.jquery.com/jQuery.getScript/

It would go something like this...

If my page body has class ".whatever" then use jquery getscript to load from external folder I uploaded to my server and then use getscript callback to run my initiation script to fire my settings and console log "completed main script and initiation script load".

5

That's an interesting setup Twinstream, I wonder if the Devs could utilize something like that in order to give us the ability to reference external folders directly? Interesting indeed.

6

Thank you Twinstream, I will look into that.

7

Hello everyone, I'm quite new to this forum, and I start to use BSS since 2 weeks. I think it can be useful to have an option for each page like "JS code used", where we can find all our JS code. Then we select or unselected which code is used in our page. In my mind, it can be simple to implement (as developer), and the user has a simple way to manage it. I hope it is clear enough, what do you think ?

8

.js libraries get loaded at the bottom and stay cached. So what issue are we trying to solve for small static sites done with BSS?

9

+1 for this.

I would like to be able to choose which JS files are loaded globally and which files are page specific.

10

specific "non-global" js may be loaded on selected page here:

in design pane > right click on selected html > properties > head content

11

yes, that could be an option if your script does not include any reference to jquery. If it is, this does not work because jquery is loaded after the code in the head. This problem makes this tool not fit for real work. the ability to include specific js files in a page is a simple change that has dramatic effect on the usability of Bootstrap studio. If there is one feature that needed, is definitely this one.

12

Actually that won't be a good thing because they will still be listed in the footer whether you add them to the head or not, and you shouldn't anyways.

Other than that, I really hate it when you people that haven't bothered to ever post before start saying an app isn't "fit for real work" etc. Seriously I have been doing "real work" in this app for over 3 years and it works just fine. My pages don't load any slower due to the added code for the js and if they do it's so minimal it is irrelevant. I agree with you that it "should" be done, we've been told they will work with it soon, but other than that, the rest of the app works great, and that means for "real work" as well as messing around stuff.

Please don't walk into a forum for your first few posts and start making an app or product look awful just because it doesn't do what you want it to do right off the bat. If you don't have time to mess with an app long enough to see it's features and potentials, then keep your opinions to yourself, that's all they are in the end then, because if you had really checked out this app you'd be praising them, not disrespecting them.

Just my 10 cents as an avid user and poster for this app for over 3 years and counting.

13

I apologise if my comment was not properly placed. My opinions were intended to improve on the app, not to put it down. I really like Bootstrap studio, and you are correct that I just started using it, but i can see it being part of my toolbox. If my intention was to put it down, I would not have bothered to write the comment.

I have found a work around in my case, for those interested. I say this with the caveat that it depends on your workflow but if you are using Eclipse and maven, here is what i do.

Imagine i have a file called AfterLogin.html created in Bootstrap studio. I then create a file AfterLogin.js in Eclipse in a different folder than those created by Botrastrap studio. Lets sat there is a folder called js at the root of the app, and therefore the file will js/AfterLogin.js

I put an empty js file in Bootstrap studio,lets say General.js, which of course will be repetead in every file generated by BS.<br /> Then in the pom file to be executed I use the replacer plugin and replace assets/js/General.js with js/AfterLogin.js I do this for every file in my app. It works great.

Here is the section of the pom file that illustrate this.

<plugin>
<groupId>com.google.code.maven-replacer-plugin</groupId>
<artifactId>replacer</artifactId>
<inherited>false</inherited>
<executions>
     <execution>
    <id>replacebuild-index.js</id>
        <phase>prepare-package</phase>
        <goals>
            <goal>replace</goal>
        </goals>
        <inherited>false</inherited>
        <configuration>
            <file>${basedir}/src/main/webapp/index.html</file>
            <replacements>
                <replacement>
                    <token> assets/js/General.js</token> 
                    <value>js/index.js</value>
                </replacement>
            </replacements>
             <regex>false</regex>
        </configuration>
    </execution>
    <execution>
    <id>replace-AfterLgin.js</id>
        <phase>prepare-package</phase>
        <goals>
            <goal>replace</goal>
        </goals>
        <configuration>
            <includes>
                <include>${basedir}/src/main/webapp/AfterLogin.html</include>
            </includes>
            <replacements>
                <replacement>
                    <token> assets/js/General.js</token> 
                    <value>js/AfterLogin.js</value>
                </replacement>
            </replacements>
             <regex>false</regex>
        </configuration>
    </execution>
</executions>

</plugin>

14

I apologise if my comment was not properly placed. My opinions were intended to improve on the app, not to put it down. I really like Bootstrap studio, and you are correct that I just started using it, but i can see it being part of my toolbox. If my intention was to put it down, I would not have bothered to write the comment.

I have found a work around in my case, for those interested. I say this with the caveat that it depends on your workflow but if you are using Eclipse and maven, here is what i do.

Imagine i have a file called AfterLogin.html created in Bootstrap studio. I then create a file AfterLogin.js in Eclipse in a different folder than those created by Botrastrap studio. Lets sat there is a folder called js at the root of the app, and therefore the file will js/AfterLogin.js

I put an empty js file in Bootstrap studio,lets say General.js, which of course will be repetead in every file generated by BS.<br /> Then in the pom file to be executed I use the replacer plugin and replace assets/js/General.js with js/AfterLogin.js I do this for every file in my app. It works great.

Here is the section of the pom file that illustrate this.

 <plugin>
<groupId>com.google.code.maven-replacer-plugin</groupId>
<artifactId>replacer</artifactId>
<inherited>false</inherited>
<executions>
     <execution>
    <id>replacebuild-index.js</id>
        <phase>prepare-package</phase>
        <goals>
            <goal>replace</goal>
        </goals>
        <inherited>false</inherited>
        <configuration>
            <file>${basedir}/src/main/webapp/index.html</file>
            <replacements>
                <replacement>
                    <token> assets/js/General.js</token> 
                    <value>js/index.js</value>
                </replacement>
            </replacements>
             <regex>false</regex>
        </configuration>
    </execution>
    <execution>
    <id>replace-AfterLgin.js</id>
        <phase>prepare-package</phase>
        <goals>
            <goal>replace</goal>
        </goals>
        <configuration>
            <includes>
                <include>${basedir}/src/main/webapp/AfterLogin.html</include>
            </includes>
            <replacements>
                <replacement>
                    <token> assets/js/General.js</token> 
                    <value>js/AfterLogin.js</value>
                </replacement>
            </replacements>
             <regex>false</regex>
        </configuration>
    </execution>
</executions>

</plugin>

15

Just an update for people who are reaching this thread via search. Since version 5.1 Bootstrap Studio supports JS/CSS/fonts to be included on a per page basis, so no hacks or workarounds are needed. To do it just right click the css/js/font file and choose Visibility.

1 Like
16

Awesome! Thank you Martin!