Я сделал список задач с функцией добавления и удаления задач. Я пытаюсь реализовать модификацию todo. Я использовал Jquery для редактирования полей, когда пользователь нажимает ссылку «Изменить и сохранить».
Я использую EJS в качестве шаблона.
Проблема в том, что я не знаю, как реализовать метод put в моем экспресс-коде? Я не знаю, является ли использование Jquery в этом случае правильным методом?
Вот мой код
Спасибо всем
TODO-лист-EJS:
<script>
function edit_row(id) {
document.getElementById("edit_button" + id).style.display = "none";
document.getElementById("save_button" + id).style.display = "block";
//Retrieve data first input field
//editTodo contain old data.
var editTodo = document.getElementById("newtodo" + id);
//Retrieve data into input field.
//Old data inside other variable who can change below.
var editTodo_data = editTodo.innerHTML;
//Replace input field by input with new data.
editTodo.innerHTML = "<input type='text' id='edit_text'" + id + "'value= '" + editTodo_data ">";
}
function save_row(id) {
var todo_val = document.getElementById("edit_text" + id).value;
document.getElementById("newtodo" + id).innerHTML = todo_val;
document.getElementById("edit_button" + id).style.display = "block";
document.getElementById("save_button" + id).style.display = "none";
}
</script>
<h2>Basic Todolist</h2>
<ul>
<% todolist.forEach(function(todo,index){ %>
<li> <a href="/todo/delete/<%= index%>">✘ </a>
<a href="/todo/edit/<%= index%>" id="edit_button<%= index%>" class="edit" onclick="return edit_row(<%= index%>)">Edit </a>
<a href="/todo/edit/<%= index%>" id="save_button<%= index%>" class="save" onclick="return save_row(<%= index%>)">Save </a>
<%=todo%></li>
<% });%>
</ul>
<form action="/todo/add/" method="post">
<p>
<label for="newtodo">Task : </label>
<input type="text" name="newtodo" id="newtodo" autofocus />
<input type="submit" />
</p>
</form>
TODO-LIST.JS (метод Put)
.put('/todo/edit/:id', function(req,res){
res.render('todo-list.ejs', {
todolist: req.session.todolist
});
})