Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

plue's avatar
Level 1

Sweetalert error

Hi I use sweetalert in my project and I followed the installation correctly but it isn't showing here is the error SweetAlert2: Target parameter is not valid, defaulting to "body"

public function store(Request $request) {
        $careers = new Careers;
        $careers->position = $request->position;
        $careers->qualification_1 = $request->qualification_1;
        $careers->qualification_2 = $request->qualification_2;
        $careers->qualification_3 = $request->qualification_3;
        $careers->qualification_4 = $request->qualification_4;
        $careers->qualification_5 = $request->qualification_5;
        $careers->qualification_6 = $request->qualification_6;
        $careers->qualification_7 = $request->qualification_7;
        $careers->qualification_8 = $request->qualification_8;
        $careers->save();
        alert()->success('SuccessAlert','Lorem ipsum dolor sit amet.');
        return redirect()->back();
0 likes
13 replies
tykus's avatar

@plue alert is some helper function to flash the message to the Session??? How is this handled in your layout template - there is a script tag?

plue's avatar
Level 1

@tykus i include it in layout I use the package realrachid/sweetalert

plue's avatar
Level 1

@tykus

@include('layouts.css')
@include('sweetalert::alert')


 <meta name="color-scheme" content="light dark" />
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<nav class="navbar navbar-expand-lg">
            <div class="container">

                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav mx-auto">
                        <li class="nav-item">
                            <a class="nav-link click-scroll" href="#section_1">Home</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link click-scroll" href="#section_2">About Us</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link click-scroll" href="#section_3">Announcement</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link click-scroll" href="#section_4">Careers</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" style="cursor:pointer">Forms</a>
                            <ul class="dropdown-form">
                                <li>
                                    <a href="forms/CRF.pdf" target="_blank">CASH REQUISITION FORM</a>
                                </li>
                                <li>
                                    <a href="forms/CRS.pdf" target="_blank">CASH REQUISITION SLIP</a>
                                </li>
                                <li>
                                    <a href="forms/PRS.pdf" target="_blank">PURCHASE REQUEST SLIP</a>
                                </li>
                                <li>
                                    <a href="forms/OB-form.pdf" target="_blank">OFFICIAL BUSINESS TRAVEL</a>
                                </li>
                                <li>
                                    <a href="forms/ot-form.pdf" target="_blank">AUTHORIZATION TO RENDER OVERTIME</a>
                                </li>
                                <li>
                                    <a href="forms/leave-form.pdf" target="_blank">EMPLOYEE'S LEAVE</a>
                                </li>
                               
                            </ul>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" style="cursor:pointer">Department Policy</a>
                            <ul class="dropdown-content">
                                <li>
                                    <a href="policy/IT.pdf" target="_blank">IT Automation</a>
                                </li>
                               
                               
                            </ul>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="organizational-chart" target="_blank">Organizational Chart</a>
                        </li>
                    </ul>
                    <div class="theme">
                    <ion-icon id="theme-toggle" name="moon-outline" class="switch"></ion-icon>
                    </div>
                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ms-auto">
                        <!-- Authentication Links -->
                        @guest
                            @if (Route::has('login'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                                </li>
                            @endif

                            @if (Route::has('register'))
                                <!-- <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li> -->
                            @endif
                        @else
                            <li class="nav-item">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }}
                                </a>

                                <ul class="dropdown-content">
                                    <li>
                                        <a class="dropdown-item" href="#" target="_blank">Add Employee</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="{{ route('logout') }}"
                                            onclick="event.preventDefault();
                                            document.getElementById('logout-form').submit();">
                                            Logout
                                        </a>
                                        <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                            @csrf
                                        </form>
                                    </li>
                                </ul>
                            </li>
                        @endguest
                    </ul>
                   
                <div>
                        
            </div>

           

        </nav>
@include('layouts.script')
Snapey's avatar

are you using realrachid/sweetalert ?

where do you see this error?

dysentry30's avatar

You can try this. Change that to this, and switch “@include('sweetalert::alert')” to the last row of the file.

public function store(Request $request) {
        $careers = new Careers;
        $careers->position = $request->position;
        $careers->qualification_1 = $request->qualification_1;
        $careers->qualification_2 = $request->qualification_2;
        $careers->qualification_3 = $request->qualification_3;
        $careers->qualification_4 = $request->qualification_4;
        $careers->qualification_5 = $request->qualification_5;
        $careers->qualification_6 = $request->qualification_6;
        $careers->qualification_7 = $request->qualification_7;
        $careers->qualification_8 = $request->qualification_8;
        $careers->save();
        Alert::success('SuccessAlert','Lorem ipsum dolor sit amet.');
        return redirect()->back();

Your Blade file:

@include('layouts.css')


 <meta name="color-scheme" content="light dark" />
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<nav class="navbar navbar-expand-lg">
            <div class="container">

                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav mx-auto">
                        <li class="nav-item">
                            <a class="nav-link click-scroll" href="#section_1">Home</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link click-scroll" href="#section_2">About Us</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link click-scroll" href="#section_3">Announcement</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link click-scroll" href="#section_4">Careers</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" style="cursor:pointer">Forms</a>
                            <ul class="dropdown-form">
                                <li>
                                    <a href="forms/CRF.pdf" target="_blank">CASH REQUISITION FORM</a>
                                </li>
                                <li>
                                    <a href="forms/CRS.pdf" target="_blank">CASH REQUISITION SLIP</a>
                                </li>
                                <li>
                                    <a href="forms/PRS.pdf" target="_blank">PURCHASE REQUEST SLIP</a>
                                </li>
                                <li>
                                    <a href="forms/OB-form.pdf" target="_blank">OFFICIAL BUSINESS TRAVEL</a>
                                </li>
                                <li>
                                    <a href="forms/ot-form.pdf" target="_blank">AUTHORIZATION TO RENDER OVERTIME</a>
                                </li>
                                <li>
                                    <a href="forms/leave-form.pdf" target="_blank">EMPLOYEE'S LEAVE</a>
                                </li>
                               
                            </ul>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" style="cursor:pointer">Department Policy</a>
                            <ul class="dropdown-content">
                                <li>
                                    <a href="policy/IT.pdf" target="_blank">IT Automation</a>
                                </li>
                               
                               
                            </ul>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="organizational-chart" target="_blank">Organizational Chart</a>
                        </li>
                    </ul>
                    <div class="theme">
                    <ion-icon id="theme-toggle" name="moon-outline" class="switch"></ion-icon>
                    </div>
                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ms-auto">
                        <!-- Authentication Links -->
                        @guest
                            @if (Route::has('login'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                                </li>
                            @endif

                            @if (Route::has('register'))
                                <!-- <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li> -->
                            @endif
                        @else
                            <li class="nav-item">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }}
                                </a>

                                <ul class="dropdown-content">
                                    <li>
                                        <a class="dropdown-item" href="#" target="_blank">Add Employee</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="{{ route('logout') }}"
                                            onclick="event.preventDefault();
                                            document.getElementById('logout-form').submit();">
                                            Logout
                                        </a>
                                        <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                            @csrf
                                        </form>
                                    </li>
                                </ul>
                            </li>
                        @endguest
                    </ul>
                   
                <div>
                        
            </div>

           

        </nav>
@include('layouts.script')
@include('sweetalert::alert')

plue's avatar
Level 1

Update: It is now working. I include the sweetalert to the home page and works. Thanks for helping!

Please or to participate in this conversation.