$w.onReady() :: a guide for the perplexed

In order to use code with your Wix web page elements, you need to ensure that the page is loaded and ready. Why? Well, the server sends a whole bunch of stuff (HTML, CSS, and various scripts) to the browser to have the page rendered for the user to view. While all this is magically happening, the page elements are unavailable - they can’t be accessed by code. The page isn’t ready. Think of it like this…

It’s a day off and I’m having my coffee in the backyard, enjoying the view and the morning air. In the background a constant murmur, slightly annoying but I ignore it. Going inside to wash out my coffee mug, the wife utters, “OK, so you really gotta get that stuff done today before it rains.”

I shake my head, “Huh! Say what?” I think to myself that perhaps I didn’t have enough coffee.

"I’ve been telling you”, the wife continues, "for the last 15 minutes what needs to be done… clean out the shed, rake the leaves, clean out the gutters. Didn’t you hear a word I said?”

“Sorry sweetie, I was drinking my coffee and enjoying the view. Now I’m ready, what do you need?”

So then, after a deep sigh and a few choice words, the wife (once again) gives me my chores in a language known as WifeScript™.  WifeScript, much like JavaScript, is a procedural language. JavaScript has commands, WifeScript has commands (oh boy does it have commands). Javascript has keywords, WifeScript has choice words. And WifeScript, much like JavaScript, is useless if the target for the procedure is not ready.

Let's take a look at a couple of parallel scenarios:

My day

Let's say that we can express my day with a code file named my-day.ws (ws of course being the extension for a WifeScript file). Can you guess what’s wrong with the following pseudo code?

chores.forEach(function(chore) {
    perform(chore, grudgingly);
});

If you said that I wasn’t ready so nothing happened, then take a beer out of petty cash - you’re right.

What that means is that we need to fix the my-day.ws file by checking for when I’m ready.

me.onReady( function () {
   chores.forEach(function(chore) {
      perform(chore, grudgingly);
      drink_beer();
   });
});

The onReady() function is called an event handler. What event does it handle? Well, it triggers when I'm ready - and that is a real event.

Before I'm ready, it's impossible to access my brain cells using WifeScript.

The drink_beer() command is definitely not part of WifeScript. It’s a hack.

Wix Web page

A web page works much the same way. Let’s look at a code file for a Wix web page:

$w(“#greeting”).text = ‘Hello world”;

Seems simple enough - right? Well, very simple indeed, since nothing happened. Why? The page wasn’t ready, and as a result, the text element #greeting was also not yet available.

So, much like my day, we need to fix the code file like this:

$w.onReady( function () {
    $w(“#greeting”).text = “Hello world”.
});

The above code successfully welcomed the visitor of the web page with a “Hello world” greeting, in a text element called (appropriately enough) #greeting.

The onReady() function is called an event handler. What event does it handle? It handles the event of the page being ready.

Before the page is ready, it’s impossible to access the screen elements using JavaScript.

A web page doesn't drink beer.

Hopefully this has shed some light on what exactly the onReady() function is, how it’s used, and why. For more information on the page's onReady() event handler, refer to the documentation. For more information on programming with Velo, see the documentation. For more information on WifeScript, ask your wife. If you are a wife, then you know. And you won't tell.

#WifeScript #onReady #Velo