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 Prototype API Documentation | Element.toggle (Deprecated URL) 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

Colin