Can any expert please help me take a stab at this?

I have several ajax calls that post data to the database using webmethods.

This works in terms of posting data to the databse.

Problem is that since there are several calls, once data is posted to the database, you see a ton of "Data Added Successfully" alerts.

User will then have to close each of those alerts.

This is both inefficient and extremely annoying to the users.

Is there a way to combine all the ajax calls into just one?

In other words, once a user clicks the submit button, only one Success alert is rendered instead of one for each ajax call?

Here is a small sample of the code that submits to the database and sends sends three alerts, one for each ajax call.

function getAllEmpData() {
                                var data = [];
                                $('tr.data-contact-personm').each(function () {
                                    var ename = $(this).find('.employeename01').val();
                                    var etitle = $(this).find('.employeetitle01').val();
                                    var email = $(this).find('.employeeemail01').val();
                                    var alldata = {
                                        'emplName': ename,
                                        'emplTitle': etitle,
                                        'empMail': email
                                    }
                                    data.push(alldata);
                                });
                                console.log(data);
                                return data;
                            }

                            function getAllSourcepData() {
                                var data = [];
                                $('tr.data-contact-person').each(function () {
                                    var sname = $(this).find('.sourcename01').val();
                                    var saddress = $(this).find('.sourceaddress01').val();
                                    var sincome = $(this).find('.sourceincome01').val();
                                    var alldata = {
                                        'mySource': sname,
                                        'mySAddress': saddress,
                                        'mySIncome': sincome
                                    }
                                    data.push(alldata);
                                });
                                console.log(data);
                                return data;
                            }

                            function getAllSpouseData() {
                                var data = [];
                                $('tr.data-contact-person2').each(function () {
                                    var spname = $(this).find('.spousename01').val();
                                    var spaddress = $(this).find('.spouseaddress01').val();
                                    var spincome = $(this).find('.spouseincome01').val();
                                    var alldata = {
                                        'mySpouse': spname,
                                        'mySPAddress': spaddress,
                                        'mySPIncome': spincome
                                    }
                                    data.push(alldata);
                                });
                                console.log(data);
                                return data;
                            }
                            function getAllDividentData() {
                                var data = [];
                                $('tr.data-contact-person3').each(function () {
                                    var divname = $(this).find('.dividentname01').val();
                                    var divaddress = $(this).find('.dividentaddress01').val();
                                    var divincome = $(this).find('.dividentincome01').val();
                                    var alldata = {
                                        'myDivName': divname,
                                        'myDivAddress': divaddress,
                                        'myDivIncome': divincome
                                    }
                                    data.push(alldata);
                                });
                                console.log(data);
                                return data;
                            }
                            function getAllReimbursedData() {
                                var data = [];
                                $('tr.data-contact-person4').each(function () {
                                    var reimname = $(this).find('.reimbursmentname01').val();
                                    var reimaddress = $(this).find('.reimbursmentaddress01').val();
                                    var reimincome = $(this).find('.reimbursmentincome01').val();
                                    var alldata = {
                                        'myReimbursName': reimname,
                                        'myReimbursAddress': reimaddress,
                                        'myReimbursIncome': reimincome
                                    }
                                    data.push(alldata);
                                });
                                console.log(data);
                                return data;
                            }
                            function getAllHonorariaData() {
                                var data = [];
                                $('tr.data-contact-person5').each(function () {
                                    var honorname = $(this).find('.inputHonoraria01').val();
                                    var alldata = {
                                        'myHonorname': honorname
                                    }
                                    data.push(alldata);
                                });
                                console.log(data);
                                return data;
                            }
                            function getAllGiftData() {
                                var data = [];
                                $('tr.data-contact-person6').each(function () {
                                    var gifname = $(this).find('.giftname01').val();
                                    var gifaddress = $(this).find('.giftaddress01').val();
                                    var gifincome = $(this).find('.giftincome01').val();
                                    var alldata = {
                                        'myGiftname': gifname,
                                        'myGiftaddress': gifaddress,
                                        'myGiftincome': gifincome
                                    }
                                    data.push(alldata);
                                });
                                console.log(data);
                                return data;
                            }
                            function getAllOrgData() {
                                var data = [];
                                $('tr.data-contact-person7').each(function () {
                                    var orgsname = $(this).find('.orgname01').val();
                                    var orgsaddress = $(this).find('.orgaddress01').val();
                                    var orgsincome = $(this).find('.orgincome01').val();
                                    var alldata = {
                                        'myOrgname': orgsname,
                                        'myOrgaddress': orgsaddress,
                                        'myOrgincome': orgsincome
                                    }
                                    data.push(alldata);
                                });
                                console.log(data);
                                return data;
                            }
                            function getAllCreditorData() {
                                var data = [];
                                $('tr.data-contact-person8').each(function () {
                                    var creditname = $(this).find('.creditorname01').val();
                                    var creditaddress = $(this).find('.creditoraddress01').val();
                                    var creditincome = $(this).find('.creditorincome01').val();
                                    var alldata = {
                                        'myCreditorname': creditname,
                                        'myCreditoraddress': creditaddress,
                                        'myCreditorincome': creditincome
                                    }
                                    data.push(alldata);
                                });
                                console.log(data);
                                return data;
                            }
                            $("#btnSubmit").click(function () {
                                var data = JSON.stringify(getAllEmpData());
                                console.log(data);
                                $.ajax({
                                    url: 'closures.aspx/SaveEmpData',
                                    type: 'POST',
                                    contentType: 'application/json; charset=utf-8',
                                    data: JSON.stringify({ 'empdata': data }),
                                    success: function () {
                                        alert("Data Added Successfully");
                                    },
                                    error: function (xhr, status, error) {
                                        alert(xhr.responseText);
                                    }
                                });
                            });
                            $("#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 (xhr, status, error) {
                                        alert(xhr.responseText);
                                    }
                                });
                            });
                            $("#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 (xhr, status, error) {
                                        alert(xhr.responseText);
                                    }
                                });
                            });
                            $("#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 (xhr, status, error) {
                                        alert(xhr.responseText);
                                    }
                                });
                            });
                            $("#btnSubmit").click(function () {
                                var data = JSON.stringify(getAllReimbursedData());
                                console.log(data);
                                $.ajax({
                                    url: 'closures.aspx/SaveReimbursedData',
                                    type: 'POST',
                                    contentType: 'application/json; charset=utf-8',
                                    data: JSON.stringify({ 'empdata': data }),
                                    success: function () {
                                        alert("Data Added Successfully");
                                    },
                                    error: function (xhr, status, error) {
                                        alert(xhr.responseText);
                                    }
                                });
                            });
                            $("#btnSubmit").click(function () {
                                var data = JSON.stringify(getAllHonorariaData());
                                console.log(data);
                                $.ajax({
                                    url: 'closures.aspx/SaveHonorariaData',
                                    type: 'POST',
                                    contentType: 'application/json; charset=utf-8',
                                    data: JSON.stringify({ 'empdata': data }),
                                    success: function () {
                                        alert("Data Added Successfully");
                                    },
                                    error: function (xhr, status, error) {
                                        alert(xhr.responseText);
                                    }
                                });
                            });
                            $("#btnSubmit").click(function () {
                                var data = JSON.stringify(getAllGiftData());
                                console.log(data);
                                $.ajax({
                                    url: 'closures.aspx/SaveGiftData',
                                    type: 'POST',
                                    contentType: 'application/json; charset=utf-8',
                                    data: JSON.stringify({ 'empdata': data }),
                                    success: function () {
                                        alert("Data Added Successfully");
                                    },
                                    error: function (xhr, status, error) {
                                        alert(xhr.responseText);
                                    }
                                });
                            });
                            $("#btnSubmit").click(function () {
                                var data = JSON.stringify(getAllOrgData());
                                console.log(data);
                                $.ajax({
                                    url: 'closures.aspx/SaveOrgData',
                                    type: 'POST',
                                    contentType: 'application/json; charset=utf-8',
                                    data: JSON.stringify({ 'empdata': data }),
                                    success: function () {
                                        alert("Data Added Successfully");
                                    },
                                    error: function (xhr, status, error) {
                                        alert(xhr.responseText);
                                    }
                                });
                            });
                            $("#btnSubmit").click(function () {
                                var data = JSON.stringify(getAllCreditorData());
                                console.log(data);
                                $.ajax({
                                    url: 'closures.aspx/SaveCreditorData',
                                    type: 'POST',
                                    contentType: 'application/json; charset=utf-8',
                                    data: JSON.stringify({ 'empdata': data }),
                                    success: function () {
                                        alert("Data Added Successfully");
                                    },
                                    error: function (xhr, status, error) {
                                        alert(xhr.responseText);
                                    }
                                });
                            });
                        });
                     });
                  });
                });
               });
              });
             });
           });
        });
    </script>

