Suppressing SUCCESS alert boxes?

Question

I have three functions that called as shown below (Functions not included):

Code:

$("#btnSubmit").click(function() {
    var data = JSON.stringify(getAllSourcepData());
    console.log(data);
    $.ajax({
        url: 'closures.aspx/SaveSourceData',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({
            'empdata': data
        }),
        success: function() {
            alert("Data Added Successfully");
        },
        error: function() {
            alert("Error while inserting data");
        }
    });
});
$("#btnSubmit").click(function() {
    var data = JSON.stringify(getAllSpouseData());
    console.log(data);
    $.ajax({
        url: 'closures.aspx/SaveSpousData',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({
            'empdata': data
        }),
        success: function() {
            alert("Data Added Successfully");
        },
        error: function() {
            alert("Error while inserting data");
        }
    });
});
$("#btnSubmit").click(function() {
    var data = JSON.stringify(getAllDividentData());
    console.log(data);
    $.ajax({
        url: 'closures.aspx/SaveDividentData',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({
            'empdata': data
        }),
        success: function() {
            alert("Data Added Successfully");
        },
        error: function() {
            alert("Error while inserting data");
        }
    });
});

When data is submitted successfully, three alert boxes popup, each with same message: "Data Added Successfully".

This forces user to have to close three popup boxes.

Is there a way to disable the success alert boxes leaving just one? Or even all three be disabled allowing me to come up with a custom Success message?

How do you want it to behave if the first one passes but the next two fail? This is a good use case for promises I suspect. — Matt, Mar 31 '17 at 16:37
Couldn't you have some variable like `hasAlertBeenShown = true` after the first alert shows, and each alert after that first has to check if `hasAlertBeenShown = false` before it launches? — Pytth, Mar 31 '17 at 16:42

score 0 · Answer 1 · edited May 23 '17 at 12:10

You need to wait until all ajax requests are complete, like in this answer

So in your case you need to create functions for all $.ajax calls like this:

function ajax1() {
    var data = JSON.stringify(getAllSourcepData());
    $.ajax({
        url: 'closures.aspx/SaveSourceData',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({
            'empdata': data
        }),
        success: function() {
            alert("Data Added Successfully");
        },
        error: function() {
            alert("Error while inserting data");
        }
    });
}
// add ajax2() and ajax3() ...

And then use only one click handler like this:

$("#btnSubmit").click(function() {
    $.when(ajax1(), ajax2(), ajax3()).then(function(a1, a2, a3){
        // success, display message
    }, function(){
        // exception
    });
});

Vinutha N · Answer 2 · 2017-03-31T16:56:34.947

0

Why you want to call 3 times for button click? Why not put them all together? Any how you can use variable as isAlertToBeShown= false and after pushing data make it has true. finally check the variable is true or false.

edited Mar 31 '17 at 16:56

answered Mar 31 '17 at 16:44

Vinutha N

156
6

score 0 · Answer 3 · edited May 23 '17 at 12:10

0

You can reorder a little your code to use the deferred method to jQuery 1.5+ otherwise you can implement as this answer:

jQuery callback for multiple ajax calls

edited May 23 '17 at 12:10

Community

1
1

answered Mar 31 '17 at 16:46

Pablo Cesar Cordova Morales

1,128
4
18
32

score 0 · Accepted Answer · answered Mar 31 '17 at 17:16

You could also simplified your code by using Promise.all:

$("#btnSubmit").click(function() {

     var allSourcepData = JSON.stringify(getAllSourcepData());
     var allSpouseData = JSON.stringify(getAllSpouseData());
     var allDividentData = JSON.stringify(getAllDividentData());

     Promise.all([

        getData('closures.aspx/SaveSourceData', allSourcepData),
        getData('closures.aspx/SaveSpousData', allSpouseData),
        getData('closures.aspx/SaveDividentData', allDividentData)
      ])
      .then( alert )
      .catch( alert )
});


function getData(url, data)
{
     return new Promise((resolve, reject){
        $.ajax({
            url: url,
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({
                'empdata': data
            }),
            success: () => { resolve("Data Added Successfully") },
            error: () => { reject("Error while inserting data"); }

        });
    })
  }

Suppressing SUCCESS alert boxes?

4 Answers4