jm
2010-02-02 23:22:07 UTC
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');
});
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');
});