CorvidReference

Wix Editor Elements ($w)

The $w namespace contains everything you need in order to work with your site's components. It contains all of the UI elements, nodes, and events that make up your site. It also includes the $w(), onReady(), and at() functions.

The APIs in $w can only be used in front-end code.

You do not need to import $w.

Table of Contents

FUNCTIONS

?
Perform actions on an object.
$w( )Selects and returns elements from a page.
at( )Gets a selector function for a specific context.
onReady( )Sets the function that runs when all the page elements have finished loading.

Related Content

FAQ

    Can I use $w in backend code?
    Elements in a repeater have the same ID for each repeater item. So how do I select an element in a specific repeater item?
    Why are my $w() selections not working?

$w( )

Selects and returns elements from a page.

Description

The $w() function selects single or multiple elements by ID or type.

To select by ID, pass a selector string with the hash symbol (#) followed by the ID of the item you want to select (e.g. "#myElement"). The function returns the selected element object.

To select by type, pass a selector string with the name of the type without the preceding # (e.g. "Button"). The function returns an array of the selected element objects. An array is returned even if one or no elements are selected.

To select using multiple selectors, pass a selector string with multiple selectors separated by commas. The selectors in the comma-separated string can be ID selectors, type selectors, or a mixture of the two. The function returns an array of the selected element objects. An array is returned even if one or no elements are selected. If two or more selectors select the same element, it's still returned only once in the array.

Syntax

function $w(selector: string): Element | Array<Element>
PARAMETERS
?
Values that you pass to a function.
selector
string
A selector or multiple comma-separated selectors.
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Element | Array<Element>
A single selected element or an array of selected elements.

Examples

Select an element using its ID

let myElement = $w("#myElement");

let elementType = myElement.type; // "$w.Type"

Select elements by type

let typeElements = $w("Type");

let firstOfType = typeElements[0];

Select all the images on the page

let imageElements = $w("Image");

let firstImage = imageElements[0];

Select elements using multiple selectors

let selected = $w("#myElement1, #myElement3, Type");

Hide all the page's images

$w("Image").hide();

at( )

Gets a selector function for a specific context.

Description

The at() function returns a scoped selector where the scope is based on the context property. Usually, you will use at() in a event handler that handles events fired on an element contained in a repeater to get a selector with repeated item scope. The returned function selects the elements from the same repeater item where the event was fired.

For example, suppose we have a repeater where each item contains an image and a text element. Here, when an image is clicked, the value of the text element in the same repeated item is changed to "Selected". All the other text elements in the other repeated items are not affected.

 $w.onReady( function () {
   $w("#myRepeatedImage").onClick( (event, $w) => {
     let $item = $w.at(event.context)
     $item("#myRepeatedText").text = "Selected";
   } );
 } );

Syntax

function at(context: EventContext): $w
PARAMETERS
?
Values that you pass to a function.
context
An event context.
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
A selector function for the given context.

onReady( )

Sets the function that runs when all the page elements have finished loading.

Description

Use the onReady() function for code you want to run before the user starts interacting with your page.

The following code should be placed inside the onReady() event handler:

  • Initialization of element properties: Example: setting a text element's initial text value.
  • Function calls on elements to set their initial state: Example: disabling a button.
  • Dynamic event handlers that you want bound when the page loads: Example: setting an event handler to be called when the mouse pointer enters an element.

The following code should not be placed inside the onReady() event handler:

  • Static event handlers that are wired using the Properties panel in the Editor, are not placed inside the onReady() event handler.
  • Avoid placing await inside async onReady() event handlers. It is better to queue asynchronus actions, such as with setTimeout, or use then().
  • Do not return anything from the onReady() event handler.

The onReady() function in the Site tab is called before the onReady() function in the Page tab.

The onReady() event handler may be called twice during the page rendering process, once server-side and once client-side.

Note

Because onReady() code may be run twice, you need to be aware that if your onReady() code causes a side effect, such as inserting an item into a collection, that side effect might happen twice. To avoid a side effect from happening twice, use the wixWindow.rendering.env to determine where your code is being executed.

See Also

$w( )

Syntax

function onReady(initFunction: ReadyHandler): void
callback ReadyHandler(): Promise<void>
PARAMETERS
?
Values that you pass to a function.
initFunction
function()
The name of the function or the function expression to run when the page has finished loading.

Examples

Run code in an anonymous function when the page loads

$w.onReady( function() {
  let pageTitle = $w("#page1").title;
} );

Wait for a Promise to resolve

This example demonstrates the technique of returning a Promise so that the page doesn't load until the Promise resolves. Here, we wait for the query to finish and populate a table before displaying the page to users.

import wixData from 'wix-data';

$w.onReady(function () {
  return wixData.query("myCollection")
    .find()
    .then( (results) => {
      $w("#myTable").rows = results.items;
    } );
} );

Where to place code

This example demonstrates which code should be placed inside the onReady() event handler.

// Import statement go at the top of your code, outside of onReady()
import wixWindow from 'wix-window';

// Initialization statements without $w() don't need to be in onReady()
let hideCount = 0;

// Code you want to run when the page loads
$w.onReady(function () {
  console.log(`Device viewing site is: ${wixWindow.formFactor}`);

  // Initialize an element property
  $w("#myTextElement").text = "Hover over to hide";

  // Call a function on an element to set its initial state
  $w("#buttonReset").disable();

  // Dynamic event handler to be bound when the page loads
  $w("#myTextElement").onMouseIn( (event) => {
    event.target.hide();
    console.log(`Hidden ${++hideCount} times`);
    $w("#buttonReset").enable();
  } );
} );

// Static event handler
export function buttonReset_onClick(event) {
  $w("#myTextElement").show();
  $w("#buttonReset").disable();
}

Use the Rendering API to avoid inserting an item twice

This example demonstrates how to use the env property of the Rendering API to make sure an item is inserted into a collection only once.

import wixData from 'wix-data';
import wixWindow from 'wix-window';

let toInsert = {
  "field1": "Some value",
  "field2": "Some other value"
};

$w.onReady(function () {
  if (wixWindow.rendering.env === "browser") {
    return wixData.insert("myCollection", toInsert)
      .then( (item) => {
        $w("#myText").text = item.title;
      } );
  }
} );