JavaScript

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

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

Inline JavaScript

We recommend you use AlpineJS 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 Event 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>