Displaying images with AJAX

Question

Here is what i am doing.

I am building a website where users from twitter upload images to my website from their tweetbot client. My application, retrieves the photo from tweetbot and uploads it to my racskpace cloud server. I have successfully done all that. I am now in the process of designing a User Interface which looks like the following. There is also a web uploader.

http://d.pr/i/x4A0

The web uploader works fine. What i want is, notice the three images below. I want it to change live. For e.g if a user uploads a photo through their tweetbot client, the photos should appear here. The upload process is all done with the file /api/index.php. So whatever code i need to put in there so that whenever the user uploads, the file /api/index.php is executed and my UI should reflect that live.

So i have dug around a bit in AJAX to do this. I have included the following function in my /api/index.php

<script type="text/javascript">
    function showPhoto(str) {

        if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else { // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                $shortenedurl = xmlhttp.responseText;
            }

        }

        xmlhttp.open("GET", "getphoto.php?q=" + str, true);
        xmlhttp.send();
    }
</script>

I also executed the function by adding showPhoto($shortenedurl) at the end of the /api/index.php file

The getPhoto.php looks like this:

<?php

    $q=$_GET["q"];

    $con = mysql_connect("","","");
    if (!$con)
    {
        die('Could not connect: ' . mysql_error());
    }

    mysql_select_db("", $con);
    $result = mysql_query("SELECT * FROM tblphoto WHERE shorturl = '$q'");
    $row = mysql_fetch_array( $result );
    $tweet = $row['tweet'];
    $sn = $row['user'];
    $thumb = $row['thumb'];

    mysql_close($con);

?>

<div class="one-third column feature">
    <h2>
        <?php echo $sn; ?>
    </h2>
    <img src=<?php echo $thumb; ?>/>
    <p>
        <?php echo $tweet; ?>
    </p>
</div>
<div class="one-third column feature">
    <h2>Two</h2>
    <img src="http://lorempixum.com/400/100/nature/2" />
    <p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="one-third column feature">
    <h2>Three</h2>
    <img src="http://lorempixum.com/400/100/nature/3" />
    <p>Lorem ipsum dolor sit amet...</p>
</div>

Then i include the getPhoto.php in my UI's index.html.

I also want to be able to loop through the database and display only three images at once. So if a user uploads a photo, the left most photo is changed to the latest one. The previous left most takes position two and the previous middle takes position three. The right most photo is discarded.

Right now, nothing is displaying, as in the screenshot. Am in the the right direction or i am doing it wrong?

Answer 1

First src uri is not quoted properly in your getImages.php:

Try to replace

<img src=<?php echo $thumb; ?> />

with

<img src="<?php echo $thumb; ?>" />

I have just done project in which user can upload photos using ajax uploader and have used jQuery for almost everything, so my answer is heavily jQuery based.

What comes to displaying photos, I think you should just make ajax request that asks for image urls, or maybe full image tags. It's your choice and depends on what you need:

Script that requests images:

$.ajax({
    type: 'POST',
    url: 'getPhotos.php',
    success: function(data){
        // Replace <div id="#photos"> contents with data returned from server:
        $('#photos').empty().append(data);
    }
});

PHP file that provides images:

// Start session to keep track of already displayed images
session_start();
if (!isset($_SESSION['index'])) $_SESSION['index'] = 0;

// Increment photo index to show other (next) photo every time request is made:
$_SESSION['index']++;    
$index = $_SESSION['index'];
// If all photos already displayed, start over again:
if ($index > getPhotoCount()) $index = 1;

// Get photo uri from sql or somewhere:
$photourl = getPhotoURI( $index );
echo '<img src="'.$photourl.'" />';