[jQuery] Refreshing a div after a Ajax operation
Well I'm trying to do something like this
http://lastkarrde.com/q7todo/
but this example has a problem that after a new task has been added by
ajax, it does not update the task lists ie suppose i have 2 task in
the list now and now i add another one successfully, it showed me the
message that 1 task has been added name "foobar" but in task list it
still shows 2 tasks not 3
How to update the task list div>ul after the ajax operation
Well I tried something like below
$('#submit').click(function(){
var note = $('#wrapper textarea').val();
if(note == defaultText || note == ""){
$.jGrowl("Please write something meaningful");
$('#wrapper textarea').focus();
} else {
$.ajax({
type: "POST",
url: "process1.php",
data: "content=" + note,
success: function(msg){
$('#wrapper').slideUp('2000');
$.jGrowl(msg);
$('#container ul').empty().load('index.php #container ul');
$('#container span.highl').empty().load('index.php #container
span.highl');
$('#container').hide().fadeIn('6000');
}
});
}
});
but there are couple of things i dont like about the code.
1. I've used load function to update the content of 2 div. I'm sure
there's some better way to do this
2. And something mysterious is happening in the database. its
something like that
suppose in the db i've 2 task like
id=1 task="blabla"
id=2 task="blabla"
at this point if i add a new task it should have the id=3 and
task='whatever' and placed after id=2
and after that if i add another task using the script then it would
have id=4 but its placing itselft on the db before id=3 while it
should be placed after id=3
please help me to work around with this