[Dojo / PHP + apc.rfc1867] I can't get xhrPost upon form submission via input button, I'm going insane...

Question

It's rather lengthy, TLDR version below crit wall of text.

Setup: Our company had been using prototype for some time, and just recently switched to dojo. I have been converting lots and lots of JS and setting everything back up to normal and then I encountered this issue...

The issue: I have a typical form set up with a upload file field. (I'm not using a dijit, and have tried multiple variations of them - not working for me perhaps in 1.4 I will try again.) Upon pressing the submit button my intentions were to watch the upload progress of the files, in prototype this was a simple ajax.PeriodicalUpdater call (wich is basicly xhrGet/Post that runs over and over and over). Coupled with apc.rfc1867 (example: http://www.phpriot.com/articles/php-ajax-file-uploads/3) this becomes very easy, basicly you post, and use ajax to fetch the current progress of the file.

Here is where I encounter the actual issue... xhrPost() doesn't seem to want to run after the form goes into what I call 'submit mode' (where the page is spooling and uploading). APC actually needs the files to be in the 'submit mode' to poll the current progress and return the % via ajax.

What I have tried: Only one thing has partially worked. Using the onclick="" calling the xhrPost() imediately followed by return false; The problem with this is that the only way I got it to actually work was to click the submit button, and then click a seperate submit button with return false... I think why this worked is that it started a normal submit, then during the upload process it sent the xhrPost() along with return false;. It's probably the uploads re-started, but what is sure is that the APC data was being fed into the progress bar, unfortunately this shouldn't require 2 clicks. Also, it didn't finish submitting the page either.

I've had little success using dojo.connect() to the button or the form.

I've had little success using onclick="" unless return false; is present.

I've had little success using dojo.io.iframe to send a seperate request.

I've had little success using dojox.file.FileUpload, and presents a large sum of it's own issues as well.

Code Snippets:

Old Code:

new PeriodicalExecuter(function(pe) {
 if( dojo.byId('progressbar').innerHTML == 'Processing...' ) {
  pe.stop();
 } else if( dojo.byId('progressbar').innerHTML != '' ) {
  dojo.byId('progressbar1').setStyle({
   width: dojo.byId('progressbar').innerHTML + '%'
  });
 }
}, 1);

New Code:

 dojo.xhrPost({
  url: 'ajax/apcProgressBar.php',
  content: { progress_key: dojo.byId( 'progress_key' ).value },
  load: function( data ) {
   dojo.byId( 'progressbar' ).innerHTML = data;
   if( dojo.byId( 'progressbar' ).innerHTML != '' ) {
    dojo.style( 'progressbar1', 'width', dojo.byId( 'progressbar' ).innerHTML + '%' );
           window.setTimeout(this, 2000);
   }
  }
 });
}

APC Handling:

if( isset( $_POST[ 'progress_key' ] ) ) {
if( $status = apc_fetch( 'upload_' . $_POST[ 'progress_key' ] ) ) {
 $progress = ceil( $status[ 'current' ] / $status[ 'total' ] * 100 );
 if ( $progress >= 100 ) {
  echo 'Processing...';
 } else {
  echo $progress;
 }
}
echo '...';

}

TLDR Version: I need a way to submit a form with files to upload, and send xhrPost() at the same time, and nothing I try works. The only other variable is that APC must know about the file trying to be uploaded, and stopping the event seems to hinder this completely.

Answer 1

After playing with this some more I came up with my own solution.

I made a test page that used dojo and prototype. One thing I noticed was that prototype also gave an error in the same situation, this I still don't understand, however being persistent with the ajax requests will return results, in this instance I used javascripts native setInterval() to continue requesting ajax updates. (I made a custom dojo class)

Hopefully this helps someone, in the future.