Slide and edit within grid

[dphizler]

Hello,

(I tried to find a html google group but couldn't find and this is
also in relation to javascript/ajax)

Basically I have a html table with a bunch of data from a database
(MySQL).

I would like to be able to press on a link and have the a given table
row slide down to expand into the editing zone.

I would use Ajax to populate that editing space with the detail data
from the database.

So this would be my table:

<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Value</th>
<th>Edit</th>
<tr>
<tr>
<td>1</td>
<td>House</td>
<td>5000</td>
<td><a href="">Edit</a></td>
</tr>
<tr>
<td>2</td>
<td>Dog</td>
<td>2000</td>
<td><a href="">Edit</a></td>
</tr>
<tr>
<td>3</td>
<td>Cat</td>
<td>1000</td>
<td><a href="">Edit</a></td>
</tr>
</table>

If I wanted to change an entire row of my table using Ajax, I can't
just put a div around the tr tag because that just doesn't work. I
need to but a div around all my td tags. I really just want a normal
for to appear in the table row without the row separations, a bit in
this style:

<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Value</th>
<th>Edit</th>
<tr>
<tr>
<td colspan="4">
<div id="row_1">

<form method="post" action="" >
<input type="hidden" name="ID" value="1">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="Name" value="House" /></td>
</tr>
<tr>
<td>Value</td>
<td><input type="text" name="Value" value="5000" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" id="submit"
value="Apply" /></td>
</tr>
</table>
</form>

<div>
<tr>
<td><div id="row_2_id">2</div></td>
<td><div id="row_2_name">Dog</div></td>
<td><div id="row_2_value">2000</div></td>
<td><div id="row_2_edit"><a href="">Edit</a></div></td>
</tr>
<tr>
<td><div id="row_3_id">3</div></td>
<td><div id="row_3_name">Cat</div></td>
<td><div id="row_3_value">1000</div></td>
<td><div id="row_3_edit"><a href="">Edit</a></div></td>
</tr>
</table>

I already have an idea about how to do the whole sliding thing. But
I'm having difficulty with is the whole replacing an entire row of a
table using ajax. Anybody have an idea of what to do, where to place
the divs to take care of that whole business.

Thanks for your input.

Phil

 

[Garrett Smith]

Hello,

(I tried to find a html google group but couldn't find and this is
also in relation to javascript/ajax)

Basically I have a html table with a bunch of data from a database
(MySQL).

I would like to be able to press on a link and have the a given table
row slide down to expand into the editing zone.

If you were planning to use innerHTML and table elements, that won't work.

I would use Ajax to populate that editing space with the detail data
from the database.

So this would be my table:

[...]

What might work instead is to use text inputs for the cell values.

<td><input type="text" value="1"></td>
<td><input type="text" value="House"></td>
<td><input type="text" value="5000"></td>

 

[dphizler]

Hello,

(I tried to find a html google group but couldn't find and this is
also in relation to javascript/ajax)

Basically I have a html table with a bunch of data from a database
(MySQL).

I would like to be able to press on a link and have the a given table
row slide down to expand into the editing zone.

If you were planning to use innerHTML and table elements, that won't work..

I would use Ajax to populate that editing space with the detail data
from the database.

So this would be my table:

[...]

What might work instead is to use text inputs for the cell values.

  <td><input type="text" value="1"></td>
  <td><input type="text" value="House"></td>
  <td><input type="text" value="5000"></td>

The reason why I asked my question as formulated was because I wanted
to include more text inputs than are going to appear with the table
initially.

So basically I want a regular form to appear.

<form method="post" action="" >
<input type="hidden" name="ID" value="1">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="Name" value="House" /></td>
</tr>
<tr>
<td>Description</td>
<td><input type="text" name="Description" value="It is expensive" /></
td>
</tr>
<tr>
<td>Value</td>
<td><input type="text" name="Value" value="5000" /></td>
</tr>
<tr>
<td>Units</td>
<td><input type="text" name="Units" value="dollars" /></td>
</tr>
<tr>
<td>Owner</td>
<td><input type="text" name="Owner" value="Robert" /></td>
</tr>
<tr>
<td>Year of construction</td>
<td><input type="text" name="YearConstruction" value="1990" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" id="submit"
value="Apply" /></td>
</tr>
</table>
</form>

Naturally this type of form can't be shown in the manner you
suggested.

Thanks,

Phil

 

[Jeff North]

On Wed, 14 Jul 2010 13:39:45 -0700 (PDT), in comp.lang.javascript
dphizler <[email protected]>

| > On 2010-07-14 06:34 AM, dphizler wrote:
| >
| > > Hello,
| >
| > > (I tried to find a html google group but couldn't find and this is
| > > also in relation to javascript/ajax)
| >
| > <| >
| > > Basically I have a html table with a bunch of data from a database
| > > (MySQL).
| >
| > > I would like to be able to press on a link and have the a given table
| > > row slide down to expand into the editing zone.
| >
| > If you were planning to use innerHTML and table elements, that won't work.
| >
| > > I would use Ajax to populate that editing space with the detail data
| > > from the database.
| >
| > > So this would be my table:
| >
| > [...]
| >
| > What might work instead is to use text inputs for the cell values.
| >
| >   <td><input type="text" value="1"></td>
| >   <td><input type="text" value="House"></td>
| >   <td><input type="text" value="5000"></td>
| > --
| > Garrett
|
| The reason why I asked my question as formulated was because I wanted
| to include more text inputs than are going to appear with the table
| initially.
|
| So basically I want a regular form to appear.
|
| <form method="post" action="" >
| <input type="hidden" name="ID" value="1">
| <table>
| <tr>
| <td>Name</td>
| <td><input type="text" name="Name" value="House" /></td>
| </tr>
| <tr>
| <td>Description</td>
| <td><input type="text" name="Description" value="It is expensive" /></
| td>
| </tr>
| <tr>
| <td>Value</td>
| <td><input type="text" name="Value" value="5000" /></td>
| </tr>
| <tr>
| <td>Units</td>
| <td><input type="text" name="Units" value="dollars" /></td>
| </tr>
| <tr>
| <td>Owner</td>
| <td><input type="text" name="Owner" value="Robert" /></td>
| </tr>
| <tr>
| <td>Year of construction</td>
| <td><input type="text" name="YearConstruction" value="1990" /></td>
| </tr>
| <tr>
| <td colspan="2"><input type="submit" name="submit" id="submit"
| value="Apply" /></td>
| </tr>
| </table>
| </form>
|
| Naturally this type of form can't be shown in the manner you
| suggested.
|
| Thanks,
|
| Phil

As I understand it - this is what you would like to do:
if edit button clicked
read in current record
populate form with data
show form (DOM manipulation)
if( submit button clicked
save data using AJAX
hide form
if cancel button is clicked
hide form
update display
end if

AJAX call:
read: get data from db
store in JSON structure
return JOSN structure to web page
write: sanitise data
if data is ok
store in db
report error

As for the show form action I would use a lightbox type interface.