appending <div> to page and changing focus to the new input box in that <div>

[Nomad]

I am new to prototype.js and am experimenting on my website at
http://www.6811.com . Basically, I have a single HTML page with single
input box on it. I am using prototype.js and Ajax.Updater in HTML and
the script sends text from input box to server.php script ran on the
server. The server.php script simply appends the text the user enters
plus another input box to the existing screen. I have 2 questions. 1.)
How do I change focus to the appended input box? 2.) How can I scroll
the screen. Enter text at the prompt and press the 'Enter' key to see
how it works. You will note that the text you type will appear on the
screen and below that will be the next input box (borderless). You
will also notice that the focus and cursor is still on the first input
box. You can keep pressing the 'Enter' key to add more text to the
screen. Eventually it will reach the bottom and disappear. That is why
I need to be able to scroll. Any ideas? The best way I can describe
what I am doing is a chat script between user and server.

[Diodeus]

1) Setting focus

In your Ajax call add:

evalScripts:true

as a parameter. In your response, add a JavaScript block to set the
focus as you normally would - $('someID').focus()

2) Scrolling

Find the position of a DIV at the bottom of the screen. I like this
handy function from Quirksmode:

function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return [curleft,curtop];
}

so you would do this:

myPos = findPos($('someDiv'))
window.scrollTo(0,myPos[1])

[Nomad]

Diodeus,

First of all, thanks for the input. I really appreciate it.

Your solution to #1 works provided that I change the ID of the newly
appended input box. That is a simple task to do in my server.php
script. The problem then becomes that my other scripts that monitor
the input box kepresses no longer works because the ID has changed. My
CSS styles are now also lost. I am thinking there must be a way that I
can keep the ID the same for every appended input box and set focus to
the last input box. I am looking for the solution that may find the
last input box named 'iBox'. I am thinking that somehow I can create
an array of input boxes, get the array count, and then set focus to
the last one. I am just tossing out ideas as I type. Being new to
prototype I will check out the help file for more information.

I haven't tried solution # 2 yet. I want to find a solution for #1
first.

Nomad

[T.J. Crowder]

Hi Nomad,

> Your solution to #1 works provided that I change the ID of the newly
> appended input box.

> ...

> I am thinking there must be a way that I
> can keep the ID the same for every appended input box and set focus to
> the last input box.

You can use the ID as it is, no need to change it. From your latter
comment above, it almost sounds like you're trying to append multiple
copies of an input box that all have the same ID to the document, and
then find the last of those. Apologies if I'm misunderstanding that,
but if that's what you're trying to do, you can't -- the ID of an
element must be unique within the document.[1] Names can be non-
unique, but IDs must be unique. So if you have this markup for the
input box:

<input type='text' id='mythingy' size='10' />

You can only append that to the document *once*, because IDs must be
unique.

[1] http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2

FWIW,
--
T.J. Crowder
tj / crowder software / com

[Diodeus]

As T.J. said, each ID should be unique.

Alternately you can do this the old-fashioned DOM way:

document.yourformname.yourelement.focus()