Displaying POST Data with jQuery?

Question

I'm using a flash webcam to take a picture. It works great and spits back a URL via POST.

I'm coding in PHP and would like to display this POST data once it is recieved, the problem is that I dont re-load the page.

I've looked around and I'm not sure to dynamically load this array of data.

Where should I be looking? jQuery?

Ah, Figured it out. The Flash thing I have has a built in callback function, so I just have to append the data from there!

Answer 1

1. Flash calls javascript each time it spits back the URL.
2. Javascript contacts server (php) and gets content
3. Javascript injects content onto page

Like this (flex code):

// attach a function to the completeHandler
private function completeHandler(evt:Event):void {
    javascriptComplete();
}

// declare the function that will call the javascript function
private function javascriptComplete():void {
    var javascriptFunction:String = "galeryUploadComplete("+Application.application.parameters.opt+")";
    ExternalInterface.call(javascriptFunction);
}

Answer 2

jQuery is not able to read any sort of request data other than that which appears in the URL (GET). You will need to use PHP (or some other server-side language) to handle the response created by the FLash application.

Due to the fact that you're using Flash for the process you are at somewhat of a disadvantage because unless the Flash application has some sort of JavaScript "PhotoUploaded" event notification, your page won't be notified that Flash has just submitted a picture to your server which needs to be retrieved and inserted. If you can modify the Flash application to make an external JavaScript event then you can proceed as Frankie has described in his answer; otherwise, if modifying the Flash application is not an option, then another solution would be to have your page send a request to the server every so often (5-10 seconds or so maybe), to check if there is a photo for it to display yet.

The simplest way to setup polling with your server in this fashion would be to make sure that each photo upload from Flash has a unique, pre-determined identifier that your page knows at initial load. You would then simply ping your server every few seconds with an AJAX request and pass it that unique identifier in order to find the right image should one exist.

Basic example:

function GetPhoto() { 
 $.get('/getphoto.php?ID=1541XJ55A6', function(response) { 
    if(response.ImageUrl !== "") {
        $(".profile-image").attr("src", response.ImageUrl);
        if(getPhotoTimer !== undefined) {
            clearInterval(getPhotoTimer);
        }
    }
 });
}

$(document).ready(function() {
    var getPhotoTimer = setInterval("GetPhoto()", 10000); // every 10 seconds
});