Sweet Alert

[ghost]

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

[dfsmania]

Hi @iConcept24 , are you talking about integrating the Sweealert2 plugin. If that is the case, follow next steps.

1. Read the plugins documentation first to see an overview of how plugin configuration works on the package.

2. 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.

3. 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.

4. 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.

[ghost]

thanks @ shidersz

Hi @iConcept24 , are you talking about integrating the Sweealert2 plugin. If that is the case, follow next steps.

1. Read the plugins documentation first to see an overview of how plugin configuration works on the package.
2. 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.

3. 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.

4. 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 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!");

[dfsmania]

@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:

From controller

return view('myview')->with('fireAlert', true);

From blade view

@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.

[dfsmania]

Hi @iConcept24 have you solved your problem? In that case, please consider closing this issue.

[ghost]

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.

[marwandhiaurrahman]

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

[JDQN]

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>&nbsp;&nbsp;Volver</a>
                <button type="submit" class="btn btn-primary" id="btnOpenSaltC" onclick="return guardar()"><i class="far fa-save"></i>&nbsp;&nbsp;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> --}}

[JDQN]

El formulario que estoy tratando de guardar es este

[dfsmania]

@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

[CrazyFreeMan]

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)

[dfsmania]

@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...

[erickxllx]

El formulario que estoy tratando de guardar es este

Bro si lo puediste solucionar? Ando igual con el mismo problema