Hello,
We’re introducing a breaking change that we recommend you migrate to. We’re now running custom HTML headers (both at the page level and at the app level) after other Bubble assets, which is a safer approach (so far, a syntax error in the HTML could break entirely the page). This should only impact apps where the custom HTML headers need to run before Bubble’s core code, which is highly not recommend, as we could introduce a change that breaks things without warning.
Thanks for this.
For example, what is this used for?
I think some ‘splaining needs to go on here for us non-developers.
I think it basically means that what you stick in your page header will be loaded after everything else. That’s the field you see when you click on the page and the property window opens “Page HTML header” so for example, you might stick in a JavaScript link or maybe some JavaScript which will be loaded after bubbles core code that runs your app.
For non-developers, this has nothing to do with any sort of “header” you design on the page. If you’ve never added any code or any snippets in the “Page HTML Header” field, you can likely ignore this.
Ahh. Thanks. It’s something I’ve apparently not done yet…and I’ve built a pretty complex app so far. Lol. Still so much to learn.
Yes it’s only for people that add custom JS to their pages. Also, the test when you upgrade is quite simple, if it doesn’t go well the entire page will likely break. So if you upgrade and can load the pages, you’re good to go.
and if it doesn’t work your options are?
Honestly, look at the code that you’re adding to the page and figure out what it does. It’s qyite surprising though, how does it break?
i took the < > from the code for this post they were not showing …
script src=“https://code.highcharts.com/modules/data.js”></script
script src=“https://code.highcharts.com/modules/exporting.js”></script
script src=“https://code.highcharts.com/modules/series-label.js”></script
script src=“https://code.highcharts.com/highcharts-more.js”></script
script src=“https://code.highcharts.com/modules/solid-gauge.js”></script
script src=“https://code.jquery.com/jquery-3.1.1.min.js”></script
with these in the header version 2 works great. with them on version 3, just a blank white page, with the date and time picker date only - no formatting no border. Also debugger is blank too. Take them out, page renders but charts do not.
You don’t want to add script src=“https://code.jquery.com/jquery-3.1.1.min.js”>, Bubble already uses jQuery and adds it.
ok took that out, and put the others back in the header and still that blank page : (
my bad, i had that in there 2x that did the trick thanks Emmanuel - i’d be lying if i said i wasn’t stressing out a bit over that change…
I’m running a D3.js script in my header so I can run visualizations within HTML windows on my page with the Bubble data.
<!script src=“https://d3js.org/d3.v4.min.js”></script!> (except without the “!”)
This script needs to load first. Is the header still the place this script needs to go in order to allow me to continue to run d3.js code on my page? If not, then where should I put the code.
Fingers crossed on your answer. I really don’t want to have to figure out how to integrate D3 again. It took weeks to figure out and test the current setup (Big learning for me without examples to follow. Passing bubble data into the HTML window and then running that data in D3.js) and we are about to launch our app big time over the coming months.
Why does it need to run before Bubble even starts downloading bubble assets? What is the error?
Can you add the script to the html elements instead?
I guess I have to accept the version upgrade and fingers crossed. Okay. Thought you might have some insight before I accepted the upgrade.
Well that’s why you can revert, testing is possible and you can revert if it broke something
HI Sam, I am not running this particular script but similar and if you are just referring to that src link then it should be fine! But, @emmanuel is right you have to test to see if it effects it and there are options. There are always options, even though they may not always be pretty.
The difficulty Bubble has is that they need to look after the core code to make sure our apps are running like a well tuned engine, and they just don’t have the resources to consider every possible script that may be used - there are literally thousands! Unless the script tells you that you must explicitly load this script into the browser before anything else, then you should be good to go!
Hope it helps!
After updating this recent change ended up breaking my app’s header. Icons and a logo image are not showing anymore.
I’m guessing it has something to do with this code:
Any advice?
