If I use jQuery, the script is loaded at the end of the </BODY> tag. This seems to make it impossible to use jQuery code between <HEAD> ... </HEAD> since the jQuery object is not defined when the script is executed. Any idea how to fix this?
Wouldn't it make more sense to add the script loading somewhere very early in the loading pipeline?
Javascript, unless a particular script absolutely needs it in a specific area, always goes to the bottom now. You will need to just rearrange them in the app (right click over the word Javascript in the Design pane, and choose "Include Order") so that they all play nice together. The first two are not movable, but all else is. Same concept for multiple CSS files.
The re-ordering doesn't solve the problem.
The problem is that the HEADER script is executed before the BODY script jQuery is loaded. Re-ordering in the BODY section is useless.
If this stays as it is, it's impossible to use jQuery code in the HEADER (or you included it on your own, which contradicts the BSS idea).
Believe there is an option to add your own code into the header tag on export or possibly page properties settings. Not at my laptop so can't check it I think that's the solution here
The problem is this:
<html>
<head>
....
<script with jQuery code>
</head>
<body>
<script src="/js/jquery-3.1.1.min.js"></script>
....
</body>
</html>
Ok so you have issues with where BSS put the script - I dobut that will change anytime soon as no has stated, it's considered best practice to have js load at bottom of page.
But.... would you not manually code a java script or insert a cdn link in the solution that I suggested.
The only other alternative is to tweak your code after exporting
Your self made jQuery script would go after the jquery.js is called at the end of the BODY tag.
If it's not a
function someFunctionName () {
// do something ...
}
then you should put your code inside a document.ready statement such as
$(function(){
// do something ...
$(".clickThis").each(function(){
enter code here
});
someFunctionName();
});
This should ensure that your script will execute when jQuery is loaded and ready.
Saj
I think you make a valid point Robert, I just tweak it after export. It's considered better performance by putting Jquery in the body now, but it would be good to have options.
The whole thing came up as there is the header feature in BSS to get code on every page. Hence I thought, than code that I need on every page should go into the header. Now I need to include my JS file on every page, which works too but IMO is a bit contradiction to the announced header feature.
Robert, I still use a lot of JavaScript in the head, but I'm a dinosaur ;-) I use BSS as a prototype, although I know there are people who have created full web pages, but there's stuff from yesteryear that I just do by habit really. There are as well things that can be copied and pasted that need to go into the head, so yeah it would be a useful feature to have, but I would still do things on a external editor as well.
You are aware that you have the ability to add things to the head are you not? The only problem you'll have is with previewing your site if you use relative paths. If you use a full absolute URL, then you will be able to preview as well, just upload your files to the location they will be when the site is complete.
Right click the page name and choose Properties. There's a tab there for adding things to the Head, and that includes javascript/jquery, css, etc. Whatever you put there you put in as code same as you would in the head when coding it normally.
Just DON'T import those files to the app and you'll be all set.
P.S. This may cause issues with the jquery and such in the footer so you'll need to work that part out using Saj's method to override what comes first, but this feature has been there for quite some time to be able to add things to the Head of your pages. It is also page specific.
@ Robert: I understand that sometimes you may need something to load before the rest of the page, hence my previous post to say how to do this. Also the way it's set up is that anything added to the Head of the page is only on that page. Anything you import to the CSS or Javascript sections of the app is included in all pages. (We do have hopes that they will add features here that were requested so that we can pick and choose which files go to which pages). Images are not on every page, just available for every page, and all exported regardless of whether they have been included in a page or not. Not sure where the contradiction is, but this is how it works. Hope that helps :)
For everyone else, using these features in the app alleviates the need to edit after export, and that gives you more opportunity to use the app for future edits easier. Not saying that there may not be instances where there will be conflicts with the the way it's set up, just saying that there should be no need to edit most things in the head after export if they are setup correctly in the app. Good luck with it all! :)
If I have a generator available, I prefer to use it as much as possible and avoid tool-chain fragmentation. Things just become fragile pretty easy.
You are aware that you have the ability to add things to the head are you not?
Sure, that's why I'm asking about the "missing" behavior. And I don't think the way to go is to add jQuery myself in the header and try to get around it in the body... However, I have a solution so no big deal. IMO BSS ss just not that flexible as it should be in the "jQuery code in the header" case.
Also the way it’s set up is that anything added to the Head of the page is only on that page.
I'm talking about the project wide HEADER section, not the page HEADER. IMO the project wide setting is a good place to get stuff included on every page, without having to create to many scripts.
I see now what you're getting at. But you can easily copy and paste the head information from page to page as well. Not the most efficient, but doable and hopefully they will address these things in the future. Don't lose hope, it's still a work in progress and each update has added new features so far since I've started using it.
Another way to get around some of what you're trying to do by adding code to the body instead of the footer (not head code, but within the body itself) is to just include it in a custom code box. That works just as well as anything else and you can put that custom code box within any section you want so you can tie it to whatever code the scripts belong to pretty easily. Where there's a will there's a way, just not always the most efficient is all lol. If we ever get the ability to actually edit the code freehand like you can with Pinegrow, that will be a day to recon with for sure!
Am pretty sure you can include manual code in page properties at a page level AND as a global option - believe that under the export option there is access to a global header.
But you can easily copy and paste the head information from page to page as well.
I prefer a DRY coding style. And copy & paste is bad practice when you need to change it. Hence I like the generator approach.
Am pretty sure you can include manual code in page properties at a page level AND as a global option – believe that under the export option there is access to a global header.
Yes, sure it's possible. That's not the problem. The problem is, that if you want to use jQuery code, jQuery lib needs to be loaded already. Which is not the case for HEADER code, as it's loaded later at the end of BODY.
I guess I don't understand what it is that you need to do with your script that it must be loaded in the HEAD section and can't be put at the end after the jQuery call.
Saj
I guess I don’t understand what it is that you need to do with your script that it must be loaded in the HEAD section and can’t be put at the end after the jQuery call.
One extreme important programming pattern is DRY. Which implies that "cut & paste" is worst practice too. To avoid managing duplicated code and utilize the power of BSS as generator, it makes sense to add code to the HEADER on the project level. With this, the generator takes care of adding it to every page, while I have only one place where the code is managed.
Of course I can add the code to a separate JS file, which I do. But again, this is bad practice too. But now in the other direction. If I only want to add code to one or some pages that doesn't work (to my knowledge) because the JS file gets added to every page. So, you load code that's not used (bad practice), which takes time, might cause problems etc.
IMO there is way to much quick & dirty web-coding anyway, so trying to use best practice patterns. And the tool I use shouldn't be a blocking point in this.
So, to sum it up: