SupunSam's avatar

Can I use "realrashid/sweet-alert" with my ajax code ?

I have started using this package as my default alert system. However now I came across an instance to mention the alert message within my ajax code. But it doesn't work. Any suggestions ?

$('#ok_button').click(function(){
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type:'DELETE',
            url:"/activity/destroy/" + job_id,
        });
            $.ajax({
                beforeSend:function(){
                    $('#ok_button').text('Deleting...');
                },
            success:function(data)
            {
                setTimeout(function(){
                    $('#deleteModal').modal('hide');
                    toast('Jobs has been deleted.', 'success');
                    $('#jobsTable').DataTable().ajax.reload();
                }, 500);
            }
        });
    });
0 likes
7 replies
bobbybouwmann's avatar

You're using a PHP function in your javacsript, you can't do that. If you want to use sweet-alert from your javascript you need to use the default javascript calls for sweet alert or redirect the user to some page and than trigger it from your PHP.

You can find the documentation here for calling it from your javascript: https://sweetalert2.github.io/

1 like
SupunSam's avatar

Hi @bobbybouwmann,

Thank you very much for your time. I am using this package by Rashid Ali:

https://realrashid.github.io/sweet-alert/

It works well with blades and controllers etc. But I am unable to use it with js codes. By reading this documentation provided by you, I think I just have to manually call the scripts for js code.

This is the answer I was looking for.

Thank you very much.

SupunSam's avatar
SupunSam
OP
6 years ago
Best Answer
Level 1

Hi All,

After one month I was able to find a solution for this matter. Evidently, you can use Sweet Alerts within your Javascript if you are already using "realrashid/sweet-alert".

You just need to declare following on top of your script:

$(document).ready(function() {

        //SweetAlert2 Toast
        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 1000
        });

 });

And then call toast:

Toast.fire({
           type: 'success',
           title: 'Data updated.'
});

Simple as that. No need to call in anything else if you already installed "realrashid/sweet-alert" package with your laravel project.

I am posting this here for anyone who may need to use realrashid/sweetalert in their javascript code. Hoping someone may find it useful.

Thanks.

1 like
smithdp1's avatar

Thank you so much! Been looking for this!

chiaju's avatar

So I stumbled upon this problem and what I did was edit the sweetalert.php file after I had published the vendor during configuration

'alwaysLoadJS' => env('SWEET_ALERT_ALWAYS_LOAD_JS', true)

I changed the above from false to ```true````

Then with that I was able to do

Swal.fire({ type: 'success', title: 'Data updated.' });

Sinnbeck's avatar

@chiaju just add this to the env file. Don't edit files in /vendor

SWEET_ALERT_ALWAYS_LOAD_JS=true
vural2123's avatar

Yes, you can use "realrashid/sweet-alert" with your AJAX code. The issue you are encountering is likely due to the fact that the toast function you are calling is not defined. You can use sweetAlert package with ajax call like this :

$.ajax({
    beforeSend:function(){
        $('#ok_button').text('Deleting...');
    },
    success:function(data)
    {
        setTimeout(function(){
            $('#deleteModal').modal('hide');
            Swal.fire(
              'Deleted!',
              'Your file has been deleted.',
              'success'
            )
            $('#jobsTable').DataTable().ajax.reload();
        }, 500);
    }
});

You can customize it as per your requirement.

Please or to participate in this conversation.