Custom widget JavaScript not working within View
Hi guys, I'm creating custom widget, and loading JavaScript within view. But It's not working!
I tried livewire eventLister as well:
// Run on initial load
document.addEventListener('livewire:load', function () {
initializeWidget();
});
// Run after each Livewire update
document.addEventListener('livewire:update', function () {
initializeWidget();
});
// Run on initial load
document.addEventListener('livewire:load', function () {
initializeWidget();
});
// Run after each Livewire update
document.addEventListener('livewire:update', function () {
initializeWidget();
});
2 Replies
<x-filament-widgets::widget>
<div
x-data="{ initializeWidget() { console.log('initialized!') } }"
x-init="initializeWidget"
>
</div>
</x-filament-widgets::widget>
<x-filament-widgets::widget>
<div
x-data="{ initializeWidget() { console.log('initialized!') } }"
x-init="initializeWidget"
>
</div>
</x-filament-widgets::widget>
Hi, this is my file structure. Am i doing it wrong?
<x-filament-widgets::widget>
<x-filament::section x-data="{ initializeWidget() { console.log('initialized!') } }" x-init="initializeWidget">
... // HTML
</x-filament::section>
<!-- -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
function initializeWidget() {
...
}
// Run on initial load
document.addEventListener('livewire:load', function () {
initializeWidget();
});
// Run after each Livewire update
document.addEventListener('livewire:update', function () {
initializeWidget();
});
</script>
</x-filament-widgets::widget>
<x-filament-widgets::widget>
<x-filament::section x-data="{ initializeWidget() { console.log('initialized!') } }" x-init="initializeWidget">
... // HTML
</x-filament::section>
<!-- -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
function initializeWidget() {
...
}
// Run on initial load
document.addEventListener('livewire:load', function () {
initializeWidget();
});
// Run after each Livewire update
document.addEventListener('livewire:update', function () {
initializeWidget();
});
</script>
</x-filament-widgets::widget>