Question

I have a question, I have a sortable list and also a dialog box where I will add a task to be stored in the database and after I hit f5 to refresh the page then the new added task will be place on the sortable list. this work properly. I need to use auto refresh so that the user will not always hit f5 to see the new added task. How can I do this? I’m using ajax to store the task into the database.

I’ve used .sortable(“refresh”) but it won’t work. Here is my code:

The code for sortable list

jQuery(".b ul").sortable({
connectWith: [".b ul"],
revert: true
});

The code for ajax to store into the database

jQuery.ajax({
 type: "POST",
 url: "add-task.php",
 data: "title="+title+"&task="+task,
 success: function(html) {
  jQuery(".b ul").sortable("refresh");
 }
});

anyone who can help? Thank you, Justin.

Answer 1

Why not just use Insert/Append in the list?

jQuery.ajax({
type: "POST",
 url: "add-task.php",
 data: "title="+title+"&task="+task,
 success: function(data) {
  jQuery("<li>"+data+"</li>").appendTo(".b ul");
 }
});