I installed SweetAlert2 to my Laravel project using this two tutorial: https://www.itsolutionstuff.com/post/how-to-install-sweetalert2-in-laravel-10-viteexample.html and https://shouts.dev/articles/laravel-10-how-to-implement-sweet-alert , however, SweetAlert2 usual popup 'yes/no' didn't show up. When the page is inspected, get error of 'Uncaught ReferenceError: $ is not defined' .
Here's source code that related to SweetAlert2 in my Laravel project
resources/js/app.js
import jQuery from 'jquery';
window.$ = jQuery;
import swal from 'sweetalert2';
window.swal = swal;
import './bootstrap';
// For scanning function
$(document).ready(function () {
$('#scanner').val(''); // Input field should be empty on page load
$('#scanner').focus(); // Input field should be focused on page load
$('html').on('click', function () {
$('#scanner').focus(); // Input field should be focused again if you click anywhere
});
$('html').on('blur', function () {
$('#scanner').focus(); // Input field should be focused again if you blur
});
$('#scanner').change(function () {
if ($('#scanner').val() == '') {
return; // Do nothing if input field is empty
}
$.ajax({
url: '/scan/save',
cache: false,
type: 'GET',
data: {
user_id: $('#scanner').val()
},
success: function (response) {
$('#scanner').val('');
}
});
});
});
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
resolve: {
alias: {
$: 'jQuery'
},
},
});
resources/views/dash.blade.php
<head>
<title>@yield('title')</title>
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
@include('partials.dashHead')
</head>
resources/views/admin/rent/index.blade.php
<form action="{{ route('rent.destroy',$row['id']) }}" method="Post">
<a class="btn btn-primary show-alert-approve-box" data-toggle="tooltip" title='approve' href="{{ route('rent.approve',$row['id']) }}">Terima</a>
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger show-alert-delete-box" data-toggle="tooltip" title='Delete'>Tolak</button>
</form>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '.show-alert-delete-box', function(event){
var form = $(this).closest("form");
event.preventDefault();
swal({
title: "Are you sure you want to delete this record?",
text: "If you delete this, it will be gone forever.",
icon: "warning",
type: "warning",
buttons: ["Cancel","Yes!"],
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((willDelete) => {
if (willDelete) {
form.submit();
}
});
});
$(document).on('click', '.show-alert-approve-box', function(event){
var form = $(this).closest("form");
event.preventDefault();
swal({
title: "Are you sure you want to approve this record?",
text: "Update this data into approval",
icon: "warning",
type: "warning",
buttons: ["Cancel","Yes!"],
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, approve it!'
}).then((willDelete) => {
if (willDelete) {
form.submit();
}
});
});
});
</script>
Is there something wrong with my code that made SweetAlert2 pop up didn't appear? or I must resolve '$ is not defined' first?