Load image to div without refreshing browser

Question

What is the best way to update path to image using PHP (web sockets, server-sent events, etc.) without refreshing browser?

I have 10 divs in which i have to load path to image and show that image. I don't have to worry about support on different web browsers because i will install it on those PC's that will display this web site (20-30 PC's).

So, I just need your opinion on best technology to load image on div (on event sent from server application) without refreshing it.

Btw: There will be 50 different images and all will be already in a folder on site root.

Answer 1

No way to do that in php, that's what javascript is for.

document.getElementById("myimg").src = "newimage.jpg";

i reply to the comment:

$('img').each(function(){ 
    var source = $(this).parent().find('span').first().val();    //if spans contain picture names
    $(this).attr("src",source);
});

if you can use id's

document.getElementById("first").src = "15.jpg";
document.getElementById("second").src = "10.jpg";
document.getElementById("third").src = "21.jpg";
...

another reply to the comments. To invoke javascript on php:

if ($invoke_javascript): ?>
    <script>
        alert('javascript goes here');
    </script>
<?php endif;

Answer 2

Here is how you can do this in jQuery:

$(".my-div img").attr("src", "/new/image.jpg");