Auto updating Image using mysql php and i would assume javascript

Question

Alright, So I've searched google for what i'm trying to do and can't seem to find what i am exactly looking for.

What I would like to do is have a image that is updated every second, this image is used for a message icon, similar to that of Facebook. No page refresh, Need the element updated using Jquery(preferred). I know very little on the java-script side of this, however the PHP and MySQL side I can do as long as i know what to tell the java-script to do.

I guess the real Question would be: How can i make the image update based upon, any change in the MySQL database? Any help on this would be GREATLY appreciated.

welcome to the world of ajax my friend :) .. a few quick searches on google will help u find exactly what u need. — Jaspal Singh
– Jaspal Singh, Commented Feb 20, 2013 at 7:26
Every second? Expect high throughput bills. You might want to look into Comet, Meteor, socket.io... PHP is not very good at these things. — Amadan
– Amadan, Commented Feb 20, 2013 at 7:27

DeBaum · Accepted Answer · 2013-02-20 07:48:55Z

1

Try something like:

window.setInterval(function() {
    $.get("url", { parameters: egTime}, function(response) {
        if($("#myImage").attr("src") != response)
            $("#myImage").attr("src", response);
    })
}, 1000);

the server has to return the new src of the image as a string ;-)

answered Feb 20, 2013 at 7:48

DeBaum

1302 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2090111 Over a year ago

I would assume url would mean something like "ajaxscript.php" now would that file just have a raw output of whatever image path needs to be displayed? Or how would the response work?

DeBaum Over a year ago

The response is just the new URL of the IMG like: "//myFolder/myimage.png"

We0 Over a year ago

Personally I would rather use json, echo json_encode(array('url' => $url)); then on the js side $("#myImage").attr("src", response.url);

Community · Accepted Answer · 2017-05-23 12:12:31Z

0

You may first set an interval using jQuery. Refer this question;

JavaScript - jQuery interval

Then you may do ajax requests on that intervals to check for new entries in database. In MySQL, make a flag entry to identify whether the entry is new or old (say set 0 for old and 1 for new). On each ajax request, if there is any entry with status 1, then the PHP may return that number of entries having 1 (ie, may be greater than 1) as the ajax result. Then the status should be set to 0. In javascript ajax, you may check whether the return value is 0 or else. If 0, then you need not do anything. If 1, then you may change some element's css property (like changing background color), so as to make it a notification. When user click that element, the css may be brought back to default.

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Feb 20, 2013 at 8:00

Alfred

21.5k64 gold badges175 silver badges258 bronze badges

1 Comment

user2090111 Over a year ago

The 1/0 is already done, it works fine for normal page loads, just need it to keep going so you dont have to refresh the page

Collectives™ on Stack Overflow

Auto updating Image using mysql php and i would assume javascript

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related