How to make my existing list items editable in my "To-Do List" and resaved

Question

I am in the process of creating a To-Do List App using JavaScript and jQuery (and HTML and CSS) based on the code example from the JavaScript Book Chapter 7 Code example.

Link to Chapter 7 of Book: http://javascriptbook.com/code/c07/

Link to HTML Example Code: view-source:http://javascriptbook.com/code/c07/example.html

Link to JS Example Code: http://javascriptbook.com/code/c07/js/example.js

Link to jQuery Code from JS Example Code: http://javascriptbook.com/code/c07/js/

In the given code example, it has only met 1 of the 4 total requirements for the assignment which is to be able to add jquery-1.11.0.js an element to the list. The requirements that it is missing are: editing an existing element, deleting a completed element or all the completed elements, and marking an element as completed and also being able to unmark it as completed.

Implementing the jQuery / JavaScript code to perform these tasks has me very confused because it's my first time ever doing this. For the mark completed requirement, I think that it would be best that on a click of an existing item a line is put through it showing that it has been completed and on a second click the line would go away meaning that it would be marked as uncompleted again. I'm just trying to think of ways that I would be able to accomplish all of these requirements, but I have no clue what's the first step that I have to take to do them in JavaScript / jQuery.

I've tried to research how to make the list items editable, but I haven't found any helpful information about how to do this to fulfil that minimum requirement.

  <ul>
      <!-- List of Items -->
    <li id="one" class="hot"><em>fresh</em> figs</li>
    <li id="two" class="hot">pine nuts</li>
    <li id="three" class="hot">honey</li>
    <li id="four">balsamic vinegar</li>
  </ul>

I need to get it to where when you click on the existing item in the list once it will allow you change what that item says, and when you hit enter or click off of the item it saves the change of that item.

Answer 1

There is more than one way to solve this.

You could make each elemet of your list editable with:

contenteditable="true"

Example:

<li id="one" contenteditable="true" class="hot"><em>fresh</em> figs</li>

Or you could make the list itself editable:

<ul id="editableList" contenteditable="true" class="list">

To save the list you could use onblur:

<ul id="editableList" contenteditable="true" class="list" onblur="saveContenteditable()">

At least we need a simple function to save everything (javascript):

   function saveContenteditable(){
     var xr = new XMLHttpRequest();
     var url = "save.php";
     var text = document.getElementById("editableList").innerHTML;
     var vars = "changList="+text;        
     xr.open("POST", url, true);
     xr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     xr.send(vars);
 }

This will send the changes to a php script (save.php).

$saveList = $_POST["changeList"];echo "$saveList";