Dispatch from link #461

SfaygaTheKing · 2024-08-09T08:27:12Z

SfaygaTheKing
Aug 9, 2024

after creating an object, an email is sent to someone with a link that redirect to the index page, can i dispatch the modal after the redirection or like somehow doing both things at the same time (open the page and activate the modal).

PhiloNL · 2024-08-09T13:20:23Z

PhiloNL
Aug 9, 2024
Maintainer

If you redirect the user to something like example.com?modal=foobar you can add this to your main layout file:

@if($modal = request()->get('modal'))
<script>Livewire.dispatch('modal.open', { component: '{{ $modal }}' });</script>
@endif

4 replies

SfaygaTheKing Aug 9, 2024
Author

do i just need to add this to my blade file? or i need to set something up in routes or somewhere else?

PhiloNL Aug 9, 2024
Maintainer

Just add it to your layout blade file. Now you can use any to your website using ?modal=some-modal and this will trigger the modal without having to click a button.

SfaygaTheKing Aug 9, 2024
Author

unfortunately didn't work. I added a comment for more context.
Thanks for your replies.

SfaygaTheKing Aug 13, 2024
Author

hello again, soo it works for me and now i have another issue. when i close the modal the link stays example.com?modal=foobar and i want it to reset or something like that. I thought it will be a method that after closing redirect but i couldn't find something similar.

SfaygaTheKing · 2024-08-09T15:47:09Z

SfaygaTheKing
Aug 9, 2024
Author

For more context;
This is the livewire modal component :

<?php
namespace App\Livewire;
use LivewireUI\Modal\ModalComponent;

class CreateOrder extends ModalComponent
{
    public function render()
    {
        return view('livewire.create-order');
    }
}

This is the view of this component :

<div>
    <div>
        <h3> Create new order </h3>
    </div>
    <div>
        @livewire('create-form')
    </div>
</div>

The part related to the form is not important.
This is the index blade layout :

<x-app-layout>
    <div class="py-12">
        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
            <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <button onclick="Livewire.dispatch('openModal', { component: 'create-order' })">Create Order</button>
                    <livewire:order-table />
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

The button when clicked open the modal, and it works fine.
Suppose now we have an email sent by the app and it contains a link that I want it to take the receiver to the index page and open the create modal without clicking the button.
Also, this is the route for the index page :

Route::view('orders', 'orders')
    ->middleware(['auth', 'verified'])
    ->name('orders');

1 reply

SfaygaTheKing Aug 9, 2024
Author

This is the app.blade.php :

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <!-- ... -->
    <!-- Scripts -->
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
</head>
<body class="font-sans antialiased">
    <div class="min-h-screen bg-gray-100">
        <livewire:layout.navigation />
        <!-- Page Heading -->
        @if (isset($header))
            <header class="bg-white shadow">
                <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
                    {{ $header }}
                </div>
            </header>
        @endif
        <!-- Page Content -->
        <main>
            {{ $slot }}
        </main>
    </div>
    @livewire('wire-elements-modal')
    @filepondScripts
    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
    @yield('scripts')
    @livewireScripts
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dispatch from link #461

{{title}}

Replies: 2 comments 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Dispatch from link #461

SfaygaTheKing Aug 9, 2024

Replies: 2 comments · 5 replies

PhiloNL Aug 9, 2024 Maintainer

SfaygaTheKing Aug 9, 2024 Author

PhiloNL Aug 9, 2024 Maintainer

SfaygaTheKing Aug 9, 2024 Author

SfaygaTheKing Aug 13, 2024 Author

SfaygaTheKing Aug 9, 2024 Author

SfaygaTheKing Aug 9, 2024 Author

SfaygaTheKing
Aug 9, 2024

Replies: 2 comments 5 replies

PhiloNL
Aug 9, 2024
Maintainer

SfaygaTheKing Aug 9, 2024
Author

PhiloNL Aug 9, 2024
Maintainer

SfaygaTheKing Aug 9, 2024
Author

SfaygaTheKing Aug 13, 2024
Author

SfaygaTheKing
Aug 9, 2024
Author

SfaygaTheKing Aug 9, 2024
Author