simple text input focus confusion.

[snehula]

Hi there,

I have the following code:

if(value.length > 3) {
var xmlHttp = createXmlHttpRequestObject();
var params = "boo=" + value;
var url = 'boo.php';
xmlHttp.open("POST",url, true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", params.length);
xmlHttp.setRequestHeader('Cache-Control', 'no-cache');
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
var textResponse = xmlHttp.responseText;
if(textResponse == 0) {
document.getElementById('usr').value = "";
document.getElementById('usr').focus();
document.getElementById('servresp').innerHTML = "Hakuna matata!";
}
}
}
xmlHttp.send(params);
}
else {
document.getElementById('usr').value = "";
document.getElementById('usr').focus();
document.getElementById('servresp').innerHTML = "Booyakaa!";
}

This function is called on an onBlur event.
In the first case, when the ajax request is sent to the server and a 0 returned, the browser (Firefox in this case) clears the textbox, focuses back on it and shows the message. In the second case (without ajax request being sent - else clause) the browser clears the textbox, shows the message but doesn't focus back on the textbox.
How is this possible? The code is exactly the same, except for the message..

[JAB Creations]

Don't use responseText, use responseXML; unless the AJAX loaded content is a plain text file (meaning having absolutely no code).

Don't use innerHTML, it's an unreliable proprietary method, it does not correctly register the DOM and will cause all sorts of trouble when using JavaScript to reference an ID that was loaded via AJAX (such as trying to give it focus after the AJAX event has finished). Stick to appendChild, importNode or other standard W3C methods to take content from the AJAX resource and append/clone it to the page.

When writing a textNode use this instead of innerHTML...

document.getElementById('servresp').firstChild.nodeValue='Booyakaa!';

I highly recommend reading more about the DOM and methods such as lastChild, firstChild, appendChild, importNode, childNodes[0], parentNode, nextSibling, previousSibling, etc. Broken code should break though broken code is supported enough that it's difficult to know that it's breaking which is what you're very likely dealing with.

- John

[Fotiman]

I'm going to take an (almost) opposite stance from JAB Creations. :) We continue to disagree on this particular topic.

I would only use responseXML if the content returned is an actual XML document (not HTML). Since most web documents are HTML, not XML, it generally makes more sense to use responseText.

innerHTML is perfectly reliable, and no longer proprietary (added to HTML5). JAB and I have had lengthy discussions about this, but I have yet to see an example that breaks as he describes. Here is an old thread (I think one of our original discussions) that included some pretty extensive examples, including one example that I stepped through and rewrote to correctly use innerHTML:
[webmasterworld.com...]

With that said, I don't think there's anything wrong with using DOM methods like firstChild, appendChild, etc., and likewise I don't think there's anything wrong with using innerHTML.

@JAB Creations, I would love it if you could provide an actual example of why you think it causes problems. It sounds to me as though you made up your mind long ago about it, quite possibly on an invalid test case, and despite evidence to the contrary you continue to make this point. No offense intended, I just would like to have a stab at a real problem where this doesn't work for you. :)

@snehula, I would suggest using Firebug to add breakpoints and step through the code to see if it's doing what you think it is.

[JAB Creations]

...and I have to respectfully disagree with Fotiman, innerHTML is only reliable at basic levels. The proprietary Microsoft method does not register the DOM correctly. When you try to use JavaScript to interact with elements (such as giving focus or calling by ID) if they were loaded via JavaScript they will fail. The fact that it was added to HTML5 spec only shows that people who write specifications can be just as lazy as programmers.

Here is one page with examples of innerHTML problems...
[ajaxian.com...]

...more here...
[julienlecomte.net...]

I can agree with Fotiman about using Firebug. ;)

Fotiman, I don't have the time to create a stand-alone test case though if you want to create one and try to give focus to an anchor loaded via AJAX/innerHTML after the AJAX connection has closed.

- John

[Fotiman]

When you try to use JavaScript to interact with elements (such as giving focus or calling by ID) if they were loaded via JavaScript they will fail.

I don't have the time to create a stand-alone test case though if you want to create one and try to give focus to an anchor loaded via AJAX/innerHTML after the AJAX connection has closed.

See the thread I linked to above. I provided an example in that thread which showed that it was in fact possible.

With regards to the links you provided, they mention that despite some potential security issues, there are ways around them. So I still don't see a non-working example that you describe, and again, I think you may be making an invalid argument possibly based on an incorrect test case.