Open in new window


And below is my attempt to combine the btnsubmit click into one alert.

This one does not work because it keeps giving an error that @parameters for each is required but not supplied.

This tells me there is something wrong with this approach but not sure how to resolve it.

Thanks for your help in advance.

                            function getAllSourcepData() {
                                var data = [];
                                $('tr.data-contact-person').each(function () {
                                    var sname = $(this).find('.sourcename01').val();
                                    var saddress = $(this).find('.sourceaddress01').val();
                                    var sincome = $(this).find('.sourceincome01').val();
                                    var alldata = {
                                        'mySource': sname,
                                        'mySAddress': saddress,
                                        'mySIncome': sincome
                                    }
                                    data.push(alldata);
                                });
                                console.log(data);
                                return data;
                            }

                            function getAllSpouseData() {
                                var data = [];
                                $('tr.data-contact-person2').each(function () {
                                    var spname = $(this).find('.spousename01').val();
                                    var spaddress = $(this).find('.spouseaddress01').val();
                                    var spincome = $(this).find('.spouseincome01').val();
                                    var alldata = {
                                        'mySpouse': spname,
                                        'mySPAddress': spaddress,
                                        'mySPIncome': spincome
                                    }
                                    data.push(alldata);
                                });
                                console.log(data);
                                return data;
                            }
                            function getAllDividentData() {
                                var data = [];
                                $('tr.data-contact-person3').each(function () {
                                    var divname = $(this).find('.dividentname01').val();
                                    var divaddress = $(this).find('.dividentaddress01').val();
                                    var divincome = $(this).find('.dividentincome01').val();
                                    var alldata = {
                                        'myDivName': divname,
                                        'myDivAddress': divaddress,
                                        'myDivIncome': divincome
                                    }
                                    data.push(alldata);
                                });
                                console.log(data);
                                return data;
                            }
    $("#btnSubmit").click(function () {
        var sourceComplete = false, spouseComplete = false, dividentComplete = false;
        function checkComplete() {
            if (sourceComplete && spouseComplete && dividentComplete) {
                $("#result").text("All complete");
            }
        }
        $("#result").text("");
        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 () {
                sourceComplete = true;
                checkComplete();
            },
            error: function () {
                alert("Error while inserting data");
            }
        });
        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 () {
                spouseComplete = true;
                checkComplete();
            },
            error: function () {
                alert("Error while inserting data");
            }
        });
        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 () {
                dividentComplete = true;
                checkComplete();
            },
            error: function () {
                alert("Error while inserting data");
            }
        });
    });

