BootStrap Studio Resources?

I am attempting to workaround the issue related to JS Include order. I added my external library <script> tags and had to duplicate bootstrap and jquery libraries in my custom code block. I am hoping this item is resolved soon!

However, during preview time, where is BootStrap Studio attempting to load the external dependencies such as the tabulator.js file? I have tried a variety of relative paths without success. Some files are not hosted on https://cdnjs.cloudflare.com/ajax/libs/ so I cannot reference them there.

Any ideas where I should store my additional assets for Preview mode?

Ben

Just import the external dependencies as local .js files in to the JavaScript folder in the Design Tab.

That is what I am trying to avoid. I am adding dozens of .js files, most of which only pertain to specific web page files. Since the feature to apply an import, in this case a .js which has dependencies on BootStrap and JQuery, there is no easy way to "hack" in my custom libraries. Believe me I have tried!

Outside of the BStudio, I can place the .js files where ever I want. And there in lies the issue. The auto generated inclusions are coming after my .js files which are included as "custom code". Unless I include all of the BStudio (plus some other js libraries) in my custom code section, the page doesn't work. Well it does not work in preview at all doing it this way since I do not know where to put my external artifacts for "preview" mode. Which is back to my original question...

Ben

When you say "preview" do you mean in the Bootstrap studio program window, or in the web browser preview that you open up when you click the Preview button in the upper right? You will never see your custom javascript running inside the BSS program, but you should be able to see it in your web browser preview.

If you are referencing jquery in your custom code, you do have to change the location of the jquery library to make it work in preview, vs the location in a live uploaded website.

On this site, I'm using a popular particle generator to make the "soap bubble" effect... www.formulaautowash.com I'm only doing the bubbles on the home page. I created a new .js file by right-clicking the JavaScript folder in the design panel at the lower right, and pasting into it the code generated by the particle.js program. So this gets loaded on every page of the site by default. I'd rather it didn't, but I can't control that.

On the home page, I have a single custom code element in the tree right after the Body component. This custom code component triggers the particle script to run, and it contains the following code... <script src="assets/js/jquery.min.js"></script> <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

Without the first line telling the code where to find the jquery library in the preview mode, the effect would not run. The actual jquery library that Bootstrap Studio uploads when you export your files is different, and this is the path. This cannot be changed, and is done automatically by the program... <script src="/js/jquery-3.4.1.min.js"></script>

I don't know if this helps you at all. Not long ago, I requested that the devs give us an option to add custom HTML before the head, inside the head, inside the body, or after the body. I don't know if they've taken it under advisement or not.

@Printninja,

It is in the "browser" and not the IDE that the issue resides. I am aware of how to get around the page specific resource issue "if" the external library (in your case the particles.min.js) is hosted on a web server. But these .js files were written by me and very specific to each individual page and are reliant on Bootstrap, JQuery, and other libraries. This is why I asked if there was a specific "temp" or "fixed" (preferrable) folder that BootStrap Studio uses when running previews in the browser. If I knew which folder BootStrap Studio uses to execute the browser preview, I could copy my custom assets to this folder so they would execute. Again, these custom assets only belong with specific pages and were written by me and not externally accessible like in your case.

I am aware of order of load and such so this is no surprise. I can view the source and see that the generated libraries from the JavaScript section are being generated before the closing / end body tag.

Would the BStudio developers perhaps chime in? This is a feature that not only I want but others have reported / requested the same feature.

Thank you,

Ben

There really is not a lot of information or an example of your project to fully give a good response but you can load scripts conditonally.

I would start by learning how to use script loading if a condition exists in the DOM.

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

@Ben

The hypothetical folder you refer to (I believe) does not exist. When you preview your BSS in a browser, BSS creates a virtual server in memory, and I believe it builds the various libraries required from compressed files in the BSS installation folder.

If I preview a website in BSS, go to the browser, right click and view source, then scroll down to where the various script sources are referenced, then right click on one like src="/bootstrap/js/bootstrap.min.js", right click it and copy the link address and paste it, I get the following...

http://192.168.1.2:8000/bootstrap/js/bootstrap.min.js

So the file is basically located in a subfolder of the root folder of the virtual server the BSS creates, but there's no way I know of that you can save your own .js files there. I think your only alternative is to paste your .js into custom code components, which will then be loaded along with the rest of the page when you do a browser preview.

@Twinstream - Thank you. The problem is load order. If duplicate the jsquery and bootstrap imports, this should work.

@Printninja, The bottom line is load order. If I duplicate the js imports in a custom code component, and use Twinstream's technique of dynamic loading libraries since no physical "temp" folder exists, it may work.

If the developers do enhance bootstrap Studio with a "global" and a "per page" import at least for the JS components, this issue would go away for me.

To explain a little more of the problem I face (excuse the shear number of imports), as we know Bootstrap Studio allows for Import Order of files actually imported into the project. The application I am working on is a webform based data entry for a State reporting system. I have to call a series of Restful web services depending on which page is being shown to the user to download data such as Lookup Table values (i.e. Race, Eye Color, Offense Codes, etc.) and also the transaction report data.

Since each page has special requirements and each js import (ex: nibrsHeader.js) have dependencies on jquery and in some cases the Tabulator libraries, with the current IDE, there is no easy solution for this project without jumping through hoops.

What exposing the source html shows is (all JS files starting with NIBRS and UOF are my custom components reliant on jquery and some on Tabulator also):

<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bs-init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script>
<script src="/tabulator_core.min.js"></script>
<script src="/tabulator.js"></script>
<script src="/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<script src="/nibrsHeader.js"></script>
<script src="/nibrsOffenses.js"></script>
<script src="/nibrsProperty.js"></script>
<script src="/nibrsPropertyDetails.js"></script>
<script src="/nibrsPropertyDrug.js"></script>
<script src="/nibrsErrorsWarnings.js"></script>
<script src="/chartjs_test.js"></script>
<script src="/jquery.hotkeys.js"></script>
<script src="/login.js"></script>
<script src="/nibrsArrestee.js"></script>
<script src="/nibrsArresteeArmedWith.js"></script>
<script src="/nibrsOffenders.js"></script>
<script src="/nibrsOffenseBias.js"></script>
<script src="/nibrsOffensesCA.js"></script>
<script src="/nibrsOffensesSU.js"></script>
<script src="/nibrsOffensesWF.js"></script>
<script src="/nibrsVictimCircumstances.js"></script>
<script src="/nibrsVictimInjury.js"></script>
<script src="/nibrsVictimOffender.js"></script>
<script src="/nibrsVictimOffense.js"></script>
<script src="/nibrsVictims.js"></script>
<script src="/nm_dv_Incident.js"></script>
<script src="/uofIncident.js"></script>
<script src="/uofOffenses.js"></script>
<script src="/uofOfficerInjuries.js"></script>
<script src="/uofOfficers.js"></script>
<script src="/uofOtherAgency.js"></script>
<script src="/uofSubjectForce.js"></script>
<script src="/uofSubjectInjuries.js"></script>
<script src="/uofSubjectResisted.js"></script>
<script src="/uofSubjects.js"></script>
<script src="/chartjs_test2.js"></script>
<script src="/TestAuth.js"></script>
<script id="bs-live-reload" data-sseport="61888" data-lastchange="1576430697619" src="/js/livereload.js"></script>

I hope this clears the air about what I am attempting with Bootstrap Studio.

Ben

Your javascript skills are way beyond mine, but I agree with your need, as it's the same as mine... the ability to selectively load .js files on different pages of the site.

If you're listening @Martin this is something a number of users would love to have.

Here is an example of using getscript using the demo on https://api.jquery.com/jQuery.getScript/

https://scriptload.bss.design/

As long as your scripts on loaded on the internet somewhere, you can access them and load them. This will work in preview because all your scripting links work.

Page one just uses a conditional in my example that wraps around the getscript code. Basicially if the page body has load1 the script continues with getscript. Hit the button the demo works.

Page two had load2 for the page body class.....so it fails the first conditional test and does not procede to getscript. Hit button...nothing.

And if loading a group of scripts in order is important you can use getscript to load one, wait for the callback its loaded and then load the next and so on....

https://stackoverflow.com/questions/9711160/jquery-load-scripts-in-order