Comment on page
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.
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.
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>
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>
Last modified 2mo ago