open modal on page load

I have a modal that has a trigger button and opens fine from the trigger button, but I also want to be able to conditionally open it when the page loads. I'm trying right now to just open it on the render method, but it won't open. It's literally stupid simple and I can't figure out why it wouldn't be working:

 public function render(): View
    {
        $this->dispatch('open-modal', id: 'statement-mapping');
        return parent::render();
    }
}

 public function render(): View
    {
        $this->dispatch('open-modal', id: 'statement-mapping');
        return parent::render();
    }
}

(The modal is itself another livewire component)

and my modal:

<x-filament::modal id="statement-mapping" width="6xl">...

<x-filament::modal id="statement-mapping" width="6xl">...

my parent is extending the Page class and uses

HasForms, HasActions, InteractsWithForms, InteractsWithActions

HasForms, HasActions, InteractsWithForms, InteractsWithActions

. The modal livewire class (child) is also using the same contracts/traits.

Solution

This is how I do also in my current project. You can insert a renderhook at the bottom of the content make a livewire component and put it inside the render hook blade:

<?php

namespace App\Livewire\Onboarding;

use Livewire\Component;

class DashboardModal extends Component
{
    public function showDashboardVideoModalEvent()
    {
        $this->dispatch('open-modal', id: 'dashboard-video-modal');
    }

    public function render()
    {
        return view('livewire.onboarding.dashboard-modal');
    }
}

<?php

namespace App\Livewire\Onboarding;

use Livewire\Component;

class DashboardModal extends Component
{
    public function showDashboardVideoModalEvent()
    {
        $this->dispatch('open-modal', id: 'dashboard-video-modal');
    }

    public function render()
    {
        return view('livewire.onboarding.dashboard-modal');
    }
}

now then inside your livewire component blade this is what I do:

<div wire:init="showDashboardVideoModalEvent"></div>

<div wire:init="showDashboardVideoModalEvent"></div>

I maybe complicate things so it works for me

Jump to solution

open modal on page load

 public function render(): View
    {
        $this->dispatch('open-modal', id: 'statement-mapping');
        return parent::render();
    }
}

 public function render(): View
    {
        $this->dispatch('open-modal', id: 'statement-mapping');
        return parent::render();
    }
}

(The modal is itself another livewire component)

and my modal:

<x-filament::modal id="statement-mapping" width="6xl">...

<x-filament::modal id="statement-mapping" width="6xl">...

my parent is extending the Page class and uses

HasForms, HasActions, InteractsWithForms, InteractsWithActions

HasForms, HasActions, InteractsWithForms, InteractsWithActions

. The modal livewire class (child) is also using the same contracts/traits.

Solution

This is how I do also in my current project. You can insert a renderhook at the bottom of the content make a livewire component and put it inside the render hook blade:

<?php

namespace App\Livewire\Onboarding;

use Livewire\Component;

class DashboardModal extends Component
{
    public function showDashboardVideoModalEvent()
    {
        $this->dispatch('open-modal', id: 'dashboard-video-modal');
    }

    public function render()
    {
        return view('livewire.onboarding.dashboard-modal');
    }
}

<?php

namespace App\Livewire\Onboarding;

use Livewire\Component;

class DashboardModal extends Component
{
    public function showDashboardVideoModalEvent()
    {
        $this->dispatch('open-modal', id: 'dashboard-video-modal');
    }

    public function render()
    {
        return view('livewire.onboarding.dashboard-modal');
    }
}

now then inside your livewire component blade this is what I do:

<div wire:init="showDashboardVideoModalEvent"></div>

<div wire:init="showDashboardVideoModalEvent"></div>

I maybe complicate things so it works for me

Jump to solution

open modal on page load

open modal on page load

Similar Threads

Similar Threads

Similar Threads