Dialogs, Cloning and Live

Dialogs, Cloning and Live

I have a form that I am using in a dialog modal box. This form is
submitted via AJAX to a backend PHP script that inserts a record into
the database.

Next the item that has been inserted into the database (a list of
tasks) that task is added to the end of an unordered lists.

I also have this unordered list setup so I can drag and drop the list
items to sort them. Once dropped, again, a script updates the
database.

Lastly, I have an inplace editor setup so I can easily edit the
contents of each task.

When I click on my link to open the dialog box, once the form is
saved, a 'template' task is copied and modified with the contents from
the form.

Everything works perfectly except after I add new tasks, they are not
editable until I reload the page. I thought using live() would fix
this, but it does not. Below is my code for this dialog box. I am not
superb with jQuery so if you see things that look very wrong or have a
better way to complete this task, please let me know.

Thank you!
























  1. $('.task_add').live('click', function(e) {
  2.   e.preventDefault();
  3.   var targetUrl = $(this).attr('href');
  4.   // Clear values
  5.   $('#name').val('');
  6.   $('#description').val('');
  7.   $('#url').val('');
  8.   $('#dialog_task_add').dialog({
  9.     autoOpen  : false,
  10.     bgiframe  : true,
  11.     draggable : false,
  12.     modal     : true,
  13.     resizable : false,
  14.     width     : 'auto',
  15.     buttons: {
  16.       'Save': function() {
  17.         $.ajax({
  18.           type     : 'POST',
  19.           url      : '../tasks/add.php',
  20.           data     : $([]).add('#name').add('#description').add('#url'),
  21.           success  : function (response) {
  22.             if (response == 'SUCCESS') {
  23.               $('#dialog_task_add').dialog('close');
  24.               // Update the various values
  25.               $('#name-TASKID').text($('#name').val());
  26.               $('#description-TASKID').text($('#description').val());
  27.               $('#url-TASKID').text($('#url').val());
  28.               // Rename the IDs
  29.               // Not yet implemented
  30.               // Show the created item
  31.               $('#task_TASKID').clone().appendTo('.tasks').slideDown();
  32.             } else {
  33.               // Alert in a better way once other portions of code are complete
  34.               alert('OH NO!');
  35.             };
  36.           },
  37.         });
  38.       },
  39.       'Cancel': function() {
  40.         $(this).dialog('close');
  41.       },
  42.     }
  43.   });
  44.   $('#dialog_task_add').dialog('open');
  45. });