1

I have the below code, which increases a 'week' variable on the click of an arrow. It then uses the week variable to retrieve information from a PHP file (relevant to that week),

The 'week' variable updates on the first click. However the data retrieved from the PHP file doesn't update until the second click and therefore the data lags one week behind.

 $('#fixtures-right-arrow').on('click', function(){  
        
        week++;

        switch (week) {

            case 1:

                $.post("includes/fixture_1_home_lookup.php", {
                home_1_league_position_id:  home_1_league_position_id
                }, function (data, status) {
                home_team_1 = data;
                }); 
           
            break;

...

        };


    $('#fixtures-week').html(week);   

    $('#home-team-1').html(home_team_1);   
  
});

It seems that the code is running the switch before it runs the week++. Is there a way that this can be avoided?

(I am experiencing a similar lag on every click event that retrieves data from a PHP file. One pop-up which accesses several different PHP files does not appear until the seventh click - and then appears perfectly, with all the data in place.

The PHP files all contain MySQL queries to retrieve data from a locally hosted database).

BenSellars
  • 79
  • 9
  • _“It seems that the code is running the switch before it runs the week++”_ - no, that is impossible. – CBroe Jul 08 '20 at 12:08
  • _“It then uses the week variable to retrieve information from a PHP file”_ - the only data you are passing with that POST request, is `{ home_1_league_position_id: home_1_league_position_id }` - so where exactly is that using the week now? Or did you mean something else by that phrasing? – CBroe Jul 08 '20 at 12:09
  • The switch directs to a different file dependent on the week. Case 2 is $.post("includes/fixture_1_home_lookup_wk2.php". – BenSellars Jul 08 '20 at 12:24
  • I tried posting both the league_position_id and the week to PHP, and then running a case selected dependent on the week within PHP, but that failed. – BenSellars Jul 08 '20 at 12:25
  • And the server-side logic behind this is so drastically different for different weeks, that this could not be handled in one script, that gets the week number passed as parameter? – CBroe Jul 08 '20 at 12:26
  • 1
    You are not dealing with the asynchronous nature of the AJAX requests correctly here. `$('#home-team-1').html(home_team_1);` executes, before your AJAX request is even finished - and _that’s_ why you get an “old” result, because at this point in your code, that still _is_ the _current_ result. – CBroe Jul 08 '20 at 12:27
  • I have lots of separate PHP files, as I am unable to return more than one variable from each PHP file. I tried using JSON, but that failed, and the post on here was never resolved. – BenSellars Jul 08 '20 at 12:27
  • Thanks. How do I get the script to wait for the AJAX request to finish before updating the HTML? – BenSellars Jul 08 '20 at 12:29
  • 1
    You don’t (synchronous requests are bad, they block the UI.) You update your HTML from within the callback function of the AJAX request itself instead. https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call – CBroe Jul 08 '20 at 12:30
  • Thanks, much appreciated. It looks like I've got some more learning to do. I'm becoming comfortable using $.post (which I understand uses AJAX), but once it appears as $.ajax it baffles me. I may be missing a few fundamentals too, being self-taught. – BenSellars Jul 08 '20 at 14:02

1 Answers1

1

The below code works without lagging.

The .done updates the HTML after the AJAX ($.post) results are returned.

    $('#fixtures-right-arrow').on('click', function(){  
                   
        switch (week) {

            case 1:

        function postFixt1HomeWk1 (){
            return $.post("includes/fixture_1_home_lookup.php", {
                home_1_league_position_id:  home_1_league_position_id
                });
            }

            postFixt1HomeWk1().done(function(data){
                home_team_1 = data
                $('#home-team-1').html(home_team_1);   
            });

                
        break;

        };

Previously the code beneath the AJAX ($post) request was executing before the AJAX ($post) request had been executed - as AJAX waits until all of the code in the stack is executed before executing itself.

The link provided in the comments was very useful in understanding this. https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call.

BenSellars
  • 79
  • 9