Some time ago I have made a simple ToDo list with PHP here. Today, using its database and one function from the list, I have decided to make the todo list with Ajax. This means, that you should not refresh the todo list once something is added to the database, but it asks the database permanently about some news.
Thus, what have I done? In order to demonstrate it a little better, the database is updated with one new entry every 5 seconds, adding the current date. If you leave the index.htm opened for 1 minute these are 12 new entries, so be careful 🙂
Now a little more explanation about the code:
The index.htm has the jQuery in it. It gets JSON data from the php file every 5 seconds. In the PHP, we do two things – we add a line with “addTodoItem” function and we return the data in the database with json encode.
Pretty much that is all. Here comes the code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<?php //turn off notices and errors (do not do this in production! ;) error_reporting(0); if($_GET['query_name']=='todo_list'){ $query = "SELECT id, user_id, todo_item FROM TODOS;"; $result = database_connection($query); $arr_result = array(); //Add some data here, in order to make some use of the AJAX $string_date_formatted = date("Y/m/d"); addTodoItem(7,$string_date_formatted); while($line = mysql_fetch_array($result, MYSQL_ASSOC)){ array_push($arr_result, array('some_ID'=>$line['id'], 'some_userid'=>$line['user_id'], 'some_text'=>$line['todo_item'])); } echo json_encode(array("todo_result"=>$arr_result)); exit; } function addTodoItem($user_id, $todo_text){ $query = "INSERT INTO todos(user_id, todo_item) VALUES (".$user_id.",'".$todo_text."')"; $result = database_connection($query); } function database_connection($query){ mysql_connect('localhost','root','') OR die(write_error("No connection possible.")); mysql_select_db('todo'); return mysql_query($query); } function status($message,$status){ die(json_encode(array('status'=>$status,'message'=>$message))); } ?> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<html> <head> <style> li { list-style-image: url('ul_image.png'); } div { background-color: silver; } </style> </head> <body> <div id='my_div'> </div> </body> </html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ var TIME = 5000; keep_on_asking_the_db_for_data(); function keep_on_asking_the_db_for_data(){ setTimeout(function(){ ask_for_data(); keep_on_asking_the_db_for_data(); },TIME); } function ask_for_data(){ $('#my_div').empty(); var number = 0; $.getJSON("my_php.php?query_name=todo_list", function(json){ $.each(json.todo_result,function(){ number++; var line = '<li>'+number+ ' ' + this['some_text'] + ' ' + this['some_ID'] + ' ' + this['some_userid'] + '</li>'; $('#my_div').append(line); }); }); }; }); </script> |
Enjoy it! 😀