Run JavaScript AFTER page loads

Questions
1

I added an HTML block to my page, to run some JavaScript there.

The JavaScript logic won’t work unless the dynamic elements on the page are populated, in this case the Full Calendar.

My code snippet works from the JavaScript console, after the page is fully loaded.

In the console I see the “page is loaded” message when the page is done. All my JS tricks appear to be running before that.

FYI, I’m a complete newbie to Bubble.

thanks,
Harry

2

wrap your javascript code with this:

if(document.readyState === 'complete') {
    // good to go! Put your code here.
}
3

Thanks for the rapid reply… that doesn’t work.

I put a console.log in that block, and it runs BEFORE I see page is loaded message in the console.

4

Seeing page is loaded does not mean that your script didn’t also wait until the page was loaded.?
You can also try jquery method if you have jquery running…

https://learn.jquery.com/using-jquery-core/document-ready/

1 Like
5

The JS commands execute the console.log in a particular, repeatable order. The log entries are created by the order in which the console.log lines are encountered in the code.

So the last entry I see is

page is loaded

and all other logging output occurs before that. That means that my custom JS is always running before the page is fully loaded.

I have tried the jQuery conditions

if(document.readyState === 'complete') { ...

and similar

$( document ).ready(function() { ...

and the code contained in those blocks always run before the page is fully loaded.

6

I have no idea how that can be. Page loaded means that all resources have loaded… in any case, you could put a timeout on the script to wait some time before running the script (this is quite hacky though).

7

FYI everyone… in the end I used the Bubble timer approach, similar to what has been described in other threads. I set it up as a “one-shot” so the timer only fires once because of the condition for running it is a flag that gets flipped. I also discovered the event for When page is fully loaded, so that’s part of the solution too.

In this case I can see in the JavaScript console that when my timer runs console.log the last time before stopping, it definitely occurs after the Bubble page is loaded event is logged.

So based on a counter that gets incremented from 0 to 1, which is connected with the timer, I’m able to flip the active JavaScript snippet in a Bubble HTML object on the page. That HTML then does the task I’ve been trying to implement all along, which is run a jQuery command to add hover (mouseover) functionality for Full Calendar events.

I hope that Bubble implements event hover natively at some point, since it’s available in Full Calendar when run outside of Bubble.

  • Harry
1 Like
8

Have you tried using the Toolbox plugin (https://bubble.io/plugin/toolbox-1488796042609x768734193128308700)? It can fire a javascript event from the workflow editor, so you can just set that to a “Page is loaded” event

1 Like
9

Thanks for the tip! I wasn’t previously using Toolbox because I didn’t know about it. I installed that and triggered some JS after a “When” for entire page loaded. Here is my JS…

console.log('Entire page loaded 1, run JS');
setTimeout(function() {
      console.log('inside setTimeout');
}, 500); 
console.log('Entire page loaded 2, run JS');

… and the resulting log output in Chrome:

toolbox-snap1

Note that I had “Asynchronous” unchecked in this case, implying my code should be running synchronously (but with what, I don’t know).

So in this case people could try to set some flag from inside setTimeout to really have that run after page is loaded occurs.

  • Harry
10

Its such a mysterious checkbox … just kidding! Synchronously with respect to the workflow steps, i.e. the next step in the workflow will wait for the javascript to finish.

I’ve found some inconsistencies between “Page is Loaded” event, “Entire page loaded” value, and the console log “page is loaded”.

1 Like
11

jQuery: onload() Vs. $.ready()?

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

The key difference between $(document).ready() and $(window).load() event is that the code included inside onload function will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the $(document).ready() event fires before all images,iframes etc. are loaded, but after the whole DOM itself is ready.