Modals

There is a pre-made modal dialog functionality to use when you want to present user a simple form that is triggered by clicking of some button.

For an example you can see this page: http://localhost/mailable/1 There is a button called “Send test email”.

How to use

Client side

Add this tag anywhere on the page:

<v-ajax-modal id="ajaxModal" progress-label="{{ trans('bc-core-domain::progress.loading') }}"></v-ajax-modal>

Add following attributes to a button that is to invoke modal:

data-toggle="modal"
data-target="#ajaxModal"
data-ajax-modal-url="{{route('mailable-test.create', ['mailable' => $mailableId])}}"
data-ajax-modal-title="{{ trans('bc-core-domain::mail-template-test.send_test') }}"

Modify values of data-ajax-modal-url and data-ajax-modal-title according to your needs.

Server side

Controller action that returns view to be displayed in modal (The url that was specified in data-ajax-modal-url attribute):

public function create(int $mailableId)
{
    $this->authorize('viewAny', MailTemplate::class);

    return view('mailable-test.create', ['mailableId' => $mailableId]);
}

i.e. there is nothing different from ordinary action.

Returned view:

<div class="row">
    <div class="col-12">
        <x-base::form action="{{ route('mailable-test.store', ['mailable' => $mailableId]) }}" method="POST" novalidate>
            ...
        </x-base::form>
    </div>
</div>

Here please, notice that no @layout is used. Also by default modal renders response into a <div class="container-fluid"> tag, so we wrap content in <div class="row"> in returned view.

Modal will automatically add handlers to FORM POST events and submit them using AJAX instead. You can also use <a> tags with data-rewrite attribute present and modal will also perform fetching for them using AJAX.

Controller action that handles form POST:

use JohnIt\Bc\Core\Domain\Models\Notification;

public function store(int $mailableId) 
{
    try {
        ...
    } catch (ValidationException $ex) {
        return redirect(route('mailable-test.create', ['mailable' => $mailableId]))
            ->withErrors($ex->validator)
            ->withInput();
    }

    return new Notification(
        trans('bc-core-domain::mail-template-test.test_sent.title'),
        trans('bc-core-domain::mail-template-test.test_sent.message')
    );
}

Here we need to pay attention to the use of try catch handler. If not done this way $this->validate() method will redirect user back to the page he was coming from (not to the one previously requested by AJAX). So we need to catch ValidationException and redirect user to a page that we initially requested with data-ajax-modal-url attribute.

Also please, notice the use of the return value of Notification class. This will result in a modal dialog closing and displaying of a Toast message. You are free to redirect user to another view (not containing @layout), then modal will fetch and display the resulting view.

Use reload-on-success prop on the ajax modal to reload the page after successful form submission.