Ajax Auto Refresh – Volume II

So here’s the deal. More than two years ago i wrote a post about auto refresh content after changes in database – AJAX. Although my mainly goal was to share with you the concept behind it, i don’t think it’s enough for some people ;o) So here it is. Auto refresh volume two with the working online example and based on jQuery.

JS library

This time i decided to go with jQuery. Mainly because I started to use it on daily bases and because prototype isn’t that popular anymore. I liked it as a nice and smaller alternative for jQuery, but let’s be honest. If you need something smaller than jQuery, use plain javascript. Otherwise go with jQuery ;o) But this is my personal opinion.

Volume Two

If volume two. then there should be more changes. The concept is still the same. If you’re curious about it or you just want to compare how lame I was two years ago, go ahead and check old post. I won’t delete it, but i don’t want to confuse you more. That’s why i wrote this post ;o)

The new code is more elegant and more ‘pro’ (fuck yeeeaaah). I even used only one ajax request instead of two. I also choose to use JSON and data attribute. That way no extra markup is needed for this purpose.

Working example

Some of you might say ‘finally’. I don’t blame you, but you know – people must eat, and buy food for that. With money. That suck, right? Anyway, go to online demo to see this beauty in action. In the second window open this small form with text input. Resize both windows so they would fit on your screen and you could see changes. Add something with that form and wait. Don’t refresh the page with message list. Whole idea is for that page to refresh list of messages automatically if there are some changes. Just wait 20 seconds to see your message. Just don’t add some stupid things. You can add funny message or the one like ‘i love you’, ‘you’re my hero’ and so on. It’s just a demo right? ;o)

Auto Refresh DEMO

Source code

You can download . The package contain .sql file with table you need to create in order to get it work. Also in db.php you need to provide data for database connection. In index.php you can find JS function and html structure of demo. Nothing more really. Common.php is just added because 3 files seems too few ;o) That’s not true of course. I just didn’t want to repeat myself. Remember, it’s a demo. Just to show you that idea from two years back really works ;o) any errors, stupid mistakes, absence of mysqli close and so on are because it’s a demo of concept. Just adjust this concept with your needs and requirements.

download source code

The db.php

In this file you can find all functions I needed to talk with database. There are two very important functions. Rest are added for demo. Check_changes and register_changes are the functions that creates magic ;o) everytime you add, edit or delete content, you need to register that change. You can’t really rely on row count in table, cause with edition (which is a change of content) the row count is the same. That’s why there is this counter. You can move it to another table or whatever. Just update it when there is a change.

The checker.php

This is the file which will give us result of ajax request. The ajax call is made. Checker checks if current counter is diffrent from the one in database, if yes it selects new list of messages. Current value of counter is send with the ajax request, and stored in data-counter attribute of div#message-container. When user opens the page for the first time, don’t forget to set data-counter with current value from database.

Final thoughts

This should give you a place to start. You should modify the script based on your requirements. For example if you need refresh list of messages that cannot be edited or deleted you don’t need a counter. In check_changes you can just check row count in table, and that row count can be your counter. Count, counter, counting… Yeah that’s it for today. Good luck!