CBWIRE
InstallSource CodeIssuesSupport
v3.x
v3.x
  • Introduction
  • Getting Started
  • Configuration
  • How It Works
  • Release History
    • What's New With 3.2
    • What's New With 3.1
    • What's New With 3.0
    • What's New With 2.2
    • What's New With 2.1
    • What's New With 2.0
  • Examples
    • Contact Form
    • Multi-select Input
    • File Upload
  • Resources
  • The Essentials
    • Components
    • Templates
    • Data Properties
    • Computed Properties
    • Actions
    • Events
    • Lifecycle Methods
    • JavaScript
    • Testing
  • Wire Features
    • Validation
    • File Uploads
    • Query String
    • Redirecting
    • WireBox
  • Template Features
    • Directives
    • Loading States
    • Polling
    • Prefetching
    • Offline State
    • Defer Loading
    • Dirty State
  • Integrations
    • ContentBox CMS
    • SPAs with Turbo
    • AlpineJS
Powered by GitBook
On this page
  • Inline JavaScript
  • Lifecycle Hooks
  • Component Interaction
  1. The Essentials

JavaScript

Call Actions, emit and listen for Events, and more - all from Vanilla JavaScript.

PreviousLifecycle MethodsNextTesting

Last updated 1 year ago

CBWIRE provides a handful of JavaScript hooks and functionality you can use as needed.

Inline JavaScript

We recommend you use for most of your JavaScript needs, but you can use <script> tags directly inside your components.

<div>
    <!--- Your component's template --->
    <script>
        document.addEventListener('livewire:load', function () {
            // Your JS here.
        })
    </script>
</div>

Your scripts will be run only once upon the first render of the component. If you need to run a JavaScript function later, you can emit the from the component and listen to it in JavaScript.

Lifecycle Hooks

CBWIRE allows you to execute JavaScript during various events.

Hook
Description

component.initialized

Called when a component has been initialized on the page by CBWIRE

element.initialized

Called when CBWIRE initializes an individual element

element.updating

Called before CBWIRE updates an element during its DOM-diffing cycle after a network roundtrip

element.updated

Called after CBWIRE updates an element during its DOM-diffing cycle after a network roundtrip

element.removed

Called after CBWIRE removes an element during its DOM-diffing cycle

message.sent

Called when a CBWIRE update triggers a message sent to the server via AJAX

message.failed

Called if the message send fails for some reason

message.received

Called when a message has finished its roundtrip, but before CBWIRE updates the DOM

message.processed

Called after CBWIRE processes all side effects (including DOM-diffing) from a message

<cfoutput>
    <div>
        <!-- HTML goes here -->
        <script>
            document.addEventListener("DOMContentLoaded", () => {
                cbwire.hook('component.initialized', (wire) => {})
                cbwire.hook('element.initialized', (el, wire) => {})
                cbwire.hook('element.updating', (fromEl, toEl, wire) => {})
                cbwire.hook('element.updated', (el, wire) => {})
                cbwire.hook('element.removed', (el, wire) => {})
                cbwire.hook('message.sent', (message, wire) => {})
                cbwire.hook('message.failed', (message, wire) => {})
                cbwire.hook('message.received', (message, wire) => {})
                cbwire.hook('message.processed', (message, wire) => {})
            });
        </script>
    </div>
</cfoutput>

<cfscript>
    <!--- Component definition goes here --->
</cfscript>

Component Interaction

You can interact with your component's actions, set data properties, and more, using cbwire.find. Once you have a reference to the component, you can use the methods below.

<cfoutput>
    <div>
        <!-- HTML goes here -->
        <script>
            document.addEventListener("livewire:load", function() {
                // _id contains the id of our wire
                var component = cbwire.find('#_id#');
                // gets the value of a data property called 'count'
                var count = component.count;
                // updates the values of a data property
                component.count = 5;
                // calls the increment action on our wire
                component.increment();          
                // calls the addTask action and passes parameters   
                component.addTask( 'someTask' ); 
                // same as increment call above
                component.call( 'increment' ); 
                // On someEvent, console log
                component.on( 'someEvent', function() {
                    console.log('Got someEvent');
                } );
                // emits someEvent and pass parameters
                component.emit('someEvent', 'foo', 'bar');
            } );
        </script>
    </div>
</cfoutput>
AlpineJS
Event