Can't retrieve variable from php

Question

PHP FILE:

<?php

#Communication with the API
require_once 'api.php';
$cloudkey = new CloudKey($user_id, $api_key);


if(isset($_FILES["FileInput"]) && $_FILES["FileInput"]["error"]== UPLOAD_ERR_OK)
{
    //Deleted Code: putting the uploaded files in my server.

    if(move_uploaded_file($_FILES['FileInput']['tmp_name'], $UploadDirectory.$NewFileName ))
       {

 $video_file = "/home/george/public_html/q/"; 
 $video_file = $video_file . $NewFileName; 

#Sending the video from my server to the cloud server
$res = $cloudkey->file->upload_file($video_file);

#The cloud server will create a link
$source_url = $res->url;

#The cloud server will convert the video very fastly
while(1) {
    #Deleted Code: Conversion
    if ($asset->status == 'ready') {
        # A lot of code. It will convert the videos here and if it succeeds it will stop.
    break;
    # If the conversion fails, display error
    } else if ($asset->status == 'error') {
        echo "Error while transcoding the media\n";
    }
    sleep(1);
}


# Getting the URL of a thumbnail
echo $thumb = $cloudkey->media->get_stream_url(array('id' => $media_id, 'asset_name' => 'jpeg_thumbnail_source'));

    }else{
        die('error uploading File!');
    }

}
else
{
    die('Something went wrong!');
}
?>

HTML FILE:

  {literal}
<script type="text/javascript">


$(document).ready(function() { 
    var options = { 
            target:   '#output',   // target element(s) to be updated with server response 
            beforeSubmit:  beforeSubmit,  // pre-submit callback 
            success:       afterSuccess,  // post-submit callback 
            uploadProgress: OnProgress, //upload progress callback 
            resetForm: true        // reset the form after successful submit 
        }; 


//function after succesful file upload (when server response)
function afterSuccess()
{
    $('#loading-img').hide(); //hide submit button
    $('#progressbox').fadeOut(); //hide progress bar
    //I WANT TO INSERT SOMETHING HERE.
}



//progress bar function
function OnProgress(event, position, total, percentComplete)
{
   //DOES NOT INTEREST YOU
}); 

</script>


{/literal} 

<div id="output"></div>

I am using smarty template engine. I have an html upload form that will communicate with a php file progressupload.php where the php file will convert the video (using API services) and brings back a response when it finishes.

When the user uploads the video file, ajax will take over show the percentage (in html), and it will send the file to progressupload.php and when the progressupload.php finishes the conversion it will output everything echoed in the php by simply putting this in the html file (I don't know why): <div id="output"></div>.

WHAT I WANT:

When progressupload.php finishes the conversion, it will generate a thumbnail (screenshot) and store its link in $thumb. I want to retrieve $thumb and show it to the user using jquery.

Now if you look at the HTML Code, afterSuccess() is the function where I want to show the thumbnail to the user:

function afterSuccess()
{
    $('#loading-img').hide(); //hide submit button
    $('#progressbox').fadeOut(); //hide progress bar
    //I WANT TO SHOW THE THUMBNAIL HERE.
}

I deleted a lot of unnecessary code that could've distracted you. Remember that I am using smarty template engine, my html file does not end with .php, I cannot echo the variable directly. How can I retrieve the php variable and put it in a jquery method after the variable is created.

I have a suspicion that if you retrieve the variable directly on page load, it will not succeed in getting $thumb since the link needs time to be created (uploading, conversion). How can I retrieve that $thumb?

Answer 1

Assuming that you are using jQuery.ajax();
First parameter in the $.ajax 'success' callback is what returned from the server side.

function afterSuccess( response /** this is what returned from your server **/ )
{
    $('#loading-img').hide(); //hide submit button
    $('#progressbox').fadeOut(); //hide progress bar
    //I WANT TO INSERT SOMETHING HERE.

    console.log(response); // here you can access your $thumbnail
    // below code is untested but it should work
    // $("#output").html("<img src='"+response+"' class='thumbnail' />");
}