This is a follow up article from this entry “Ajax Todo List system with Codeigniter Part 1″.
Updating Part 1
I forgot to add the following code in
C:\xampp\htdocs\ci_bep\system\application\language\english\backendpro_lang.php.
$lang['backendpro_general'] = 'General';
You will see General above Messages in the left navigation.
Demo
Download Files
sql file is add.
login email: admin(at)gmail.com
pw: admin
jQuery
jQuery is already loaded in BackendPro. First create a js file called shoutbox.js as follows.
C:\xampp\htdocs\ci_bep\assets\js\shoutbox.js.
I found this article and I am going use some of the code in this js. A credit goes to Adrian “yEnS” Mato Gondelle & Ivan Guardado Castro, www.yensdesign.com.
Adding a loading gif and hiding it
Now you can create your own loading gif here and download it. Store it in
C:\xampp\htdocs\ci_bep\assets\images\general\ajax-loader2.gif.
You see a messages page and confirm it you see your ajax loader. Let’s hide it with CSS.
Open C:\xampp\htdocs\ci_bep\assets\admin.css and add this line.
/******* LOADING *******/
#loading{
text-align: center;
display:none;
}
Creating Ajax
Open your shoutbox.js and paste the following js.
$(document).ready(function(){
//global vars
$(".hideme").css("display", "none");
var inputUser = $("#nick");
var inputMessage = $("#message");
var loading = $("#loading");
var messageList = $("#message_ul");
var completedmsg = $("#completed");
var completedList = $("#completed_ul");
//Load for the first time the shoutbox data
updateShoutbox();
updateCompletedbox();
//functions
function updateShoutbox(){
//just for the fade effect
messageList.hide();
loading.fadeIn();
//send the post to shoutbox.php
$.ajax({
type: "POST",
url: "admin/AjaxgetShoutBox",
// data: "action=update",
complete: function(data){
loading.fadeOut();
messageList.html(data.responseText);
messageList.fadeIn(2000);
//completedList.fadeIn(2000);
}
});
}
function updateCompletedbox(){
//just for the fade effect
completedList.hide();
loading.fadeIn();
//send the post to shoutbox.php
$.ajax({
type: "POST",
url: "admin/AjaxgetCompletedBox",
// data: "action=update",
complete: function(data){
loading.fadeOut();
completedList.html(data.responseText);
// messageList.fadeIn(2000);
completedList.fadeIn(2000);
}
});
}
//check if all fields are filled
function checkForm(){
if(inputUser.attr("value") && inputMessage.attr("value"))
return true;
else
return false;
}
//on submit event
$("#form").submit(function(event){
event.preventDefault();
if(checkForm()){
var nick = inputUser.attr("value");
var message = inputMessage.attr("value");
//we deactivate submit button while sending
$("#send").attr({ disabled:true, value:"Sending..." });
$("#send").blur();
//send the post to shoutbox.php
$.ajax({
type: "POST",
url: "admin/insertShoutBox",
data: $('#form').serialize(),
complete: function(data){
messageList.html(data.responseText);
updateShoutbox();
$('#message').val('');
//reactivate the send button
$("#send").attr({ disabled:false, value:"SUBMIT !" });
}
});
}
else alert("Please fill all fields!");
//we prevent the refresh of the page after submitting the form
return false;
});
//on todo event. this changes the status to compeleted
$(".todo").live('click', function(event){
event.preventDefault();
loading.fadeIn();
var href = $(this).attr("href");
var id =href.substring(href.lastIndexOf("/") + 1);
var msgContainer = $(this).closest('li');
$.ajax({
type: "POST",
url: "admin/changestatus/"+id,
// data: id,
cache: false,
complete: function(){
msgContainer.slideUp('slow', function() {$(this).remove();});
// completedmsg.fadeOut(2000);
updateCompletedbox();
// completedmsg.fadeIn(2000);
loading.fadeOut();
}
});
});
// on complete event. this changes the status to todo
$(".completedmsg").live('click', function(event){
event.preventDefault();
// alert("hei");
loading.fadeIn();
var href = $(this).attr("href");
var id =href.substring(href.lastIndexOf("/") + 1);
var CompMsgContainer = $(this).closest('li');
$.ajax({
type: "POST",
url: "admin/changestatus/"+id,
// data: id,
cache: false,
complete: function(){
CompMsgContainer.slideUp('slow', function() {$(this).remove();});
// completedmsg.fadeOut(2000);
updateShoutbox();
// completedmsg.fadeIn(2000);
loading.fadeOut();
}
});
});
$(".delete").live('click',function(event) {
event.preventDefault();
// alert ('clicked');
loading.fadeIn();
var commentContainer = $(this).parent();
var id = $(this).attr("id");
// var string = 'id='+ id ;
// alert(id);
$.ajax({
type: "POST",
url: "admin/delete/"+id,
// data: id,
cache: false,
complete: function(){
commentContainer.slideUp('slow', function() {$(this).remove();});
loading.fadeOut();
}
});
});
});
Please read notes in the above codes for the details.
Testing
It’s time to test. Adding some lists, clicking a to do, completed and x(delete) to see Ajax in action.
When you submit a list, todo list on the left fade out and fade in with a new list added.
Click a to do link and see it will slide up and the completed list fade out and fade in with that list added.
Click a completed link and see the same action as above.
When you click x it will slide up and removed from the completed list and database as well.
All is well but we need to do some improvements.
There are two problems.
Improvement 1: Using IS_AJAX function
When you add a task or message, you will see a flash of outputs at the bottom of the page. It is ugly and we don’t want that.
This can be solved by using IS_AJAX function.
Watch this to learn more about IS_AJAX.
Add the following code at the bottom of
C:\xampp\htdocs\ci_bep\system\application\config\constants.php
//
// Define Ajax Request
define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
//
Then open
C:\xampp\htdocs\ci_bep\modules\messages\controllers\admin.php
We could make another function like this.
function AjaxinsertShoutBox(){
$this->MMessages->updateMessage();
}
But that’s not what I am going to do. We are going use IS_AJAX function which we just added to constants.
We are going to change function insertShoutBox() as follows.
// Instead of using AjaxinserShoutBox we use IS_AJAX here
function insertShoutBox(){
if(IS_AJAX){
$this->MMessages->updateMessage();
}else{
$this->MMessages->updateMessage();
flashMsg('success','New task added');
redirect ('messages/admin/');
}
}
Can you how to use IS_AJAX? So easy isn’t it?
Now go back to the back-end and add more lists. You will not see any flash of outputs at the bottom. Beautiful!
Now disable all js and test it again. It works fine as well.
Improvement 2:
When you delete a completed list and click a menu messages, a flash message will come out. We don’t need it. So let’s change admin.php a bit.
What we need to do is to add IS_AJAX function to function delete($id) as follows to avoid flash messages.
function delete($id){
if(IS_AJAX){
$this->MMessages->delete($id);
}else{
if($id){
$this->MMessages->delete($id);
flashMsg('success','Task deleted');
redirect('messages/admin/','refresh');
}
flashMsg('warning','Task not deleted');
redirect('messages/admin/','refresh');
}
}
Now you will not see a flash message after deleting and clicking General>Messages.
Final Thoughts
More functions can be added.
- Private todo list. Add a radio button to select a private. Default is public.
- Edit function. You can edit the list you made.
- Scroll effect. When the list get long, it is easier to add scroll effect like this.
- Show individual to do list. Same as ‘Calendar’.