Action with AlpineJS
My issue is that when I click on the empty part of the widget its like I pressed the action. In other words, the action is supposed to do something, and whether I press the action or the empty parts of the widget, its the same. Any idea why? Im thinking it has something to do with the <div> but I dont know how else to structure it.
<x-filament-widgets::widget>
<div wire:poll="stats" x-data="{
isPlaying: false,
playRadio: function() {
const mediaPlayer = this.$refs.radioPlayer; // Use Alpine.js $refs
if (mediaPlayer) {
mediaPlayer.play()
.catch(error => {
// Handle the error (e.g., display a message to the user)
console.error('Error playing audio:', error);
});
}
}
}">
<!-- Go to the radio page, using inspect element find the audio file -->
<audio id="radioPlayer" x-ref="radioPlayer">
<source src="https://live.akous.gr/akousbreeze" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<x-filament::section>
<div wire:poll="stats">
Song: {{ $this->stats()['songTitle'] }}
</div>
<!-- Trigger the action when the section is clicked -->
<div x-on:click="playRadio()">
{{ $this->testAction }}
<x-filament-actions::modals />
<!-- Remove $this->testAction expression -->
</div>
</x-filament::section>
</div>
</x-filament-widgets::widget><x-filament-widgets::widget>
<div wire:poll="stats" x-data="{
isPlaying: false,
playRadio: function() {
const mediaPlayer = this.$refs.radioPlayer; // Use Alpine.js $refs
if (mediaPlayer) {
mediaPlayer.play()
.catch(error => {
// Handle the error (e.g., display a message to the user)
console.error('Error playing audio:', error);
});
}
}
}">
<!-- Go to the radio page, using inspect element find the audio file -->
<audio id="radioPlayer" x-ref="radioPlayer">
<source src="https://live.akous.gr/akousbreeze" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<x-filament::section>
<div wire:poll="stats">
Song: {{ $this->stats()['songTitle'] }}
</div>
<!-- Trigger the action when the section is clicked -->
<div x-on:click="playRadio()">
{{ $this->testAction }}
<x-filament-actions::modals />
<!-- Remove $this->testAction expression -->
</div>
</x-filament::section>
</div>
</x-filament-widgets::widget>