Struggling to find how to trigger a loader
So I want to trigger a loader when I press a toggle button and the state is true. But I cant seem to find anywhere on what the target must be set. Calling a function name doesn't seem to be working, nor a variable name?
4 Replies
what code are you trying?
<div wire:loading wire:target="my function name or php variable"></div>
<div wire:loading wire:target="my function name or php variable"></div>
Difficult to assist without the code, but you could use this example
Toggle::make('my_toggle')
->live()
->hint(new HtmlString('<div wire:loading wire:target="data.my_toggle">loading...</div>'))
Toggle::make('my_toggle')
->live()
->hint(new HtmlString('<div wire:loading wire:target="data.my_toggle">loading...</div>'))
So I've added this:
I have the modal in my view
Was trying to display the loader in the modal before the content loads, but even when I dispatch the modal straight away, it doesn't seem to display the loader
return
Forms\Components\Toggle::make($name)
->label(function () use ($name, $label) {
return $label;
})
->onColor(Color::hex('#38c172'))
->offColor(Color::hex('#D63230'))
->offIcon($offIcon)
->onIcon($onIcon)
->inline(false)
->hidden(function () use ($name) {
return $this->config['methods'][$name]['enabled'] ? false : true;
})
->hint(new HtmlString('<div wire:loading wire:target="data.my_toggle">loading...</div>'))
->afterStateUpdated(function ($state) use ($name) {
$this->submitAction(state: $state, name: $name);
})
->live();
return
Forms\Components\Toggle::make($name)
->label(function () use ($name, $label) {
return $label;
})
->onColor(Color::hex('#38c172'))
->offColor(Color::hex('#D63230'))
->offIcon($offIcon)
->onIcon($onIcon)
->inline(false)
->hidden(function () use ($name) {
return $this->config['methods'][$name]['enabled'] ? false : true;
})
->hint(new HtmlString('<div wire:loading wire:target="data.my_toggle">loading...</div>'))
->afterStateUpdated(function ($state) use ($name) {
$this->submitAction(state: $state, name: $name);
})
->live();
<x-filament::modal id="method-verification" :close-by-escaping="false" :close-by-clicking-away="false">
{{-- Modal content --}}
<x-slot name="heading">
<h2 class="text-lg font-semibold">Multi-Factor Verification</h2>
</x-slot>
@if (!$this->isVerified)
<x-slot name="footer">
<p>Verify Method</p>
<x-filament-panels::form wire:submit="verify">
{{ $this->verifyForm }}
<div>
<x-filament::button type="submit" size="sm" wire:loading.attr="disabled" wire:target="verify"
wire:loading.class="opacity-50 cursor-not-allowed" :disabled="empty($this->verifyData['code'])">
Verify
</x-filament::button>
</div>
</x-filament-panels::form>
</x-slot>
@endif
@if ($this->viewRecoveryCodes)
<x-slot name="footer">
<p style="margin-bottom: 15px;"><strong>Here are your recovery codes. Save these in a secure place:</strong>
</p>
<ul>
@foreach ($this->recoveryCodes as $code)
<li>{{ decrypt($code->code) }}</li>
@endforeach
</ul>
<x-filament::button wire:click="downloadCodes" color="warning" style="margin-bottom: 15px;">
Download Codes
</x-filament::button>
</x-slot>
@endif
@if ($this->shouldDisplayAuthenticatorVerify())
<x-slot name="description">
<p>Scan the QR code below with your authenticator app</p>
<img src="{{ $this->getAuthenticatorQRCode() }}" alt="QR Code">
</x-slot>
@endif
</x-filament::modal>
<x-filament::modal id="method-verification" :close-by-escaping="false" :close-by-clicking-away="false">
{{-- Modal content --}}
<x-slot name="heading">
<h2 class="text-lg font-semibold">Multi-Factor Verification</h2>
</x-slot>
@if (!$this->isVerified)
<x-slot name="footer">
<p>Verify Method</p>
<x-filament-panels::form wire:submit="verify">
{{ $this->verifyForm }}
<div>
<x-filament::button type="submit" size="sm" wire:loading.attr="disabled" wire:target="verify"
wire:loading.class="opacity-50 cursor-not-allowed" :disabled="empty($this->verifyData['code'])">
Verify
</x-filament::button>
</div>
</x-filament-panels::form>
</x-slot>
@endif
@if ($this->viewRecoveryCodes)
<x-slot name="footer">
<p style="margin-bottom: 15px;"><strong>Here are your recovery codes. Save these in a secure place:</strong>
</p>
<ul>
@foreach ($this->recoveryCodes as $code)
<li>{{ decrypt($code->code) }}</li>
@endforeach
</ul>
<x-filament::button wire:click="downloadCodes" color="warning" style="margin-bottom: 15px;">
Download Codes
</x-filament::button>
</x-slot>
@endif
@if ($this->shouldDisplayAuthenticatorVerify())
<x-slot name="description">
<p>Scan the QR code below with your authenticator app</p>
<img src="{{ $this->getAuthenticatorQRCode() }}" alt="QR Code">
</x-slot>
@endif
</x-filament::modal>