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');
- });