How can we include JS sources BEFORE body content?

I am having a big issue with not being able to include JS before the content. Instead BSS naturally puts it after the body’s content.

I tried putting it in the Head section under index.html > Page Properties, however, then I must disable it either via visibility or Right-clicking the JS in navigation and clicking Disable. Otherwise I get import errors in the browser about doubly declaring some things - because the JS would otherwise be included twice.

On the other hand, with it disabled, I can’t preview the page because nothing is put into “/assets/js” wherever that might be for previewing; i.e. nothing is put in there with them disabled for invisible on the page.

So as you can see, I have a major conundrum that can best be solved by letting us include the JS BEFORE the body’s content…

Annoying, has anyone fixed this?

Forgot to mention, I need it before the body, because some script runs that was originally placed in the body of the document. It calls something included in the JS files.

I’m confused. If you’re manually adding your JS using the Page Properties, then it will appear in the head section, before the body content. What specifically is this JS you’re adding that is causing you to get import errors? Are you adding code that is already included in bootstrap.min.js ?

You could add a custom code block right after the Body element in the Overview panel, and then put your JS there. It will then be before everything else in the body. Would that work?

1 Like

Create a dummy.html page and set the script to visibility on that page only. That will remove it from the index.html bottom (visibility off) but will still be available to link to if you paste the script tag in the head section. It has to export it…cause its being used.

1 Like

Code ninja, I wish that would work, but I think then the Preview doesn’t know where to find the included JS. So would have to export first.

I’m actually going to quit BSS for now in favor of all-code + Django helper libs. It’s not just because of this, it’s just too hard to integrate other JS apps into it or to get it to play nicely with Django crispy forms. Etc. Not enough support for integrating with other tools. Coding BS by hand will be 10x harder, but we’ll just keep it simple I guess.

Okay, I might not quit so easily. I think I can go without the Preview and just preview as it’s running in Django. So I’ll have the Javascripts already resident in the Django project’s static files. What I want is to hack an existing https://q.uiver.app index.html into a BSS page. So I have to include things piece-wise of course. I will try importing it though

If the JS is added via a custom code block, then it should get executed when the page loads in the browser preview, just like any other inline code (of course, if you’re using jQuery, your code won’t run in Bootstrap 5 unless you include the library in the Settings.)

1 Like