Open in new window

LVL 29
sammySeltzerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Slick812Commented:
Greetings sammySeltzer , , , You ask about the ERROR -
   "@parameters for each is required but not supplied"
I can not find any thing in the code you have that I would say causes that error ? ?
It seems to be an error with an EACH loop, but in the web console there is usually a document Line number where the error happened?

As to your question about Waiting for various asynchronous AJAX to all return from the server, this used to be done in a manner that you tried to construct, where in each success( ) tested variables set in other success( ) until all were true.
But Now there are javascript promises , and Jquery uses this promise in there when( ) method, in the jquery API info here -
      https://api.jquery.com/jquery.when/

Unfortunately the promise and when( ) functioning is somewhat difficult to understand and use. BUT the jquery  when ( )  takes parameters as asynchronous AJAX, and will fire its    .done( )   or   .fail()   method only when all AJAX have returned.

You should NOT be using the jquery ajax  .success( ) method, the more recent method is    .done( )  
Here is some code you can try for the button click, it uses the when( ) . .  You can add as many asynchronous to the when( ) as you need.
$("#btnSubmit").click(function () {
$.when(
  $.ajax({  url: 'closures.aspx/SaveSourceData',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: { 'empdata': JSON.stringify(getAllSourcepData()) },
            done: function (serverRe) {
              $("#result").append("<br>SourceData Saved "+serverRe);
            }
  }), 
		
  $.ajax({  url: 'closures.aspx/SaveSpousData',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: { 'empdata': JSON.stringify(getAllSpouseData()) },
            done: function (serverRe) {
              $("#result").append("<br>SpouseData Saved "+serverRe);
            }
        }),
  $.ajax({  url: 'closures.aspx/SaveDividentData',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: { 'empdata': JSON.stringify(getAllDividentData()) },
            done: function (serverRe) {
                $("#result").append("<br>DividentData Saved "+serverRe);
            }
        })
  
  
  ).done(function( r1, r2, r3 ) {	
  // r1, r2 and r3 are arrays returned for the three ajax server contacts.
  // arrays with: [ data, statusText, jqXHR ]
  
console.log('SourceData r1: '+r1+'\nSpousData r2: '+r2+'\nDividentData r3: '+r3);
$("#result").append("<br>All complete");
  
}).fail(function( r1, r2, r3 ) {
console.log('SourceData r1: '+r1+'\nSpousData r2: '+r2+'\nDividentData r3: '+r3);
$("#result").append("<br>There was an ERROR");
});

});

Open in new window


I can NOT Test this javascript, but I have copied some of it from code I have done where the when( ) worked.
Also I have included a server return string as serverRe in the ajax  .done( ) , you really should have a server return, especially if you have DATABASE operations,

ALSO
Your scripting code is very inefficient, you have too many "functions" doing the exact same code, except for the -
    tr.data-contact-personm

you can use one function with a parameter to get all of the separate tr rows
0
sammySeltzerAuthor Commented:
Thank you I have resolved the problem.

For those it may help, this is what worked for me.

$('#btnSubmit').click(function (e) {
    e.preventDefault();

    var posts = [{
        data: getAllEmpData,
        method: 'SaveEmpData'
    }, {
        data: getAllSourcepData,
        method: 'SaveSourceData'
    }, {
        data: getAllSpouseData,
        method: 'SaveSpousData'
    } 
//the rest
];

    var $result = $('#result');
    $result.text('');

    var calls = posts.map(function (p) {
        var data = p.data();
        console.log(data);

        return $.ajax({
            url: 'closures.aspx/' + p.method,
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({'empdata': JSON.stringify(data)}),
            error: function (xhr) {
                alert(xhr.responseText);
            }
        });
    });

    $.when.apply($, calls).then(function() {
        $result.text('All complete');
    });
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sammySeltzerAuthor Commented:
I resolved it and posted the solution.
0
Slick812Commented:
question has been inactive for 14 days, force question close awarding the declared working code.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.