Link to home
Start Free TrialLog in
Avatar of sammySeltzer
sammySeltzerFlag for United States of America

asked on

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

Avatar of Member_2_248744
Member_2_248744
Flag of United States of America image

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
ASKER CERTIFIED SOLUTION
Avatar of sammySeltzer
sammySeltzer
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of sammySeltzer

ASKER

I resolved it and posted the solution.
question has been inactive for 14 days, force question close awarding the declared working code.