Is there a way to get Bootstrap Studio from generating the <script> tags that loads up jQuery and Bootstrap when you export the project? The reason why I ask this is because BS seems to always puts these tags at the bottom of the HTML file. This is a problem for me because I have my own Javascript that uses jQuery and the only way I have figured out how to incorporate this into the project within BS is to use a Custom Code block and stick the JS in there.
However, this solution isn't ideal because even if I put the Custom Code block all the way at the bottom, BS still places the generated jQuery and Bootstrap <script> tags after it. So the generated code might look like this:
<br>
<script> $(document).ready(main); </script><br>
<!-- end of Custom Code block --><br>
<script src="assets/js/jquery.min.js"></script><br>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<br>
As you can see this results in jQuery being used before it has been included by the browser which of course doesn't work. A work around I've been using was that I would include jQuery myself in the Custom Code block so it'll look like this:
<br>
<script src="assets/js/jquery.min.js"></script><br>
<script> $(document).ready(main); </script><br>
<!-- end of Custom Code block --><br>
<script src="assets/js/jquery.min.js"></script><br>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<br>
In effect, jQuery gets included twice. I figured since the browser caches it, it wouldn't actually try to download the jQuery module twice. However, I discovered that doing this breaks Bootstrap modals. So I now I really need BS to not generate these tags for me now.
I'm about to try having BS run an export script that goes through all the generated HTML and remove the generated tags. But I'm wondering if BS already has a way to keep it from generating those tags and I'm just overlooking it.
The Bootstrap files are proprietary so you cannot change that at all, that will happen always because this web designer is a Bootstrap design tool.
If you have items that rely on jquery or javascript and it's already there, you don't need to add it again. Your components or code blocks, should pick that up on it's own I believe. The only time you're going to find this is an issue is if your component is an external one that needs to have files in a specific place to run and you are not able to edit the script yourself to change the paths, or you need a different version of jquery or javascript than the default ones. I have a few like that myself and your work around to add them into Custom Code blocks works for most everything so far for me. Make sure to put that block within the component block of the component you are trying to be sure is referencing the files there. If you add them between blocks, it will not work correctly.
I have a WowSlider gallery system that I use, and the entire system goes into a Custom Code block and includes the jquery file that the slider comes with. I add that at the bottom of my custom code box for that and it works just fine, there have been no conflicts with this, and it's needed for every gallery so there are some pages of some of my sites that have it on the page multiple times for multiple galleries on a page and still no conflict. So it does work, you just have to do it correctly.
You won't have any other choice on this, it's the way the software works, Bootstrap is proprietary and is therefore locked and not movable unless you want to change your files on export manually which you are free to do.
They could add an option to Bootstrap Studio to not generate the script tags that includes jQuery and Bootstrap and have the developer do it themselves. I was kind of hoping that this was already in there somewhere and I'm just not seeing it. If it's not, then I guess I'll have to go with the idea of having an export script go through the HTML files in the exported result and remove the generated tags.
Like I mentioned earlier, my work around of including jQuery myself in the Custom Code block won't work for me because including jQuery twice in the same HTML page breaks Bootstrap modals.
Since those files are proprietary to the site and used by all of the elements included in the components, it would not be practical for them to do that. The main practice on building a site today puts almost all of the scripts in the bottom of the page, not in the head or the content areas. Just those few exceptions above that I mentioned cause us to work around it and that to me is not worth me having to edit my pages after they are exported just to put files where I want them.
Do you have your scripts all setup within a Div or Column or Container with the rest of your component files? If not, then that is why it's not working. Have you tried without adding those files to see if your components pick up the default ones?
Do you mean put my script tags inside a div? No, but I just put them all inside a div just now to see what would happen and Bootstrap modals still didn't work if you include jQuery twice in the same HTML file.
It's not that putting the script tags at the bottom is a problem, though. It's the order in which the script tags are being placed at the bottom which is the problem. I have my own Javascript code that uses jQuery and if jQuery gets included after my Javascript gets seen by the browser, then my code will not work. I could include jQuery myself before my Javascript, but then jQuery gets included twice which will cause modals to stop working.
I can understand why the BS developers would be hesitant to include an option to not generate those tags, though. Not-so-bright people may accidentally enable the option, and then wonder why their page isn't working which opens up a whole tech support can of worms.
Yeah, I definitely know what you mean on placing them at the bottom, you just can't do that with multiples of the same files, conflicts happen then. When I say put them inside a div I mean included with the compoent they are meant for such as what I do for galleries is this all in the same Custom Code box:
I also just realized too that the other option that I use is to put it into the Head of the page, in a different directory. Right click the page name in the Design list and choose properties. Then go to the Head Content tab and this is how mine are done, referenced to a specific directory:
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
As long as I reference them as above, I can include as many instances as I need for multiple galleries and there is no conflict. I would think the same would apply for you and that would be an quicker fix if your scripts can access the files in a separate location rather than the location of the main script directory.
Your script shouldn't be included in the a Custom Code block. You need to add your script properly by right clicking the Javascript menu in the Design pane on the bottom right of the BSS app and select Create JS. Then add your script in there without the script tags.
I've tried it every way to Sunday and this is the best way I can get it to work properly with the least amount of upkeep. In other words, I can upload the directories to the server and not have to mess with them again, and updates can be done in the code in BSS without having to import any of the images or files for the galleries, I can just upload the photos directly to the directory and it's done. So far it's worked fine for me.
Granted, I "can" import the files all except the CSS which for some reason won't work no matter how I order it. I have to reference the CSS with an external link to the file by using an absolute URL or it won't work at all for some reason. If I reference it externally, and import the rest, I "can" have it work but it's a lot more work to upkeep it so I've opted to go the route I am using. It doesn't work in the app, or in the preview, but since I already know it works when uploaded that doesn't bother me at all.
Having said all that, maybe once the Preview in the app works correctly I may adjust this too. One of the other main reasons I do it this way is because the galleries are intrusive in the app, they don't conform to their containers etc. They "do" in reality, just not visually in the app and they get in the way of other editing so this way works best for me.
I don't do this with all things, just these galleries. :)
Sorry @jo it was actually directed at the OP @asincero. I know your crazy setup works but it's better that those that aren't like that should do it correctly so that they'll know and continue to do it how it's intended to be done.
I think a possible reason you have such issues is that your wowslider setup may not always be similar from one to the other so you always have to include some special script/css just for that. If you were to use the same slider every time then I think you could come to a place where it would be simpler to implement maybe. I don't know never worked with wowslider, don't think I ever will ;). I'll either just use the Carousel or Jssor.js (https://jssor.com/).
Haha no worries Saj. I actually use the same setup for every gallery though, I've used WowSlider for years due to the number of transitions and themes it has available as well as the functionality works pretty slick too. It's not perfect as you can see, but it works for me so far. I don't like the default slider, it's boring looking lol and most of my clients are looking for something that looks fancy or not so plain. And the BSS slider is just a slider if I recall. I don't think I've seen any transition effects for it? may have missed it all though :)
Anyways, no problem, it's very simple to use now for me, this way, but I definitely know it's not the most efficient way to do things on a normal basis and everything else pretty much gets added as it should be except this, so it's all good.
@saj, but then the Javascript file gets included on every HTML page of the project. This doesn't seem desirable.
To make things more concrete ... the thing I am implementing is a simple web application that shows aircraft datalink communications latencies on a graph in real time on a dashboard. I have an HTML page called "dashboard.html" that shows this information. The JS for this page lives in a JS file called "dashboard.js". I also have an HTML page called "login.html" which implements the login page for the web app. It wouldn't make sense for "login.html" to also include "dashboard.js".
If I could simply add the Javascript file via the method you mentioned, that would solve everything and would fit quite nicely in my workflow. But as of right now, it's not usable to me unless I'm overlooking something. The set of Javascript files that get included needs to be done on a per-HTML file basis. Not on a project-wide basis.
This seems more to me that you have created for yourself a mental block having named your script files something specific to a page rather than something more generic like scripts.js that would then contain all the custom scripts in it for your project. Which I can imagine most people do. It is better served to do that since it helps with browser caching rather then the browser having to possibly load a new resource every time you switch pages.
You've pretty much answered yourself in your last paragraph but have refused to follow it. I can't help if that's how you think.