[Kss-devel] KSS: Inline editing on multiple rows of data

[Brian Gershon]

Greetings!

I hope you can point me in the right direction.

What I want to do:

I have multiple rows of fields in a table.  One field is each row is  
"Due Date". I want to click on the Due Date, have a text box appear,  
change date and save.

Problem:

Everything is going well, except for the initial "click on Due Date to  
bring up a form".

When I click, the forms open up for ALL rows.  Each row has a field  
like this, and by default <div class="editform"> is hidden  
via .hiddenform style:

<div class="action-due-section">
    <span class="action-due label">2008/02/25</span>
    <div class="editform">
       <input class="dueDateField" value="2008/02/25"/>
       <input class="change" type="button" value="change"/>
       <input class="cancel" type="button" value="cancel"/>
    </div>
</div>

(my KSS is below)

I think the answer is "parentnode" so when they click on 2008/02/25 I  
can ultimately find div.editform and unhide it.

Problem: If I use css() selector I get all rows, though unfortunately  
the parentnode of "2008/02/05" is the <span> tag, and not the <div  
class="action-due-section">.

I don't want to use htmlid() because I'm not sure how to dynamically  
id each row in KSS -- so hoping to just work on the parent HTML (and  
children) (and not the whole DOM).

Is there a better way to restructure my HTML?  Or how do I get the  
parent of a parent?

Thanks,
-Brian

ps: My cancel button successfully hides the fields in just that row  
because the parentnode() correctly grabs the <iv class="editform">

pps: My KSS:

/* show edit form when label clicked */
div.action-due-section span.label:click {
     evt-click-preventdefault: true;

     action-client: toggleClass;
     toggleClass-kssSelector: css("div.editform");
     toggleClass-value: hiddenform;
}

/* hide form for one row */
input.cancel:click {
     action-client: toggleClass;
     toggleClass-kssSelector: parentnode("div.editform");
     toggleClass-value: hiddenform;
     }