Question

I have several div tags with unique ids and after a click event for a specific image I’m trying to refresh it. How can I do this? This is what I have for code so far:

HTML:

<div class="photo_gallery_container" <?php echo($div_id); ?>>
    <table class="table table-bordered table-condensed">
        <thead >
            <tr style="background-color: #f5f5f5;">
                <th colspan="2" style="text-align: right;"><span style="cursor:pointer" id="delimg_<?php echo($id); ?>" class="delimg"><span class="label label-important">Delete</span></span></th>
            </tr>               
        </thead>
        <tbody>
            <tr>
                <td>
                    <img src="<?php echo($url['url'])?>" style="height:120px;"/>
                </td>
                <td>
                    <a href="#" id="rotateimg_<?php echo($id); ?>" class="rotateimg">Rotate</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

My click event for rotate looks like this:

$('.rotateimg').click(function(e) {
    e.preventDefault();
    var id = $(this).attr('id').substr(10);

    $.post("/functions/photo_functions.php", { f: 'rotate', imgid: id }, function(status){

        if (status == 'true') {

            // How can I reload the specific image after being rotated

        }
    });

});            

Answer 1

Just append a query string to the img‘s URL (e.g. ?v=1), which will fool the browser into thinking that it’s a new image.

Here’s an example (assuming id is the id of the image on the page):

$('#' + id).prop('src', function(i, v)
{
    var separator = v.indexOf('?') == -1 ? '?' : '&';

    return v + separator + 'v=' + ( new Date() ).getTime();
});

---

Since it appears your img on the page has no ID, you could traverse the DOM to find it, like so:

$(this).parent().prev().find('> img')