New breaking change - Custom html header

Announcements
23

have a similar issue. Two of my pages use money.js and turn blank on this version.

> 
> <script src="https://cdnjs.cloudflare.com/ajax/libs/money.js/0.2.0/money.min.js"></script>
> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
> <script type="text/javascript">
>     // Load exchange rates data via AJAX:
>     $.getJSON(
>     	// NB: using Open Exchange Rates here, but you can use any source!
>         'https://openexchangerates.org/api/latest.json?app_id=90c7bc76dd254b82bf3ad5897701cb00',
>         function(data) {
>             // Check money.js has finished loading:
>             if ( typeof fx !== "undefined" && fx.rates ) {
>                 fx.rates = data.rates;
>                 fx.base = data.base;
>             } else {
>                 // If not, apply to fxSetup global:
>                 var fxSetup = {
>                     rates : data.rates,
>                     base : data.base
>                 }
>             }
>         }
>     );
> </script>

If I remove the jquery script the page will load with the new version. If I don’t I get a completely white page.

However, if I remove that script the currency conversion doesn’t work anymore so it looks like it serves a purpose…

Any ideas why I can’t just leave it out?

24

It’s hard to tell what money.min.js is doing, but what is certain is that overwriting jquery with another version is very bad and can break quite something on Bubble, so it’s very recommended to remove jquery here…

25

Money.js is for currency conversion. It needs jquery too.

http://openexchangerates.github.io/money.js/

However, i dont understand that it breaks the currency conversion when i remove the jquery script on the page. So, i can remove it but I cant use it then.

Perhaps better to send a separate email?

26

If it needs jquery it probably should be loaded after it, and since Bubble already loads jquery it’ll be there if you upgrade. If it breaks though, you’ll need to get in the code and see why it breaks.

27

I’ll do a couple more tests but the fact that it doesnt seem to pick up the Bubble jquery is a bit weird…

28

So this doesn’t work:

image
image472×791 56.6 KB

Removing the jquery script will break the page in the new version.

Now this works: load the money.js script in the header of the page. Then run a custom code block when the page is loaded to load the exchange rates.

What this tells me is that the Bubble jquery script loads after the header script but before the page is fully loaded. Whereas I thought it loaded before the header script. But I can be wrong in my assessment…

So I guess the takeaway here is that if you find yourself breaking pages (blank screens, no or little content loaded) you might want to move some of the scripts in a custom code block and run it ‘when page is loaded’.

1 Like
29

Hi - I wanted to share an anomaly I found using the Page HTML Header which may help others.

I was trying to get Drift working on an app by pasting the Drift JavaScript code snippet into my Index page’s Page HTML Header but it wasn’t working. I reached out to @dan1 because I know he uses Drift on LearnTo. In talking with him, he has his Drift JS snippet in his HTML Headers. As an experiment, I removed the JS snippet from the HTML Header and put an HTML Element on my Index page with the JS snippet. Drift worked!

But it didn’t make sense why I couldn’t use the HTML Header like Dan.

Turns out the HTML Header behaves differently between Bubble’s paid plans and free plans. I’d been using a Bubble free plan with Drift.

But when I put the JS snippet in the HTML Header on one of my app’s using a paid plan, it worked.

So for others out there putting JS code in their app, note that you may (or may not) get different behavior for paid vs non-paid plans (I can’t say for certainty that Bubble behaves this way with all JS snippets). If the Page Header doesn’t work, chances are adding an HTML Element will do the trick. But test and verify.

@emmanuel - does this make sense to you that the HTML Header behaves a bit differently between paid and free plans?

@vincent56 - was the issue you were seeing on a paid or free plan?

@dan1 - thanks for going back/forth with me on this!

3 Likes
30

probably that’s the reason instruction on how to use some translation tool with Bubble mention that trick too: http://help.textunited.com/en/articles/1596291-how-to-integrate-translate-publish-multilingual-bubble-apps

31

I was trying to do exactly the same with a new plugin called Metomic which opens a GDPR widget on your webpage. Putting the snippet into the page level html header doesn’t work. But putting it into the HTML element doesn’t work either.

I have problems with the HTML element in general. I had tried to embed Landbot, was able to see it in the editor but not in the preview or on the actual page.

@emmanuel I’m on a free plan. Do I need to upgrade to make embeds like Landbot and Metomic work on a) the page level HTML header and b) on the HTML element? If yes, how do I know that this is the only reason and that it will for sure work when I upgrade?

32

Adding HTML in the header is indeed on a paid plan, HTML elements should work, but that may be happening too late on the page.

33

Ok thank you Emmanuel. I had the impression that HTML in the header on the page level should be working on the free plan, just not on the site level, and was wondering. But this makes sense now.