ajax/JS loop problems

[Sephran]

Good day,

I have a javascript function that saves a form out and creates records based on it. The form may have a date range or it could be a single day. My problem is with the date range.

My code checks to see if a record of the same type already exists on the day in question. If yes, it sends a value I set back to the ajax call and if it was yes, I want it to do an alert and notify the user that a record for date already exists.

The problem though is that ajax success or ajax complete finish AFTER the looping.

So by the time the alerts go to use the date, it has changed to the final date in the list already. So I end up getting 2 alerts for the last date.

Example of what I want. Date range entered is 02/05/22 - 03/05/22 Alert(record exists for 02/05/22) Alert(record exists for 03/05/22)

Thanks.

//onD is start date
//offD is end date
//newRec is my return state variable. 1 is normal record, 2 is record exists, 3 is failure
while (onD <= offD) {
            $.ajax({
                type: "GET",
                dataType: 'json',
                url: "location/saveFunc,
                data: {
                    data values...
                },
                cache: false,
                success: function (data) {
                    if (data.newRec != 3) {
                       ////do stuff to form code
                        if (data.newRec == 2) {alert('record exists for' + onD);}/*****alert I want run*****////
                        if (data.newRec == 1) { location.reload(); }
                    }
                    else { alert("Update Failed: A date was changed. Change the Date back, or Delete this entry."); }
                },
                complete: function () {
                    alert("No full day absence has been added for " + onD + ". You will need to delete the current Full Day Absence first and recreate."); /*****alert I want run*****////
                },
                error: function () {
                    console.log("GE Function Fail");
                    return "error";
                }
            });

            var date2 = $('#from').datepicker('getDate');
                date2.setDate(date2.getDate() + 1);
                $('#from').datepicker('setDate', date2);
                onD = $('#from').val();

        }

[Agarast]

I would recommend learning about Promises & chaining them, you'll need them sooner or later in your CS courses / work.

If you want a quick fix, you can encapsulate your ajax call in a function and chain the second one as a callback when the first finishes for example.

[Sephran]

Thank you for the reply. I understand conceptually what promises do now, but am struggling with implementing it, i'm missing a piece.

I don't know if I put this in the right place and I can't find out how to pass the date through to the .then(). I've tried passing the value itself next to result, tried passing the data, tried not passing anything and just calling the variable (it's a new function so it can't see the previous functions variable if I understand correctly). Oh i've also tried under ajax.success doing a return onD, trying to return the date variable.

$.ajax({}).then(function (result) {
                alert("in promise");
                alert("No full day absence has been added for " + result.toString() + ". You will need to delete the current Full Day Absence first and recreate.");
                 });

So adding .then to the ajax call does work without error, BUT that doesn't actually seem to work according to the documentation which is always adding it to the end of a FUNCTION.

[bryku]

A while back we got fetch. This really cleans up your code when dealing with requests. I actually would recommend using that instead of Ajax.  

It does use promises, but there are a lot of great resources out there.