How to avoid auto load clearing the text user is writing right now?

Question

I try to build a Twitter-like message feed. I'm using AJAX to update the feed every 10 seconds. My problem is that so far the auto update function updates the whole feed on every reload. That's ok until the user starts to write a reply. The text disappears when the next auto update begins.

Do you have a idea how to prevent this?

This is how I auto load the page

function autoUpdate(div, url) {     
    $(div).load(url).fadeIn(200);  
}
$(document).ready(function()  {
    $.ajaxSetup({ cache: false });    
    autoUpdate('URL_TO_FEED_AS_HTML', '.discussion');   
    setInterval("autoUpdate('URL_TO_FEED_AS_HTML', '.discussion')", 10000); 
});

Answer 1

You could check if the input field is empty or not, if its not, don't auto update. Then when they post you would empty the input and your auto updating would continue.

$(document).ready(function()  {
    $.ajaxSetup({ cache: false });  

    autoUpdate('URL_TO_FEED_AS_HTML', '.discussion');   
    setInterval(function() {
        if ($('input').val().length != 0) {
            autoUpdate('URL_TO_FEED_AS_HTML', '.discussion');
        }
    }, 10000); 
});

As recommended by Rory McCrossan, You would get much better performance and functionality from appending the latest discussions. You could do this by querying anything newer than the current timestamp (timestamp of when they last queried and not just before you query results), then use append() to add the data onto the page.

Answer 2

You don't need to reload the form every ten seconds, just retrieve the new messages from the server.

In order to do it you have to change some logic, both client and server side.

Also, have look on websocket, it may be useful for what you what to do. Basicaly you wont have to reload the whole messages, an event will occure when a new message is send and you will just load it.

Answer 3

Actually,i ddint get your question clearly...but what i understood is you are refreshing entire screen because of that problem is there...so just try to create two different div's and render them according to your need.