Adding Jquery UI to UL in HTML

Question

I want to be able to add jquery UI to the list on GoalNotes This table gets populated by what the user enters in the "name1" and "data1" input fields. Every time I give the an id, the program breaks and I get no errors. Any ideas on how I could apply animations to the table rows that get added after the user inputs data?

html

<section class="section section--active color1" data-letter="M">
  <article class="section__wrapper">
    <h1 class="section__title">Monday</h1>
    <div id="Monday" class="tabcontent">
      <form name="goalsList1" action = "/created" method="POST">
        <div id="tab1">
          <table>
            <tr>
              <td><b>New Goal:</b><input type="text" name="name1" id="name1"></td>
              <td><b>Notes:</b><input type="text" name="data1" id="data1"></td>
              <td>
                <input type="submit" value="Save"  onclick="SaveItem(1)"> 
              </td>
            </tr>
          </table>
        </div>
        <div id="items_table1">
          <h2>List of goals</h2>
          <table id="list1" contenteditable> </table>
          <p>
            <label><input type="button" value="Clear" onclick="ClearAll(1)"></label>
          </p>
        </div>
      </form>
    </div>
  </article>
</section>

javascript

function doShowAll(numOfWeek) {
  if (CheckBrowser()) {
    var key = "";
    var list = "**<tr><th>Goal</th><th>Notes</th></tr>**\n";
    var i = 0;
    var goals = localStorage[numOfWeek] ? JSON.parse(localStorage[numOfWeek]) : {};
    var goalsKeys = Object.keys(goals);
    for (i = 0; i < goalsKeys.length; i++) {
      key = goalsKeys[i];
      list += "<tr><td>" + key + "</td>\n<td>"
      + goals[key] + "</td></tr>\n";
    }
    if (list == "<tr><th>Goal</th><th>Notes</th></tr>\n") {
      list += "<tr><td><i>nothin' here</i></td>\n<td><i>nothin' here either</i></td></tr>\n";
    }
    document.getElementById('list'+numOfWeek).innerHTML = list;

  } else {
    alert('Cannot store list as your browser do not support local storage');
  }
}

$(document).ready(function(e) {
  $('#due-date').datepicker();
  $('#add-todo').button({
    icons: {
      primary: "ui-icon-circle-plus"
    }
  }).click(function() {
    $('#new-todo').dialog('open');
  }); // end click
  $('#new-todo').dialog({
    modal: true,
    autoOpen: false,
    close: function() {
      $('#new-todo input').val(''); /*clear fields*/
    },
    buttons : {
      "Add task" : function() {
        var taskName = $('#task').val();
        var dueDate = $('#due-date').val();
        var beginLi = '<li><span class="done">%</span><span class="delete">x</span>';
        var taskLi = '<span class="task">' +   taskName + '</span>';
        var dateLi = '<span class="due-date">' +   dueDate + '</span>';
        var endLi = '</li>';
        $('#todo-list').prepend(beginLi + taskLi + dateLi + endLi);
        $('#todo-list').hide().slideDown(250).find('li:first')
        .animate({
          'background-color': '#ff99c2'
        },250)
        .animate({
          'background-color': '#d9b3ff'
        },250).animate; // end animate
        $(this).dialog('close');
      },
      "Cancel" : function() {
        $(this).dialog('close');
      }
    }
  }); 

  $('#todo-list').on('click','.done',function(e) {
    var $taskItem = $(this).parent("li");
    var $copy = $taskItem.clone();
    $('#completed-list').prepend($copy);
    $copy.hide().slideDown(); 
    $taskItem.remove();
  }
                    ); // end on

  $('#todo-list, #completed-list').on('click','.delete',function(e) {
    $(this).parent("li").slideUp(250, function() {
      $(this).remove();
    }); // end slideup
  }); // end on

  $('#todo-list').sortable();

}); // end ready

http://jsbin.com/digefufeca/edit?html,css,js,console,output

Answer 1

The problem

The form with nane goalsList1 is sending whenever you click on the button.

Why? because the button is submit button.

The solution(s)

1. Replace the button's type to button. (link)
2. Prevent the form submission by event.preventDefault(). (link)

There are more ways but those are the major.

Note: your code still not working but now you can see the error message.