How to use SweetAlert? - Githubissues

pieinn commented 6 years ago

Please advice how to use sweet alert in not ajax-form?

Thank you

ferdinandfrank commented 6 years ago

Therefor, you need to work with the Laravel session helper and the provided helper file resources/assets/js/helpers/Alert.js:

In your Controller action that handles the form submit:

session()->flash('alert', ['title' => 'Your alert title', 'message' => 'Your alert message', 'type' => 'Your alert type']);

In your view that gets shown after your Controller action handled the form submit:

@if(session()->has('alert'))
    <script>
        new Alert('{{ session('alert.message') }}', '{{ session('alert.title') }}', '{{ session('alert.type') }}').show();
    </script>
@endif

pieinn commented 6 years ago

I follow your code, but alert not appearing.

ferdinandfrank commented 6 years ago

Ok, so at least you have the information in the session. Where did you place the JavaScript code? Make sure you load the resources/assets/js/vue-forms.js file of this package before the Alert JavaScript code. This file will register the global Alert JavaScript class. So for example, I placed this code in my main blade template at the very end:

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>

    <!-- Meta tags and other head stuff here which is not relevant for that example -->

    <!-- CSRF token: Include this always in the head section like this for the use of ajax forms -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- CSS file with your SweetAlert styling -->
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">

    <!-- Your main content which is not relevant for that example -->

    <!-- Load the script that contains your vue-forms.js file or load the vue-forms.js file directly -->
    <script src="{{ mix('js/app.js') }}"></script>

    <!-- This is where the magic happens ;) -->
    @if(session()->has('alert'))
        <script>
            new Alert('{{ session('alert.message') }}', '{{ session('alert.title') }}', '{{ session('alert.type') }}').show();
        </script>
    @endif

</body>
</html>

ferdinandfrank / vue-forms

How to use SweetAlert? #8