Slide and edit within grid
in [JavaScript]
|
From: dphizler on 14 Jul 2010 09:34 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
From: Garrett Smith on 14 Jul 2010 15:06 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) > <news:comp.www.infosystems.authoring.html>. > 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
From: dphizler on 14 Jul 2010 16:39 On Jul 14, 3:06 pm, Garrett Smith <dhtmlkitc...(a)gmail.com> wrote: > 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) > > <news:comp.www.infosystems.authoring.html>. > > > 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
From: Jeff North on 14 Jul 2010 22:32 On Wed, 14 Jul 2010 13:39:45 -0700 (PDT), in comp.lang.javascript dphizler <dphizler(a)gmail.com> <7daf66f8-3026-4b18-864c-60a170444615(a)z8g2000yqz.googlegroups.com> wrote: >| On Jul 14, 3:06�pm, Garrett Smith <dhtmlkitc...(a)gmail.com> wrote: >| > 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) >| > >| > <news:comp.www.infosystems.authoring.html>. >| > >| > > 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.
|
Pages: 1 Prev: Form data, refresh (F5) and retaining data Next: Ajax script stopped working. |