Question

Here’s the scenario: I’m building a WordPress plugin to manage some survey research that I’m involved in. The project admin is able to upload a csv file from the WP admin interface. On the client side, when the file is uploaded it goes through each line of the file, extracts the necessary info about the users and then makes an AJAX call to add the participant to the project. I decided to parse the csv file on the client side and submit the ajax requests one by one so that I could update a progress bar as each returns. The javascript looks like this:

$( '#csv_upload_button' ).click( function() {
    // declare the necessary variables
    var f = $( '#csv_file_input' )[0].files[0],
        fr = new FileReader,
        rows, headers, dialog, count, remaining;
    // when the file loads
    fr.onload = function() {
        // get the rows, the count, number remaining to process, and headers
        rows = fr.result.split( "\n" );
        remaining = count = rows.length - 1; // -1 to account for header row
        headers = $.trim( rows[0] ).split( ',' );
        // create the dialog box to show the progress bar
        dialog = $( '<div></div>' )
                    .html( 
                        '<p>Loading...</p>' +
                        '<p><progress id="csv_upload_progress" max="' + count + 
                        '" min="0" value="0"></p>' )
                    .dialog( { modal: true; } );
        // then for each row in the file
        $( rows ).each( function( i, r ) {
            // create an object to hold the data
            var data = {}, row = $.trim( r ).split( ',' ), j;
            if ( i > 0 ) { // data starts on the second row
                // map the data into our object
                for ( j = 0; j < headers.length; j++ ) {
                    data[ headers[ j ] ] = row[ j ];
                }
                // send it to the server
                $.post(
                    ajaxurl, 
                    { 
                        action: 'import_panel_member', 
                        data: data, 
                        postid: $( '#post_ID' ).val() 
                    }, 
                    function( result ) {
                        var prog = $( '#csv_upload_progress' );
                        prog.attr( 'value', prog.attr( 'value' ) + 1 );
                        if ( 0 == --remaining ) {
                            // stuff to do when everything has been loaded
                        }
                    }
                );
            }
        });
    };
    // read the csv file
    fr.readAsText( f );
});

The PHP looks something like this:

function import_panel_member() {
    header( 'content-type: application/json' );
    // get the variables sent from the client
    $postid = $_POST[ 'postid' ];
    $data   = $_POST[ 'data'   ];
    /*
     * ...do other things involving talking to a 3rd party server...
     */
    // get the WP meta data variable to be updated
    $participants = get_post_meta( $postid, '_project_participants', true );
    // modify it
    $participants[] = $data;
    // update the database
    update_post_meta( $postid, '_project_participants', $participants );
    // return a message to the client
    echo json_encode( (object) array( 'success' => 1, 'message' => 'added' ) );
    exit;
}

The problem is that since these requests happen asynchronously, it appears that the _project_participants metadata field is only being updated by the last record to be processed. In other words, only the last person in the list shows up in the list of participants. Here are some things that I’ve tried:

1. Change $.post() to $.ajax() and set async: false
   This works but it’s much slower (due to synchronous calls) and for some reason it prevents my dialog box from showing up until after all the ajax calls have finished.
2. Upload the entire csv file to the server and deal with it there
   Instead of parsing the csv on the client side. This works, too, but I don’t think I can get intermediate feedback from the server that I can use to update the progress bar. This request can take quite a while, and I don’t want users to “give up” on the request before it’s complete. When doing it this way, sometimes the server never responds to the ajax call.

So perhaps I am greedy and just want my cake and to eat it, too. How can I take advantage of the speed of asynchronous requests, which give me the opportunity to give the user feedback with a progress bar, but not screw myself up with concurrency issues on the server?

Answer 1

I figured it out. The answer was a hybrid of the two methods. I can use a series of $.post() calls to do the stuff that works better in async mode, and then upload the whole csv to do the stuff that works better in sync mode. Never would have figured this out without typing out the whole explanation in SO!