Textbox loses focus during async ajax call using jQuery

Question

Hi all

I have been working on on an AJAX chat application using php, mysql. It's almost done now; the only issue I am facing is that the textbox where the user types his message to post a reply keeps losing its focus during the async ajax calls.

What is happening here is that I have two divs which are being constantly updated with two different AJAX calls. One is for the online users and another one is for the messages list. It's working perfectly. To give the users a real time view I have to fire the ajax calls very frequently, like every 2 secs or something near to that. The ajax functions are working perfectly; only while the ajax call is in progress and the user is typing a message does it lose focus, and the user has to click somewhere else in the browser and come back to the textbox to type again.

Any sort of help is appreciated. Best regards.

Answer 1

Kind of a lazy workaround, if it even works, but can you put a textbox.focus() in the ajax call to give focus back to the textbox?

Answer 2

Can you give more details about how you are initiating the calls and handling their return? It definitely shouldn't be doing that.

To give you an example, practically every autocomplete implementation does the exact same thing but doesn't lose focus. You type in an input box and a div below the input box is constantly updated with autocomplete options/suggestions via ajax calls all without losing focus of the input box.

Answer 3

Updating a DOM element using asynchronous AJAX calls shouldn't interfere with your form focus. Could you post some of your code? I think without the code we can do little to help you.

Also, the symptoms you describe might also come from a browser freeze. How heavy is the processing during and after an AJAX call?