JQuery $.post in PHP foreach loop

Question

I have a form where a subscriber can select the newsletters they want to recieve and then an AJAX form will send the results to Exact Target and add the subscriber to every list the subscriber want to be added too.

I have a PHP foreach loop setup to handle this.

<?php foreach ($listNumbers as $item): ?>
            var xmlData = 'Ths is the ET API call';
            $.post('ET url for API call'+xmlData);      
        <?php endforeach; ?>    

After the loop(s) run the user is sent to a thank you page like this.

$(document).ready(function() {
location.href = "thank you url";
});

Everything works.. for the most part. I'm using document ready because I'm wanting to give the loop enough time to submit the API call. Is there a way to detect when the $.post function(s) are complete? If it is sucessfull? and then send the user to thank you page?

I'm finding that the location href is sending some users to the thank you page before the code has a chance to run.

Thanks, Michael

Answer 1

http://api.jquery.com/jQuery.post/

There's a callback that tells you it's finished

jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

• url - A string containing the URL to which the request is sent.
• data - A map or string that is sent to the server with the request.
• success(data, textStatus, jqXHR) - A callback function that is executed if the request succeeds.
• dataType - The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).

Sample script, you need to keep track that all requests have finished, although I would strongly suggest you write a new server side call that you can call just once, if you can.

var xhrCount = <?= count($listNumbers) ?>;
<?php foreach ($listNumbers as $item): ?>
   var xmlData = 'Ths is the ET API call';
   $.post('ET url for API call'+xmlData, null, function() {
       xhrCount--;
       if (xhrCount === 0) {
           location.href = 'myurl'
       }
   });      
<?php endforeach; ?>  

Not sure, what could be wrong with your count() but you can count it yourself;

var xhrCount = 0;
<?php foreach ($listNumbers as $item): ?>
   var xmlData = 'Ths is the ET API call';
   xhrCount++;
   $.post('ET url for API call'+xmlData, null, function() {
       xhrCount--;
       if (xhrCount === 0) {
           location.href = 'myurl'
       }
   });      
<?php endforeach; ?>  

Answer 2

$(document).ready(function() { }); // this is NOT the callback of the AJAX request

The above won't work, because it will be called immediately, because you are staying on the same page (which is already ready). AJAX calls are asynchronous so it won't wait until the request is finished.

You could either make the call async or use the success callback of the ajax request.

To better clarify:

The $(document).ready(function() {}); fires when the DOM is ready (i.e. kinda like the page is loaded and I'm ready for other stuff (e.g. attaching event listeners)) . What you want to do is use the callback of .post() like:

$.post('ajax/test.html', function(data) {
  // this only gets called when the ajax request is finished
});

But the real question remains: why are you using a PHP loop to build AJAX requests. That just makes no sense at all. You are still building the page using PHP so why don't you also add the content you want to get using AJAX?

Answer 3

You could try this var jqxhr = $.post('ET url for API call'+xmlData);

After the loop:

jqxhr.complete(function(){
  location.href = "thank you url";
});

You can read about jqXHR status functions in the documentation.

But you may want to change your whole approach. Maybe your PHP should output one javascript array that your page could loop. What are you trying to accomplish?