Help with an App Architecture question

I have a view that has a swath of innerHTML in it. This innerHTML
resides in an HTML table, and it is updated every second by a
javascript timer which, through anX MLHttpRequest, reads a file of
JSON data which is written to the server by another application.

The upshot is, this table is live on the web page. Within this table,
I will have a link which the user can click, which would then open
that row from that live table, in a formview to be user-edited.

I plan on using http://www.prototypejs.org/api/element/toggle to pop
this open. The problem is, this would require a div for each row that
would have the form. As you can see from my description, I am updating
this row every second, and at times there can be two dozen or more
rows -- which is too much data to push through.

I'm wondering if anyonw can offer me any good ideas on how to solve
this dilemma. I need to keep the data, the html, for the table as
light as possible, When the user click the rows link, I need to open
the form up within the rows (the typical type of editing behavior you
see in web apps).

Does anyone see a better way to accomplish this? Thanks, RVince

wondering if anyonw can offer me any good ideas on how to solve

this dilemma. I need to keep the data, the html, for the table as
light as possible, When the user click the rows link, I need to open
the form up within the rows (the typical type of editing behavior you
see in web apps).

Does anyone see a better way to accomplish this? Thanks, RVince

Why not create the form on the fly ? Or have a single form hidden
somewhere which you reveal and move to an appropriate location when
needed ?

Fred

Fred,

I would love to create it on the fly, but cannot figure out how to. I
was thinking of a partial, inside the div -- but that actually renders
when loaded. How would I do what you are thinking -- I cant see a way
to actually do that (what I see, are ways that APPEAR to do that, but
really dont) -Rvince

Well to pick something really simple:

$('container').insert("<form> ... </form>").

will add an (empty) form into the specified dom element.

Fred

Fred,

I must not be understanding you correctly. I would still need to put
an entire form inside a hidden div for each row, and do the whole
thing in the hidden html -- which is what I am trying to avoid doing.
But I may not be understand you correctly?

Not necessarily. in one place only you could have a javascript
function:

function createForm(container){
  $(container).insert(...)
}

and then the various table rows have that function as their onclick
(or you add that function as an event handler via the non obtrusive js
way of your choice).

Not helping solve the problem at all but just to point out that a form
cannot wrap a row or group of cells in a table, it is not valid html.
The form must include the whole table or the form must lie entirely
within one cell. Do not be led astray by the fact that it appears to
work in some browsers, it will not work in all. It is a pain but that
is the way it is.

Colin

Colin,

THank you. However, in this case, the form doesn't contain the rows,
but actually resides between them, in a separate div if that is at all
possible. After examining this, I am convinced there is no way to
feasibly do it aside from say, a link in the table that opens up a
form in redbox/lightbox. And even that may not work.

Colin,

THank you. However, in this case, the form doesn't contain the rows,
but actually resides between them, in a separate div if that is at all
possible. After examining this, I am convinced there is no way to
feasibly do it aside from say, a link in the table that opens up a
form in redbox/lightbox. And even that may not work.

I may be wrong but I do not believe that a div is permitted between
rows either. To test generate some simple a simple test html page and
paste the source into the html validator at
http://validator.w3.org/#validate_by_input

Colin