Ajax Timed Refresh / PHP / MySQL

Question

It seems there are some very good resources on my question - at least the basics. But there are still a few dark areas for myself.

First - What I am trying to do.

I am having users "wait" at an intermediary page while I check to see if they have submitted the correct information from another resource (ie. SMS or email) to confirm their subscription to my service. The page should asynchronously check ever couple of seconds to see if they have completed the required steps and their status has been set to '1' or 'active' in the database.

Completing the ajax request seems pretty straightforward - the timing however, I am a little thick about.

Also, what is it that I am trying to do with the information I am retrieving - great, so the user has been set to 'active' and I can retrieve that value - but then what do I use to redirect them to the final or 'thank you' page? Is it a javascript variable that should hold the value then redirect?

Sorry if this seems a little discombobulated, but this is my first try at Ajax & timed refreshes/responses.

SeanCannon · Accepted Answer · 2011-07-24 01:37:17Z

4

I'd do a predefined number of intervals on the ajax call - after 3 attempts, fail with a message:

var attempts = 0;
var validation_attempt = setInterval(function(){
    if(attempts > 3)
    {
        clearInterval(validation_attempt);
        $('#my_div').html('No activity, try again later');
        return false;
    }

    $.ajax({
        url: '/my_file.php',
        /* other params */
        success:function(data){
            if(data == 'ok')
            {
                clearInterval(validation_attempt);
                $('#my_div').html('Your account has been approved');
            }
            else
            {
                attempts++;
            }
        }
    });
},3000); // 3 seconds

This should essentially let the user wait for 9 seconds at the most before seeing a "No activity, try again later" message.

answered Jul 24, 2011 at 1:37

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SeanCannon Over a year ago

It's obviously customizable to the OP's needs ;)

Alpinestar22 Over a year ago

Very nice, I am playing with this now.

Alpinestar22 Over a year ago

I'm trying to use the .ajaxStart & .ajaxStop on this to show a preloader image with no luck whatsoever. My issue is that I just dont know where to inject those methods. Where in the above block of code would I put the ajaxStart & ajaxStop methods?

jfriend00 · Accepted Answer · 2011-07-25 04:24:52Z

Your "waiting" page can poll with ajax for completion. It might poll every 15-20 seconds initially, back up to once a minute after a little while and then stop polling all together after awhile. In all cases, make sure you don't keep polling forever as this will be bad for your backend if the user never completes their end of the subscription process.

If the ajax polling gets a successful answer, I would think you would then redirect the user to one of two places:

1) A page that just indicates "Success - you are now subscribed" and tells them what to do next.

or

2) The opening web page for actually using the service. This may be a login page or perhaps you can already log them in automatically so you take them to the open page for the service.

You can do this redirect either in client-side javascript (e.g. it already knows where to redirect the user in all scenarios) or you can include the redirection URL in that actual ajax response so the flow of pages can be controlled server-side. You can do it either way.

karim79 · Accepted Answer · 2011-07-24 01:48:33Z

0

I was coding this in response to your question. I think I'll post it in case it is useful:

var active = false, i, t;

// check 'active' for truthyness, if so kill timers
function checkActive() {
    if(active) {
        clearInterval(i);
        clearTimeout(t);
        window.location.href = "success.html";
    }
    return false;
}

// recursively call URL to check 'active' status
function checkStatus() {
    $.post("checkStatus.php", { some: "variable" }, function(resp) {
         if(resp !== "1") {
             t = setTimeout(checkStatus, 2000);
         } else {
             active = true;
         }
    });
}

$(document).ready(function() {
    checkStatus();
    i = setInterval(checkActive, 2000);
});

answered Jul 24, 2011 at 1:48

karim79

343k67 gold badges420 silver badges409 bronze badges

2 Comments

Alpinestar22 Over a year ago

I like the looks of this - is it possible to have it quite after say... 10 requests? Also - I am getting my data from a POST as is - how then would I extract that data to RE-POST to my php script? Put it in a hidden form and extract it that way?

Alpinestar22 Over a year ago

Okay.. so here's what I did to get the information: $.post("testurl.php", {data: "<?=$data;?>"}, callbackfunction()) where $data is $_POST['data'];

Neeraj · Accepted Answer · 2011-07-25 05:00:03Z

0

You can try using a server push (comet) rather than ajax for this solution.

answered Jul 25, 2011 at 5:00

Neeraj

8,5528 gold badges43 silver badges71 bronze badges

Collectives™ on Stack Overflow

Ajax Timed Refresh / PHP / MySQL

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related