I have a demo page where I organize a to-do list .. I wanted it to be refreshed when it was updated with the tasks already posted earlier
<html>
<head>
<title>Demo</title>
<script src="~/Scripts/JavaScript.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
LoadTarefa();
}
</script>
</head>
<body>
<form action="~/Controllers/">
<label for="ctarefa">Tarefas:</label> <input href="#" class="active" onkeypress="return recarrega(event);" type="text" id='my_span'><br />
<div class="boxLista">
<ul id="Foo">
</ul>
</div>
<input type="reset" value="Delete" onclick="del()">
</form>
</body>
</html>
In my code js already have a working method method but I can not reconcile with get to always leave the page updated.
function OnEnter(evt) {
var key_code = evt.keyCode ? evt.keyCode :
evt.charCode ? evt.charCode :
evt.which ? evt.which : void 0;
if (key_code == 13) {
return true;
}
}
var j = 1;
function recarrega(e) {
if (OnEnter(e)) {
var p = document.getElementById('Foo');
var filhos = p.childNodes;
for (i = filhos.length - 1; i >= 0; i--) {
if (filhos[i].tagName == 'LI') {
p.appendChild(filhos[i]);
}
}
var tarefa = document.getElementById("my_span").value;
document.getElementById("my_span").value = "";
var li = document.createElement('li');
var label = " <label for='ckb" + j + "' id='lbl" + j + "' >" + tarefa + "</label>"
p.appendChild(li);
li.setAttribute("ondblclick", "HabilitaInput(" + j + ")")
li.id = 'my_span' + j;
li.innerHTML = "<input type='checkbox' id='ckb" + j + "' value='" + j + "' onclick='my_fun(" + j + ");'>" + "<input type='text' id='input" + j + "' value='" + tarefa + "' style='display: none' onkeypress='return atualizaTarefa(this," + j + ",event);'>" + label;
j++;
$.post("Start/GotTarefa", { tarefa: tarefa }, function (data) { alert('Application saved. ' + data); }, "String");
return false;
}
else
{
return true;
}
}
function my_fun(j) {
var chkbox = "ckb" + j;
var my_span = "lbl" + j;
var msg = chkbox + " " + my_span;
var li = "my_span" + j;
if ($("#ckb" + j).is(':checked')) {
document.getElementById(my_span).style.textDecoration = 'line-through';
document.getElementById(li).className = 'del';
}
else {
document.getElementById(my_span).style.textDecoration = 'none';
}
}
function HabilitaInput(index) {
var idInput = "input" + index;
document.getElementById(idInput).style.display = 'block';
document.getElementById(idInput).focus();
}
function atualizaTarefa(element, index, e) {
if (OnEnter(e)) {
var newtarefa = element.value;
var idInput = "input" + index;
var idLbl = "lbl" + index;
document.getElementById(idLbl).innerHTML = newtarefa;
document.getElementById(idInput).style.display = 'none';
$.post("Start/GotTarefa", { tarefa: newtarefa }, function (data) { alert('Application saved. ' + data); }, "String");
}
}
function del() {
var ul = document.getElementById("Foo");
var lis = ul.getElementsByClassName("del");
while ((lis).length > 0) {
lis[0].parentNode.removeChild(lis[0]);
}
}
function LoadTarefa() {
var id = j;
$.getJSON("Start/GetTarefa", null , function (data) {
var div = $('#boxLista')
$.each(data, function (j) {
printTarefa(j, div);
});
function printTarefa(j, div) {
var li = document.createElement('li');
var label = " <label for='ckb" + j + "' id='lbl" + j + "' >" + data + "</label>";
div.append("<input type='checkbox' id='ckb" + j + "' value='" + j + "' onclick='my_fun(" + j + ");'>" + "<input type='text' id='input" + j + "' value='" + data + "' style='display: none' onkeypress='return atualizaTarefa(this," + j + ",event);'>" + label);
li.setAttribute("ondblclick", "HabilitaInput(" + j + ")");
li.id = 'my_span' + j;
}
}
Controller:
[HttpPost]
public ActionResult GotTarefa(MyTarefa data)
{
if ( data != null )
{
return Json(string.Format("Tarefa: {0}", data.Tarefa.Count()), JsonRequestBehavior.AllowGet);
}
return View();
}
[HttpGet]
public JsonResult GetTarefa(MyTarefa data)
{
var tarefa = new List<MyTarefa>{
new MyTarefa {Id = data.Id, Tarefa = data.Tarefa}
};
return Json(tarefa,JsonRequestBehavior.AllowGet);
}
}
Model:
public class MyTarefa
{
public int Id { get; set; }
public string Tarefa { get; set; }
}