Closed ghost closed 3 years ago
Hi @iConcept24 , are you talking about integrating the Sweealert2 plugin. If that is the case, follow next steps.
Read the plugins documentation first to see an overview of how plugin configuration works on the package.
Install the plugin using the php artisan adminlte:plugins install --plugin=sweetalert2
command. That will install the plugin on your project plublic/vendor
folder. IMPORTANT: ignore this step if you going to use CDN
files.
Enable the plugin in the adminlte.php
configuration file. You should include the plugin files, something like this:
'Sweetalert2' => [
'active' => false,
'files' => [
[
'type' => 'js',
'asset' => true,
'location' => 'vendor/sweetalert2/sweetalert2.min.js',
],
[
'type' => 'css',
'asset' => true,
'location' => 'vendor/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css',
],
],
],
If you going to use files from CDN
then put the links of the files on the location property and set asset property to false
.
To use the plugin, include the @section('plugins.Sweetalert2', true);
directive on yout blade file (avoid if the active property is true
for the plugin) and check examples of how to use it:
@section('plugins.Sweetalert2', true);
...
<button type="button" class="btn btn-primary m-1" id="btnOpenSaltB">Open Sweetalert2 (Basic)</button>
<button type="button" class="btn btn-success m-1" id="btnOpenSaltC">Open Sweetalert2 (Custom)</button>
...
{{-- Test Sweetalert2 Plugin --}}
@push('js')
<script>
$(document).ready(function() {
$('#btnOpenSaltB').click(function() {
Swal.fire(
'Good job!',
'You clicked the button!',
'success'
);
});
var Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
$('#btnOpenSaltC').click(function() {
Toast.fire({
icon: 'success',
title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
});
});
})
</script>
@endpush
If I'm not missing something, that should give you a starting point.
thanks @ shidersz
Hi @iConcept24 , are you talking about integrating the Sweealert2 plugin. If that is the case, follow next steps.
- Read the plugins documentation first to see an overview of how plugin configuration works on the package.
- Install the plugin using the
php artisan adminlte:plugins install --plugin=sweetalert2
command. That will install the plugin on your projectplublic/vendor
folder. IMPORTANT: ignore this step if you going to useCDN
files.Enable the plugin in the
adminlte.php
configuration file. You should include the plugin files, something like this:'Sweetalert2' => [ 'active' => false, 'files' => [ [ 'type' => 'js', 'asset' => true, 'location' => 'vendor/sweetalert2/sweetalert2.min.js', ], [ 'type' => 'css', 'asset' => true, 'location' => 'vendor/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css', ], ], ],
If you going to use files from
CDN
then put the links of the files on the location property and set asset property tofalse
.To use the plugin, include the
@section('plugins.Sweetalert2', true);
directive on yout blade file (avoid if the active property istrue
for the plugin) and check examples of how to use it:@section('plugins.Sweetalert2', true); ... <button type="button" class="btn btn-primary m-1" id="btnOpenSaltB">Open Sweetalert2 (Basic)</button> <button type="button" class="btn btn-success m-1" id="btnOpenSaltC">Open Sweetalert2 (Custom)</button> ... {{-- Test Sweetalert2 Plugin --}} @push('js') <script> $(document).ready(function() { $('#btnOpenSaltB').click(function() { Swal.fire( 'Good job!', 'You clicked the button!', 'success' ); }); var Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 }); $('#btnOpenSaltC').click(function() { Toast.fire({ icon: 'success', title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.' }); }); }) </script> @endpush
If I'm not missing something, that should give you a starting point.
Thanks a lot I have managed to load the alert. however , want the sweet alert to pop up after a user updates or makes an entry to the DB. So instead of using a button on the blade template,I want to load it directly from a controller the way i would using Session::flash('success_message',"Entry Successfull!");
@iConcept24 It is a Javascript
plugin (client side), you can't use it directly from server side. In these cases, you just setup a flag from the controller and pass it into the view. Then, from jQuery
you read the flag value and fire the alert if needed. Something like this:
return view('myview')->with('fireAlert', true);
@push('js')
<script>
$(document).ready(function()
{
// Read flag from the controller.
let shouldFire = @json($fireAlert);
if (shouldFire) {
Swal.fire('Success!', 'Entry Successfull', 'success');
}
});
</script>
@endpush
Another alternative is to send an AJAX POST request to the controller, the controller does the database update and returns a result indicating if the update was successful or not. Then you can use the registered AJAX callbacks for error
and complete
to show (or not) the alert depending on the result. This is the way I do mostly, because you don't need to reload the entire blade view again.
Hi @iConcept24 have you solved your problem? In that case, please consider closing this issue.
Hi @iConcept24 have you solved your problem? In that case, please consider closing this issue.
thanks a lot man. I was able to implement the feature using your guidance.
i add this in adminlte.php and that's work
[
'type' => 'js',
'asset' => true,
'location' => '//unpkg.com/sweetalert/dist/sweetalert.min.js',
],
from reference https://sweetalert2.github.io/#download
Buenas noches, estoy tratando de implementar sweeAlert en ADMINLTE3 Lo que quiero es que cuando le de clic en el botón guardar me aparezca la alerta si todos los campos están llenos si no que me envíe una alerta que diga que los campos son requeridos mi código es el siguiente gracias por la ayuda.
@extends('adminlte::page')
@section('title', 'Create')
@section('content_header')
<h1>Crear Empresa</h1>
@stop
@section('content')
<div class="card card-info">
<div class="card-header">
</div>
<div class="card-body">
<form method="POST" action="{{url('empresas')}}">
{{csrf_field()}}
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="nit">Nit:</label>
<input class="form-control" type="text" id="nit" name="nit" placeholder="Nit:" required value={{old ('nit')}} >
</div>
@error('nit')
<div class="error text-danger" role="alert">{{$message}}</div>
@enderror
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="razonSocial">Razon Social:</label>
<input class="form-control" type="text" id="razonSocial" name="razonSocial" placeholder="Razon Social:" required value={{old ('razonSocial')}} >
</div>
@error('razonSocial')
<div class="error text-danger">{{$message}}</div>
@enderror
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="nombre">Nombre:</label>
<input class="form-control" type="text" id="nombre" name="nombre" placeholder="Nombre:" required value={{old ('nombre')}} >
</div>
@error('nombre')
<div class="error text-danger">{{$message}}</div>
@enderror
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="numeroFijo">Numero Fijo:</label>
<input class="form-control" type="text" id="numeroFijo" name="numeroFijo" placeholder="Numero Fijo:" required value={{old ('numeroFijo')}} >
</div>
@error('numeroFijo')
<div class="error text-danger">{{$message}}</div>
@enderror
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="sector">Sector:</label>
<input class="form-control" type="text" id="sector" name="sector" placeholder="Sector:" required value={{old ('sector')}} >
</div>
@error('sector')
<div class="error text-danger">{{$message}}</div>
@enderror
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="tamaño">Tamaño:</label>
<input class="form-control" type="text" id="tamaño" name="tamaño" placeholder="Tamaño:" required value={{old ('tamaño')}} >
</div>
@error('tamaño')
<div class="error text-danger">{{$message}}</div>
@enderror
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="direccion">Dirección:</label>
<input class="form-control" type="text" id="direccion" name="direccion" placeholder="Dirección:" required value={{old ('direccion')}} >
</div>
@error('direccion')
<div class="error text-danger">{{$message}}</div>
@enderror
</div>
</div>
<a class="btn btn-secondary" href="/empresas"><i class="fas fa-angle-left" ></i> Volver</a>
<button type="submit" class="btn btn-primary" id="btnOpenSaltC" onclick="return guardar()"><i class="far fa-save"></i> Guardar</button>
</form>
</div>
</div>
@stop
@push('js')
<script>
$(document).ready(function guardar() {
var Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
$('#btnOpenSaltC').click(function guardar() {
if (respuesta == true) {
Toast.fire({
icon: 'success',
title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
});
return true;
}else{
Toast.fire({
icon: 'error',
title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
});
return false;
}
});
})
</script>
@endpush
{{-- <script type="text/javascript">
function guardar(){
let respuesta = confirm("Todos los campos son requeridos");
if (respuesta == true) {
Toast.fire({
icon: 'success',
title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
});
return true;
}else{
Toast.fire({
icon: 'error',
title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
});
return false;
}
}
</script> --}}
El formulario que estoy tratando de guardar es este
@JDQN please use english language to ask questions. In your case, you will need to detect from Javascript/Jquery
that all the fields are not empty when you click the button. If all fields are not empty, you may trigger a success alert, in other case you may trigger a warning alert. Unfortunately, I do not have the time to show you how to program that, but I'm sure you will do it after investment some time. But should be something like next:
@push('js')
<script>
$(document).ready(function() {
var Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
/* TODO: You need to implement this method */
function inputFieldsAreFilled() {
// TODO: Check if all fields are filled and return true or false. If you detect
// some field is not filled you can return false, otherwise you return true.
}
$('#btnOpenSaltC').click(function() {
/* Check if all input fields are filled */
if (inputFieldsAreFilled()) {
Toast.fire({
icon: 'success',
title: 'All fields are filled.'
});
} else {
Toast.fire({
icon: 'error',
title: 'You need to fill all required fields.'
});
}
});
})
</script>
@endpush
Out-of-box sweetalert in adminlte not frieandly for me :( I`am use https://github.com/realrashid/sweet-alert (server side and frontend, simple and ready to use)
@CrazyFreeMan There is no out-of-box Sweetalert implementation on this package. The package just offers a way of including plugins in the layout using the configuration file...
El formulario que estoy tratando de guardar es este
Bro si lo puediste solucionar? Ando igual con el mismo problema
I am Trying to implement sweetlaert in my laravel 8 project with adminLte 3.0.5 integrated using composer require jeroennoten/laravel-adminlte and I dont know how it is supposed to be done. I have tried using Alert::success('success message','update successfull'); and Session::flash('message_title',"mesaage successful"); but it doesnt work