We help IT Professionals succeed at work.

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

sammySeltzer
sammySeltzer asked
on
200 Views
Last Modified: 2017-03-31
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

Comment
Watch Question

Commented:
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
Top Expert 2011
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
Top Expert 2011

Author

Commented:
I resolved it and posted the solution.

Commented:
question has been inactive for 14 days, force question close awarding the declared working code.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions