Task Manager Application using json ajax
Description :
Creating a Task tracker with Json and Ajax is very simple. I have a task with three input parameters (Task name, Date, Assigned to). I want to add these task on tracker when I am submitting the form and I can view the tasks on same page. Here no need of any database to store the each tasks. We are saving the each task in Json format. Just follow the below steps to get Task tracker.
Step1 :
Add below css files in page header. Don't forget to add 'script.js' in your application.
[css]
<link rel="stylesheet" href="css/style.css" type="text/css">
[/css]
[javascript]
<script type="text/javascript" src="js/jquery.min.js"></script>
$(document).ready(function(){
var myApp={};
myApp.appendData='';
myApp.appendRow='';
myApp.formData={};
myApp.init=function()
{
myApp.defaultAjax();
myApp.events();
}
myApp.defaultAjax=function()
{
$.ajax({
url: "data.json",
type:"get",
dataType : "JSON",
success: function(data){
console.log(data);
for(var i=0;i<data.length;i++)
{
myApp.appendData+='<ul><li class="Wcolm1">'+data[i].name+'</li><li class="Wcolm2">'+data[i].date+'</li><li class="Wcolm3">'+data[i].assigned+'</li></ul>';
}
console.log(myApp.appendData);
$('.datawrapper').append(myApp.appendData);
},
error:function()
{
console.log('error');
}
});
}
myApp.events=function(){
$('.submit').click(function(e){
e.preventDefault();
if($('.taskName').val()!=''&& $('.DateVal').val()!=''&& $('.AssignedTo').val()!='')
{
myApp.formData={
name:$('.taskName').val(),
date:$('.DateVal').val(),
assigned:$('.AssignedTo').val()
};
myApp.appendRow='<ul><li class="Wcolm1">'+myApp.formData.name+'</li><li class="Wcolm2">'+myApp.formData.date+'</li><li class="Wcolm3">'+myApp.formData.assigned+'</li></ul>';
$('.datawrapper').prepend(myApp.appendRow);
}
else
{
alert('please fill all the input fields');
}
});
}
myApp.init();
});
[/javascript]
Step2 :