This is my html file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<title>WELCOME TO TODO LIST</title>
<script src="jquery3.1.1.js"></script>
<script src="ToDoListInProgessScriptc.js"></script>
</head>
<body>
<h1>My To-Do List</h1>
<form>
<fieldset><legend>Task:</legend>
<div>
<div>
<input type="text" id="task" placeholder="what needs to be done?">
</div>
<div>
<input type="button" value="ADD TASK" id="button">
</div>
</div>
</fieldset>
</form>
<ul id="taskslist"></ul>
</body>
</html>
This is my js file ToDoListInProgressjs.js
function Todo(task)
{
this.task = task;
this.done = false;
}
var todos = new Array();
$(document).ready(function()
{
$('#button').click(getFormData);
getTodoData();
});
function getTodoData()
{
$.ajax({
url: "ToDoListInProgressJsonc.json",
dataType: "text",
success: function(jdata){
alert(jdata);
var jsonData = $.parseJSON(jdata);
for (var i = 0; i < jsonData.length; i++)
{
var todoItem = jsonData[i];
todos.push(todoItem);
}
addToDosToPage();
}
});
}
function addToDosToPage()
{
$.each(todos,function(index,tasks){
$('#taskslist').append('<li>'+tasks.task+'<lable><input type="checkbox"></lable><br/></li>');
});
}
function getFormData()
{
var task=$("input:text").val();
if (checkInputText(task, "Please enter a task")) return;
console.log("New task: " + task);
var todoItem = new Todo(task);
todos.push(todoItem);
addToDoToPage(todoItem);
saveTodoData();
}
function checkInputText(value, msg)
{
if (value == null || value == "")
{
alert(msg);
return true;
}
return false;
}
function addToDoToPage(todoItem)
{
$('#taskslist').append('<li>'+todoItem.task+'<lable><input type="checkbox"></lable><br/></li>');
}
function saveTodoData()
{
var todoJSON = JSON.stringify(todos);
var request = new XMLHttpRequest();
var URL = "save.php?data=" + encodeURI(todoJSON);
request.open("GET", URL);
request.setRequestHeader("Content-Type","text/plain;charset=UTF-8");
request.send();
}
This is my json file ToDoListInProgressJsonc.json
[{"task":"get milk","done":false},
{"task":"get broccoli","done":false},
{"task":"bring rian","done":false},
{"task":"go to school","done":false},
{"task":"buy milk","done":false}]
This is my php file save.php
<?php
if (function_exists('get_magic_quotes_gpc') && get_magic_quotes_gpc())
{
function strip_slashes($input)
{
if (!is_array($input))
{
return stripslashes($input);
}
else
{
return array_map('strip_slashes', $input);
}
}
$_GET = strip_slashes($_GET);
$_POST = strip_slashes($_POST);
$_COOKIE = strip_slashes($_COOKIE);
$_REQUEST = strip_slashes($_REQUEST);
}
function customError($errno, $errstr)
{
echo "Error: [$errno] $errstr<br>";
echo "Ending Script";
die("Ending Script");
} set_error_handler("customError");
$myData = $_GET["data"];
$myFile = "ToDoListInProgressJson.json";
$fileHandle = fopen($myFile, "a");
fwrite($fileHandle, $myData);
fclose($fileHandle);
?>
What I have tried:
when I refresh the browser page my new task disappears That means task is not saved in Json file...
Please Explain where am I going wrong.
Submit an article or tip