JQuery automatically added at bottom of body??

Bootstrap Studio Help
1

Hello everyone, I recently started using Boostrap Studio along with my own JQuery usage, outside of the animations and such that are pre-included within the studio. I am trying to initiate a JQuery function at the top of my page but it is failing because it seems that although I have Bootstrap Studio set to run with the latest version of JQuery, the studio is automatically including this resource at the bottom of the HTML document, rather than the top.

Is this intended behavior of the studio? Or is this a bug? How can I ensure that the bootstrap, jquery, and bootstrap studio perquisites are all included at the top of the document, rather than the bottom? This is making my JQuery unusable.

Here is what the bottom of my document looks like right now. This is generated automatically by bootstrap studio:

<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bs-animation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script>
<script src="/morphext.min.js"></script>
<script id="bs-live-reload" data-sseport="53013" data-lastchange="1487896127285" src="/js/livereload.js"></script>
</body>
</html>

I would like Bootstrap Studio to instead, include these prerequisites before </head>

Thanks in advance :)

2

Sorry, I just realized it is best practice to include these things where Bootstrap Studio does. I also realized that it automatically includes the scripts loaded into the studio. This isn't even an issue, my apologies!

3

JS is loaded at the bottom of pages to improve page load speed and is a default feature of this app.

4

Okay, we understood it. JS at the bottom. But what about custom code? If I want to write some JS inside it? I cannot use JQuery and my own functions declared in my script.js.

It would be good to have a second 'Custom code JS', which would be automatically the last inserted script together with the other scripts after export, regardless if I placed it to the top. Then I could insert some JS codes where I want (if I want to place it to a logically better place for me) and I could use JQ and other scripts too.

5

Make a js file Chris, right click the Javascript category in the list and choose create new and make one. Or create it outside in your favorite editor and import it. Works the same as any other JS file will, and you can then reference it accordingly. You will then need to right click the Javascript category again and choose the option to reorder them. It won't show the correct order in the list on the right, but they will be ordered correctly when the site is exported, and it will use them correctly while you are building your site. You can do this for both JS and CSS.

6

It's not technically a bug, but a feature oversight. I have no idea why you would want to load scripts at the bottom of the page always. You have to make two requests to load jQuery now instead of one. I don't see how that helps with load time.

7

You may include your custom scripts by adding a code snippet like

<script src="/myjs.js"></script>

  • HEAD CONTENT - Section of BS-Project
  • in an "Custom Code" Component (Edit HTML) right after the <body> Tag - with removed <div> Tags (you may also set it to display:none or "visibility:hidden" - which does not make visible effekt if <div> is remvoved and only <script> is included.

This is sometimes necessary to declare global variables or to trigger events right from the start of loading the webpage like browser-propertie or os-properties dependend actions

as eventhandler for fully loaded page - which is best placed in the beginning and calling an global "onSiteLoaded()" Function AFTER complete Loading, which is then initialiszing elements and else in the correct way by calling other Functions or setting Styles and Attributes.

You may even load additional css or js files into hidden elements or the Shadow-DOM.

Ralph

8

Jquery is added automatically with the export, there is no need to ad another unless you have a specific situation (element that needs a different version than the one BSS includes) which then needs some work arounds. Jquery shows up at the bottom and has no need to be added to the top at all, hence why you’re thinking it’s going to load it 2 times, of course it is if you add it to the top too. It’s default scripts that are automatic with export and automatically added to the bottom as expected.

IF you need to add some other scripts using Custom Code, you can do so by creating a file in the JavaScript section and then adding the scripts to it, or you can create a custom JS file outside of the app and import it.

YOU DO NOT need to edit the HEAD for these files. If you create a custom JS file just import it or edit it in BSS, then just right click over JavaScript section in files tree (bottom right) and choose Include Order and reorder the custom script so it’s in the proper order. No code needed in the HEAD for that at all.

Hope that helps!

9

How would you remove it altogether if you don't use any jquery scripts?

10

The current version of Bootstrap 4.5 requires jquery for certain plugins to work in Bootstrap 4.5.

Alerts for dismissing Buttons for toggling states and checkbox/radio functionality Carousel for all slide behaviors, controls, and indicators Collapse for toggling visibility of content Dropdowns for displaying and positioning (also requires Popper.js) Modals for displaying, positioning, and scroll behavior Navbar for extending our Collapse plugin to implement responsive behavior Tooltips and popovers for displaying and positioning (also requires Popper.js) Scrollspy for scroll behavior and navigation updates

If you remove it, you will not be able to use these components.

Bootstrap 5 (currently in Alpha testing) is completely rewrote to use only all javascript so jquery will no longer be a requirement. I would guess that is a least a year away from being fully developed.

If you were only using the Bootstrap 4.5 css and none of the plugins then you would have to use an export script with a html parser to rebuild the pages easily such as beautiful soup.