Ajax with tables


#1

There may be an easy solution, but I just can’t seem to get this to
work…

I’m using tables for part of my site, as they contain a lot of rows and
columns full of financial data, so just working with div’s and dd’s…
etc,
won’t do.
My table structure is pretty simple, as follows:

=================

name date
=================

Now, I’m trying to use ajax to insert additional TR’s to the top of the
“items” table.
This works absolutely perfect, only if I omit the TR’s that contain the
TH’s.

I can’t seem to find a way to update the list at the top, and have the
TR’s
be inserted “below” the TH’s.

Seems like a common task to push something on the top of a table, but
the
darn table headings is messing up my whole schtic :slight_smile:
Any ideas would be greatly appreciated.


#2

give the header row an id like ‘header’ and insert the new tr’s after
that…


#3

In this case, the TR is added “directly” below the TR with an id of
‘header’, which contains the table headers.
So, it ends up rendering like:

As you can see, it doesn’t add after the entire element, but after the
declaration, as the TH elements are nested within the TR.

this new TR inserted here. doh !
name date

#4

A slight change in table to add a thead for the header cells would not
only make your task easier, but also offer improvements to your users
(ie: when printing).

view.rhtml

<%= render :partial => 'item', :collection => @items %>
Name Date
==========

_item.rhtml

<%= item.name %> ==========

With a table set up this way you can insert the partial into the top of
“insert-here” with a “page.insert_html :top, :partial => ‘item’” using
RJS (for example).


#5

Hot damn Colin… that did it :slight_smile:

I thought I read somewhere that not all browsers support the
thead/tbody/tfoot syntax… but “not all browsers” is probably a very
cliche
term anyway.
I’m not a “web designer” per se… and obviously need to read up on
table
structures :slight_smile:

Thank you very much Colin !!