Search jQuery

jQuery Forum

Using jQuery UI

jmonday

Dialogs, Cloning and Live

Working on it

Need more info
Working on it
Answered

in Using jQuery UI • 10 years ago

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!

$('.task_add').live('click', function(e) {
e.preventDefault();
var targetUrl = $(this).attr('href');
// Clear values
$('#name').val('');
$('#description').val('');
$('#url').val('');
$('#dialog_task_add').dialog({
autoOpen : false,
bgiframe : true,
draggable : false,
modal : true,
resizable : false,
width : 'auto',
buttons: {
'Save': function() {
$.ajax({
type : 'POST',
url : '../tasks/add.php',
data : $([]).add('#name').add('#description').add('#url'),
success : function (response) {
if (response == 'SUCCESS') {
$('#dialog_task_add').dialog('close');
// Update the various values
$('#name-TASKID').text($('#name').val());
$('#description-TASKID').text($('#description').val());
$('#url-TASKID').text($('#url').val());
// Rename the IDs
// Not yet implemented
// Show the created item
$('#task_TASKID').clone().appendTo('.tasks').slideDown();
} else {
// Alert in a better way once other portions of code are complete
alert('OH NO!');
};
},
});
},
'Cancel': function() {
$(this).dialog('close');
},
}
});
$('#dialog_task_add').dialog('open');
});

Replies(5)

rickvhoeij

Re: Dialogs, Cloning and Live

10 years ago

Hey,

The reason why your task aren't editable is because you haven't added an eventhandler to them ... as far as I can see that is. In your case I would just add eventhandler to the tasklist and use the event to find the tasks. That way you won't need a live function and it still works on all the tasks. Something like this: