Using focus() on text input works on firefox but not on IE

[ghostz00]

This script works fine in firefox, but not in IE. Basically it's just a simple ajax script that adds a text input everytime the user clicks a button. And after the user clicks it I want the newest text input to have focus.

function useHttpResponse() {
if (http.readyState == 4) {
if(http.status == 200) {
//id to update the website
document.getElementById('update').innerHTML=http.responseText;
document.getElementById('loading').innerHTML="";
var num=count-1;
if (num>=0){
document.forms[0].elements['text'+num].focus();
}
}
}
}

I've Also tried with no luck:
var r= document.getElementById('text'+num);
r.focus();

Both give me no errors.
Thanks in advance.

[Pyth007]

IE seems to have a problem of needing time to finish the function before the focus() will work. You may want to try:

setTimeout("document.forms[0].elements['text'+num].focus();", 100);

[ghostz00]

How do I correctly use the variable num? (it says it's undefined)

[Pyth007]

You're using correctly as long as count is defined... What is count?

[ghostz00]

Count contains the number of text input boxes I have. Then from there I use a loop to create the text boxes using php. Let me know if there is a better way to add text inputs dynamically.

And if I do alert(num); before the line executes my value starts at 0 then increments like it should.

[ghostz00]

You were absolutly correct about the setTimeout.

I still couldn't figure out how to use it with just the one line so I made it into a function.

function useHttpResponse() {
if (http.readyState == 4) {
if(http.status == 200) {
//id to update the website
document.getElementById('update').innerHTML=http.responseText;
document.getElementById('loading').innerHTML="";
setTimeout("textFocus()",100);
}
} else {
document.getElementById('loading').innerHTML = "<img src='images/ajax.gif' alt='Loading...' title='Loading' /> Loading please wait...";
}
}

function textFocus(){
var num=count-1;
if (num>=0){
var r=document.forms[0].elements['text'+num]
r.focus();
}

Thanks a lot for your help...I probably wouldn't have figured that one out on my own.

Thanks again

[Pyth007]

I wracked my brain over that one too, before finding the solution on someone's "JS Gotcha's" page (not sure where now...) Same problem if using select()...

As for dynamically creating textboxes, have you looked into DOM methods? If you don't need to gather info. from the server, it may be better to make your boxes on-the-fly using js:

function createTB()
{
var tb=document.createElement('input');
tb.setAttribute('input', 'text');
tb.id='TextBox'+count;
tb.onclick=function(){validateText(this.value);}
return tb;
}


I just wanted to also show different ways to set attributes, functions etc.

[ghostz00]

...That's definitly a better idea than what I did and I think that i'll change it. No sense in hitting the server if I don't have to, thanks again.

[ghostz00]

What's the difference b/t using your method and just using a script to update the innerHTML. For example:

function addInput(){
var innerHtml = '<input name="text'+count+'" type="text"><br />';
divHtml += innerHtml;
document.getElementById("tb").innerHTML=divHtml;
count++;
}

This seems to work but the first text input has undefined right before it. And I don't know why?

[Pyth007]

There's only a few differences between using DOM and innerHTML...
The main one is that the DOM is standardized by the W3C whereas innerHTML is a "browser-specific" method; however being that all browsers (I'm almost absolutely sure) use this method, the point is probably moot.

Also with the DOM, you have a pointer to the HTML object. This might be helpful if you wanted to do additional manipulations with it. For example, in a menu system I've developed, I store a pointer to a <div> that holds the menu-header, and one to another <div> that holds the contents of any sub-menus. Then I can arrange these different menu objects in any order by grabbing the correct object pointer. I can also use DOM methods to move around the menu after all of the divs have been connected together but before the entire menu structure is posted to the page.

On the otherhand, Quirksmode did a performance test among several different methods for generating HTML elements and found that innerHTML was faster than the DOM (albiet the split-second difference would probably be negligible under most circumstances, and wouldn't be noticed by the user).

As for the 'undefined' before the first text box, my only guess is that since you are adding each box to divHtml, the initialization of divHtml is causing problems... Also I'm not sure why you add the string innerHtml to divHtml and then keep changing 'tb's innerHTML; if you are calling addInput() inside of a loop, I'd just keep adding to your string until the end of the loop where you'd then assign the entire divHtml string to the innerHTML of 'tb'.