0

I don't succeed with outputting this text before executing ajax. I know it has something to do with async/await, but after reading other posts and articles I still can't figure it out. Anyone able to help me with providing an updated code?

This is the output (Calculating now...) I want before execution:

$(this).parent('td').parent('tr').find('td span.google').text('Calculating now...');

Full code:

$(function(){
        $('.calculate').click(function(){
            $(this).parent('td').parent('tr').find('td span.google').text('Calculating now...');
            
            var total_distance = 0;
            $(this).parent('td').parent('tr').find('td span.tripleg').each(function() {
                var origin = $(this).attr('origin');
                var destinations = $(this).attr('destinations');

                $.ajax({
                    type: "GET",
                    url: 'includes/calculate_distance.php?action=distance_analysis',
                    data: {"origin": origin, "destinations": destinations, "google_api_key": google_api_key},
                    async: false,
                    success: function(result) {
                        total_distance = total_distance + parseFloat(result);
                    }
                });
            });

            $(this).parent('td').parent('tr').find('td span.google').text(total_distance.toFixed(2));
        });
    });

Many thanks in advance!

Laurents_Gits
  • 31
  • 1
  • 3
  • Your issue is that your code does this: 1) set text, 2) set text, 3) run ajax. It *is* setting your text, but you don't have time to see it. Comment out the `.text(total_distance.toFixed(2));` and you'll see it fine (*assuming* selectors are correct ofc), Move `.text(total_distance.toFixed(2));` inside the `success:` callback. – freedomn-m Jul 06 '22 at 09:19
  • That is correct, but when I move it to the success callback, the text Calculating now... doesn't change to the actual result – Laurents_Gits Jul 06 '22 at 09:22
  • Does your `success:` callback fire? If yes (assuming yes) then the problem is that you've moved it *as-is*, including the `this`. But `this` means something different in the `success:`. Make a copy(variable) of `this` outside the ajax, eg `$('.calculate').click(function(){ $this = $(this); ..` then in `success:` use `$this.parent("td")....` (or better, just store the span.google and use that). – freedomn-m Jul 06 '22 at 09:31
  • Ow indeed, fair point! I have amended that now and that seems to work. But unfortunately, the text doesn't change to 'Calculating now...' first. It fills in directly the result. – Laurents_Gits Jul 06 '22 at 09:35
  • I still have a feeling that the code before the ajax call only gets executed as soon as the ajax is done. – Laurents_Gits Jul 06 '22 at 09:38
  • I removed the `async: false,` part and now it works as it should :) – Laurents_Gits Jul 06 '22 at 09:39
  • Yes, my bad, didn't notice `aysnc:false` as it's deprecated (see all the warnings you get in your browser console), so your original code did this: 1) set text, 2) wait for ajax, 3) set text, 4) *update UI*. As async:false is UI blocking, the UI doesn't get updated until your js function/event handler completes. – freedomn-m Jul 06 '22 at 09:41

0 Answers0