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