CBWIRE
InstallSource CodeIssuesSupport
v2.x
v2.x
  • Introduction
  • Release History
    • What's New With 2.2
    • What's New With 2.1
    • What's New With 2.0
  • Getting Started
  • Examples
  • Essentials
    • Configuration
    • Wires
    • Data Properties
    • Computed Properties
      • Computed Properties ( Proxied )
    • Actions
    • Templates
    • Events & Listeners
    • Wire Lifecycle
    • JavaScript
    • Testing
  • Wire Features
    • Validation
    • File Uploads
    • Query String
    • Redirecting
    • Dependency Injection
  • Template Features
    • Directives
    • Loading States
    • Polling
    • Prefetching
    • Offline State
    • Defer Loading
    • Dirty State
  • Integrations
    • ContentBox CMS
    • Turbo
    • AlpineJS
    • Inline Scripts
Powered by GitBook
On this page
  • Lifecycle Hooks
  • Interacting With Wires

Was this helpful?

Export as PDF
  1. Essentials

JavaScript

Seamlessly connect between the front-end and your server back-end using JavaScript and CFML.

Lifecycle Hooks

CBWIRE gives you the opportunity to execute JavaScript during various events.

Hook
Description

component.initialized

element.initialized

Called when Livewire initializes an individual element

element.updating

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

element.updated

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

element.removed

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

message.sent

Called when a Livewire 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 roudtrip, but before Livewire updates the DOM

message.processed

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

<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>

Interacting With Wires

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

Last updated 2 years ago

Was this helpful?

Called when a has been initialized on the page by Livewire

You can interact with your , calling , setting , and more, using cbwire.find from within your . Once you have a reference to the Wire, you can interact with it using the methods below.

Wires
Actions
Data Properties
Wire Template
Wire