I am in the process of developing a todo application using Django and Ajax. Upon loading, I retrieve all tasks from the database and display them. When a user clicks on a task, my goal is to mark it as completed. However, I am encountering the following issues:
- I am struggling to access dynamically generated HTML elements and the response object outside of the buildList() function.
- When I add an event listener to a task (span element with class = title), I am unable to access the task object in order to send it to the backend using an Ajax request and manipulate it accordingly.
todo.js
buildList()
function buildList(){
var wrapper = document.querySelector("#list-wrapper")
wrapper.innerHTML = ''
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://127.0.0.1:8000/api/task-list/', true)
xhr.onload = function(){
if(this.status==200){
var list = JSON.parse(this.response)
for (var i in list){
var item = `
<div id="data-row-${i}", class="task-wrapper flex-wrapper">
<div style="flex:7">
<span class="title">${list[i].title}</span>
</div>
<div style="flex:1">
<button class="btn btn-sm btn-outline-info edit">Edit</button>
</div>
<div style="flex:1">
<button class="btn btn-sm btn-outline-dark delete">-</button>
</div>
</div>
`
wrapper.innerHTML += item
}
for(i in list){
var tasks = document.querySelectorAll('.title')
tasks.forEach(function(el, list){
el.addEventListener('click',()=>{
console.log(list[i])
})
})
}
}
}
xhr.send()
}
// Adding a Task //
var form = document.querySelector("form")
form.addEventListener('submit', (e)=>{
e.preventDefault()
var title = document.getElementById('title').value
var xhr = new XMLHttpRequest()
xhr.open('POST', 'http://127.0.0.1:8000/api/task-create/', true)
xhr.setRequestHeader('Content-type','application/json')
xhr.setRequestHeader('X-CSRFToken',csrftoken)
xhr.onload = function(){
if(this.status==200){
buildList()
document.getElementById('form').reset()
}
}
xhr.send(JSON.stringify({"title":title}))
}
)
// Marking a task as complete //
function taskComplete(e){
console.log(e.target)
}
index.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static 'styles.css' %}">
<title>To Do</title>
</head>
<body>
<div class="container">
<div id="task-container">
<div id="form-wrapper">
<form id="form">
<div class="flex-wrapper">
<div style="flex: 6">
<input id="title" class="form-control" type="text" name="title" placeholder="Add task">
</div>
<div style="flex: 1">
<input id="submit" class="btn" type="submit" >
</div>
</div>
</form>
</div>
<div id="list-wrapper">
</div>
</div>
</div>
</body>
<script src="{% static 'todo.js' %}"></script>
</html>