- SPLessons

Task Manager Application using json ajax

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Task Manager Application using json ajax

Task Manager Application using json ajax 


 

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language. We are going to create a 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.

 
<link rel="stylesheet" href="css/style.css" type="text/css">
 
<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();
});

Step2 :

Add below code in HTML body 


<div class="wrapper">
<div class="innerwrapper">
<!--header start-->
<div class="header">
<div class="logo">Task Tracker</div>
<div class="title">v2.0</div>
</div>
<!--header end-->
<!--content start-->
<div class="middlewrappeer">
<div class="leftdiv">
<div class="formwrapper">
<h1>Create a Task</h1>
<label>Task Name</label><br>
<input type="text" class="taskName"><br>

<label>Date</label><br>
<input type="text" class="DateVal"><br>

<label>Assigned To</label><br>
<input type="text" class="AssignedTo"><br>

<input type="submit" value="Submit" class="submit">
</div>
</div>
<div class="rightdiv">
<div class="gridatablewrapper">
<h1>Exsiting Tasks</h1>
<div class="datawrapper">


</div>


</div>

</div>
</div>
<!--content end-->

</div>
</div>

See the task tracker in your window with using of Json and Ajax.