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.
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.
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)
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.
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.
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.
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!