I've done that before.
I cannot post the code here because it is in a complex application/
framework but here are the few points you need to make it work:
- Add a classname like 'NeedIPE' to your TD's, and observe the click
on the table or anything on top of it.
- In you event handler, get the clicked TD with something like
e.findElement('td.NeedIPE');
- if there is a TD found, create the InPlaceEditor, and remove the
NeedIPE class, so next time you click on it, a new IPE won't be
created
- Call enterEditMode() 's method of your InPlaceEditor() so you won't
need to click a second time.
Also you may disable the highlight effect of the InPlaceEditor, so the
cells you already clicked wont have different behavior than the ones
you haven't.
(I did at first try to implement the highlight effect on other td's
but with a big table, it is just very bad looking).
Eric
On Oct 28, 12:34 am, BrentNicholas <brentnicho...@gmail.com> wrote:
> Hi all,
>
> I've been wrestling with this for a little bit now and figure it's
> time to ask for help. I can't seem to find anything on the web.
>
> I have a dynamicly generated table, I want to have an InPlaceEditor
> instance on each table cell. From what I can tell you need to do a
> 'new' object on it for every cell so that the hover over highlight
> shows, letting you know that the InPlaceEditor is connected to the
> table cell.
>
> Table Struct:
> (The <p> tag was what I saw in examples and am using it since that's
> what works now)
> <table id="idProgramsTBL">
> <tr class="mainRow">
> <td id="tdPrgCd"><p id="idPrgCdP#ProgramUID#"
> class="clsPrgCdP">#ProgramCode#</p></td>
>
> I've tried the following, to no avail:
>
> // this works but has the problem described below
> $('idProgramsTBL').select('[class="clsPrgCdP"]').invoke("observe",
> "click", function(event){ codeEditInPlace(this.id); });
>
> // this works but is incorrect as it will create a new instance of the
> InPlaceEditor on each 'click'
> // thus you can get 1 to n editors in the cell for every click
> // Also, this connects the editor after the click, so you end up
> clicking twice
> function codeEditInPlace(id)
> {
> new Ajax.InPlaceEditor(id ,'act_setProgramCode.cfm?ProgramUID='+id,
> {
> onFailure: placeError,
> onComplete: refreshProgramCode,
> rows: 2,
> cols: 20
> }
> );
>
> }
>
> The problem is that the above is based on creating and attaching the
> InPlaceEditor when the user clicks, vs after the Ajax.Request
> completes. I am calling the ".invoke.observe" statement above in a
> function fired by the "onComplete" call back of Ajax.Request
>
> So how do I find all the items of this class (class name of table cell
> or P tag) and create a new InPlaceEditor on it.
>
> I've got the following to get the classes of the P tags in the table
> cells:
> $('idResultsTableTBL').select('[class="clsPrgCdP"]')
>
> I found this but I don't think it's of help:
> var codeCellArray = $A(['clsPrgCd']);
>
> codeCellArray.each(function(aCell) {
> alert(aCell);
>
> });
>
> Thoughts?
>
> Thanks for your time,
> Brent
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
