Stephen Haney

Email conversation

From	Stephen Haney
To	Me
Subject	insertBefore - using DOM to insert my input in the right location
Date	11 August 2004 01:30
Attachment	file using appendChild to add a TR containing a form input to the end of a tbody

Hey there, your site is very helpful, it's a great resource.

I have a specific question though that I'm having trouble solving just
by googling around to different javascript sites.  My basic format is
this:

static coded html
-------------------------
I have a table - inside the table is my form with all my hard coded
fields and everything.


Generated Dynamically
---------------------------------
I'm dynamically generating a new 'file' type input INSIDE a
dynamically generated table row and cell, every time the user clicks a
specific text link.  This is all working fine.  This file input is for
'attachments'.  I need to have an unlimited number of attachment
inputs so I figured the best way would be to generate a new one each
time they clicked the button.

This is all great - the only problem I'm having is the location of the
generated file inputs.  At the moment I'm using appendChild as I don't
have a clear understanding of insertBefore - when I try to use it my
script fails to execute.  So my new form item is showing up in a table
cell at the very bottom of the form.

In the middle of my form, I have a hard coded table row with the ID
set to 'dept'.  Is there a way I can tell this table row to be
inserted into the space right before this 'dept' table row?  I'm
attaching the file I'm working on, just in case you need it.  There's
quite a bit of ASP at the beginning, just scroll down and you'll hit
the javascript.

Thanks for any help you can provide.  I have a feeling this might be a
pretty basic question.  Sorry if so, I haven't used javascript in
years.  I'm actually a graphic designer turned back end coder for
small in-company projects like these =)

-- 
Stephen Haney

From	Me
To	Stephen Haney
Subject	Re: insertBefore - using DOM to insert my input in the right location
Date	11 August 2004 08:13

Stephen,

using insertBefore is pretty much the same as using appendChild, except
that you must also obtain a reference to another element (HTML tag) that is
already in your document.

The method tells the browser to insert the new node before the existing one.

mytablebody.appendChild(mycurrent_row);

becomes

mytablebody.insertBefore(mycurrent_row,theRowToPutItBefore);

of course, you would need to obtain a reference to theRowToPutItBefore
first.
Say, for example, that you want to put all new rows before the row
containing the 'important' checkbox, you would need to assign an ID to the
row containing the checkbox:
<tr id="mySpecialRow">
 <td align="center" colspan="2">
   <input type="checkbox" name="important"  ... >Show In Project Overview
 </td>
</tr>

now, you use that ID to get the reference:
var theRowToPutItBefore = document.getElementById('mySpecialRow');

so, to put that all together:
var theRowToPutItBefore = document.getElementById('mySpecialRow');
mytablebody.insertBefore(mycurrent_row,theRowToPutItBefore);
...
<tr id="mySpecialRow">
 etc.


Hope this helps

Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

From	Stephen Haney
To	Me
Subject	Re: insertBefore - using DOM to insert my input in the right location
Date	12 August 2004 17:33

Hmm - getting closer.  Thanks a ton for the reply, you're helping a lot.

I have a problem now though where I'm getting an 'invalid argument'
error on this line:
mytablebody.insertBefore(mycurrent_row,theRowToPutItBefore);

I did a window.alert on theRowToPutItBefore.id and it was coming up
with the right id for that row, so I assume it has the correct row
referenced.

Could it be because the row I'm trying to put it before is staticly
coded?  While the new row is part of the tablebody I create in the
javascript?
mytablebody = document.createElement('TBODY');

Here's my entire script with the non-applicable junk weeded out (you
can safely assume the table row with the id 'mySpecialRow' is on the
page too):

[the current script]

----------------------------------------------------------------------------------------

Got any ideas or suggestions?  Anything is very appreciated.  You
certainly know your stuff :)

-Stephen

From	Me
To	Stephen Haney
Subject	Re: insertBefore - using DOM to insert my input in the right location
Date	12 August 2004 19:19

Quite right, the way you have done this will produce an error.
theRowToPutItBefore would need to be a child element of mytablebody

this is actually very easy to do as well:
instead of using the table body you just created as the parent, you need to
reference the actual parent element of theRowToPutItBefore. This is most
easily done using theRowToPutItBefore.parentNode

theRowToPutItBefore.parentNode.insertBefore(mycurrent_row,theRowToPutItBefore);

From	Stephen Haney
To	Me
Subject	Re: insertBefore - using DOM to insert my input in the right location
Date	12 August 2004 19:47

Duh - I should've known.  It's been a while since I've done much
object oriented child/parent based programming.  I had a feeling I was
making a fatal error when trying to create a new table body for it.

Thanks a ton for your help, much appreciated.

-Stephen

From	Stephen Haney
To	Me
Subject	Re: insertBefore - using DOM to insert my input in the right location
Date	12 August 2004 22:26

Shucks, one last question and then I'll leave you alone, I promise =)

This works great in IE, but in firefox when I add the new table rows
it doesn't see them as being included in the form, so the data isn't
passed along (even though the new table rows fall inside of the form
tags).  I guess this is a difference in the ways the browsers parse
dynamically added material.

I referenced my form and tried adding vFile as a child node of it, but
this didn't seem to make any difference.  Any tips?  Or should I just
tell my firefox users there's a 1 file per entry limit?

Thanks,
Stephen

From	Me
To	Stephen Haney
Subject	Re: insertBefore - using DOM to insert my input in the right location
Date	13 August 2004 21:24
Attachment	page using insertBefore to insert new file inputs

I cannot confirm this behaviour.

I put together a simple test script (attached) using the same basic code
from your script.

It worked perfectly in all gecko releases, from Netscape 6 (Mozilla 0.9.2)
to Firefox 0.9 (Mozilla 1.7).

It also worked perfectly in Opera 7+, IE 5+ on Windows, Safari, OmniWeb 4.5+.

ICEbrowser and Konqueror (v 3.0) only sent the first input.

IE Mac cannot create any inputs except text inputs.

I really don't know why you are having problems (and because I do not
understand ASP, I cannot modify it to check why). Maybe you can play with
my script to work out why yours is failing. Maybe it has something to do
with being inside a table.

Sorry, I will not be available to help for the next two weeks, so good luck.

Stephen Haney

Navigation

Search

Site navigation

Email conversation