I can't get xhrPost upon form submission via input button, I'm going insane

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.

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.