Javascript-libraries and Laravel are kind of two separate worlds. Laravel works server-side, javascript works client-side. With Laravel you create views (blade), and in those views you can call all the javascript and html that you want.
Imagine you start with a new project. Install the Infinety/alerts-package with the instructions as mentioned on their page.
Use this for example in your routes file (or in a controller):
Route::get('/', function () {
// Simply shows the blade view resources/home.blade.php
return view('home');
});
Route::post('/justapage', function() {
// This is the message that will show in the sweetalert-popup:
alert()->success('It worked!', 'The form was submitted');
// Redirect back to the page you were looking at
return back();
});
And use this as resources/home.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo</title>
<!-- include sweetalert2 css library -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/sweetalert2/5.3.5/sweetalert2.min.css">
</head>
<body>
<H1>Homepage</h1>
<form action="/justapage" method="post">
{{ csrf_field() }}
<button type="submit">Click me!</button>
</form>
<!-- include sweetalert2 js library. Note: place it in the body, not in the head -->
<script src="https://cdn.jsdelivr.net/sweetalert2/5.3.5/sweetalert2.min.js"></script>
<!-- And is where Laravel and javascript come together -->
<!-- This include basically writes the neccessary javascript: -->
@include('Alerts::alerts')
</body>
</html>
(I used the sweetalert2-CDN-files here)
When you click the button, it should show the sweetalert2 popup
If you check out the source of the webpage, you will see that the @include('Alerts::alert')-line has outputted this javascript:
<script>
swal({
title: "It worked!",
text: "The form was submitted",
type: "success",
timer: 2500,
showConfirmButton: false
});
</script>
Instead of this:
alert()->success('Title', 'Message');
you can also use:
alert()->overlay('Title', 'Message', 'success');
-> this will add a close button to the sweetalert popup and prevent it from closing automatically.
