0

I'm trying to create my own TODO-WEB-APP.

I am trying to add delete feature to my app.

I am using get a request from server.js, and pass (by res.render) array of tasks to the hbs file.

Now, after I got the data from server.js I display it in the hbs file, then I want to allow the user the option to choose the task he wants to delete.

my problem is that I just don't know how I can get this data back from the hbs, once the user chooses the task to delete.

The code in server.js (the request):

/*All tasks*/
app.get('/allTasks',(req,res)=>{ //get (go to) the allTasks (hbs file)
  Todo.find().then((todos) => {
    //console.log(todos);
    var arrayOfTodos = [];
    var missionIndex = 0;
    todos.forEach(function(element){
      //console.log("\n\n\n\n\n elemnt details: ",element.text + "\n",element.completed+"\n");
      missionIndex = missionIndex + 1;
  var addToArrayJson = {
        text: element.text,
        completed: element.completed,
        missionNumber: missionIndex
      }
      arrayOfTodos.push(addToArrayJson);
      console.log("ff\n\n", addToArrayJson);
     });
     res.render("allTasks.hbs", {
       pageTitle: "All tasks: ",
       todos: arrayOfTodos
       });
       console.log("\n\n\n\n\n\n\ is::: \n\n\n\n\n",arrayOfTodos);
   });
   console.log("req is: \n\n\n", req);
});

The code in the hbs file:

    <form id="delete">
      <input value="Delete" type="submit">
    </form>
<select id = "chooseDelete" form="delete">
        <option> Choose task to delete</option>
        {{#each todos}}
        <option>{{missionNumber}}</option>
        {{/each}}
        </select>

in this way, I got the value in the address line, but I don't know how to grab it and send it to the server.js.

in this way:

<p id="demo"></p>
        <button id="deleteButton">Delete</button>

        <script>
        deleteButton.addEventListener("click", function(){
            document.getElementById("demo").innerHTML =  document.getElementById("chooseDelete").value;
        });
        </script>

I just get the value in: document.getElementById("chooseDelete").value; But again, I don't know how to pass it back to the server.

[You can see this pic][1]

please help me if you can.

Sagiv Asraf
  • 21
  • 1
  • 6

1 Answers1

0

I recommend you to do an Ajax DELETE request.

So... basically you will get your taskID to delete and send the ID to your server with the DELETE request.

I will exemplify:

  1. Select task with ID 1 to delete.
  2. Get selected task ID prepare to make an Ajax request
  3. Make an Ajax request on the resource DELETE /task/1
  4. The API will return status code 204 No Content, 404 Not found to a not found item and more based in your necessity.
Marlom
  • 578
  • 5
  • 15
  • thank for you answer. If I use ajax request, how can I pass the data to the server.js? I tried this: function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { document.getElementById("demo").innerHTML = "ffff"; }; xhttp.open("GET", "server.js", true); xhttp.send(); } but the server.js didnt get the data. I have to do new request in the server file? Or the get request in the server file include all the data and will get back from AJAX the id? – Sagiv Asraf May 30 '18 at 09:10
  • You must have an server to receive your data. Seems like you are using Express as your http server. So you must run something like "node server.js", also you must have an HTTP endpoint like "/task/1" to submit your ajax... xhttp.open("GET", "/task/" + TASKID, true); I strongly recommend you to follow some "getting start" guide [like this](https://codeburst.io/getting-started-with-node-js-a-beginners-guide-b03e25bca71b) – Marlom May 30 '18 at 22:37