Why sweet alert doesn't work?

JavaScript
1

Hi, i’ve got this javascript code but I don’t understand why sweet alert doesn’t work, i hope someone could help me please.

function AnswerComment(userid,postid,gruppo) {
    
    // Add event ID to the hidden field for future usage
    $("#user_id").val(userid);
    $("#comment_post").val(postid);
    $("#user_group").val(gruppo);

    // Open modal popup
    $("#commentModal").modal("show");
}


$('#sendButton').click(function(AnswerComment) {

    var userID = $('#user_id').val();
    var postID = $('#comment_post').val();
    var groupID = $('#user_group').val();
    var desc = $('#comment_body').val();



        $.ajax({
            
            url: '../controllers/ctrl_admin_blog_app/ctrl_admin_comment_reply.php',
            data: 'action=edit&userid='+userID+'&postid='+postID+'&groupid='+groupID+'&desc='+desc,
            method: "POST",


            success: function(data) {


                        swal({
                            title: "Evento eliminato!", 
                            text: "L'evento è stato eliminato con successo.", 
                            type: "success"

                        });

            }

        });


});
2

What is the error showing in your console?

3

I don’t know sweet alert, but just copy/pasting that swal call to the console worked perfectly fine for me. So it might just mean that the success method doesn’t get called – have a look at the network panel in your browser dev tools to confirm that the request was successful in the first place.

Also, is that AnswerComment function supposed to be called somewhere? You’re just naming the event-argument in the click handler like that, which is probably not what you intended… thus there might be no userID etc. for the query string of the request URL.

4

As I see your code I focus to this line:

data: 'action=edit&userid='+userID+'&postid='+postID+'&groupid='+groupID+'&desc='+desc

Do you want to send all this string to url via post?Why don’t you format the data as this?

data:{
        userID:userID,
        postID:postID,
        groupID:groupID,
       desc:desc
        
    }

I think that for some reason you can’t get the data from …/controllers/ctrl_admin_blog_app/ctrl_admin_comment_reply.php

5

Hi @liontas76 thanks for your answer, i’ve tried your solution but the problem is still there.

6

The sweet alert shows up quickly behind the modal and then immediately disappear this is the problem. The console doesn’t show up any error

7

Set in your ajax code async:false like this:

 $.ajax({
            
            url: '../controllers/ctrl_admin_blog_app/ctrl_admin_comment_reply.php',
            data: 'action=edit&userid='+userID+'&postid='+postID+'&groupid='+groupID+'&desc='+desc,
            method: "POST",
            async:false,


            success: function(data) {


                        swal({
                            title: "Evento eliminato!", 
                            text: "L'evento è stato eliminato con successo.", 
                            type: "success"

                        });

            }

        });
8

Hi @liontas76 i tried with async:false, and still the sweet alert appears behind modal and immediately disappear :frowning:

9

Hi guys i’ve managed to make it work in this way, using the following

AnswerComment.preventDefault();
$("#commentModal").modal("hide");

The complete code is now:

$('#sendButton').click(function(AnswerComment) {

    AnswerComment.preventDefault();
    $("#commentModal").modal("hide");


    var userID = $('#user_id').val();
    var postID = $('#comment_post').val();
    var groupID = $('#user_group').val();
    var desc = $('#comment_body').val();


        $.ajax({
            
            url: '../controllers/ctrl_admin_blog_app/ctrl_admin_comment_reply.php',
            data: 'action=edit&userid='+userID+'&postid='+postID+'&groupid='+groupID+'&desc='+desc,
            method: "POST",
            async: false,

            success: function(data) {


                        swal({
                            title: "Evento eliminato!", 
                            text: "L'evento è stato eliminato con successo.", 
                            type: "success"

                        },
                        function(){ 

                            location.reload();
                        }



                        );

            }

        });


});
10

Although a success response may be a “sure thing”, because sync can lock the browser I recommend adding code to deal with an error response just in case.

http://api.jquery.com/jquery.ajax/

Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

11

Hi @Mittineague sorry I don’t understand what you mean. could you please explain how to apply it to this code?
Many thanks

12

Synchronous AJAX calls essentially tell the browser “do this and wait until it’s done before doing anything else”
Fine as long as it gets done, but if for some reason it doesn’t the visitors experience could be less than ideal.

By having code that deals with a possible error response, even though the error is not desirable, at least it is a done and the browser can continue.

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.