Pager & Event Handlers

[Eric Dalquist]

I keep running into this same problem and am hoping someone has a 
suggestion or two. The problem is with the pager it appears to strip all 
state and event handlers from all elements within the pager div every 
time it re-renders. In most cases I've been able to work around it but 
in this case I'm not sure what to do. Our UI design calls for two table 
header rows, one with a checkbox that lets the user toggle if their 
paycheck amount is visible and a second with the actual table headers. I 
attach a jQuery event handler to the checkbox using the live() function 
to deal with the fact that any time the user sorts or pages normal event 
handlers on the input are removed. The bigger problem is the state of 
the checkbox is also reset. If the user checks the box then pages or 
sorts the box unchecks. Is there some way to get the renderer to not 
strip state (and even better event handlers) from elements when it is 
redrawing the page? Especially elements like this which have no rsf:id 
attributes and have no real need to be touched by the renderer code.

Another thing that would be useful that wasn't obvious from the docs is 
a postRender() callback. That way I could at least re-attach event 
handlers to all of the new elements when paging or sorting happened 
instead of using the live() feature of jQuery.


<div class="fl-pager">
<div class="fl-container-flex hrs-pager-table-data fl-pager-data">
<table class="hrs-table">
<thead>
<tr>
<th colspan="3" class="hrs-earnings-ammount-toggle">
<form action="#">
<input id="Pluto_35_n40_16_n40_hrs-earnings-ammount-toggle" 
name="hrs-earnings-ammount-toggle" type="checkbox"/>
<label for="Pluto_35_n40_16_n40_hrs-earnings-ammount-toggle"> Show 
earnings dollar amounts</label>
</form>
</th>
</tr>
<tr rsf:id="header:">
<th class="flc-pager-sort-header" rsf:id="paid"><a 
href="javascript:;">Paid</a></th>
<th class="flc-pager-sort-header" rsf:id="earned"><a 
href="javascript:;">Earned</a></th>
<th class="flc-pager-sort-header" rsf:id="ammount"><a 
href="javascript:;">Ammount</a></th>
</tr>
</thead>
<tbody>

<tr rsf:id="row:" class="hrs-clickable">
<td class="hrs-data-text"><a class="todo" href="#" target="_blank" 
rsf:id="paid"></a></td>
<td class="hrs-data-text"><a class="todo" href="#" target="_blank" 
rsf:id="earned"></a></td>
<td class="hrs-data-number"><a class="todo hrs-earning-ammount" href="#" 
target="_blank" rsf:id="ammount"></a></td>
</tr>
</tbody>
</table>
</div>
</div>


Script:
$("#Pluto_35_n40_16_n40_hrs-earnings-ammount-toggle").change(function() {
     if ($(this).is(':checked')) {
         $("#Pluto_35_n40_16_n40_hrs-payroll-information table.hrs-table 
a.hrs-earning-ammount").show();
     }
     else {
         $("#Pluto_35_n40_16_n40_hrs-payroll-information table.hrs-table 
a.hrs-earning-ammount").hide();
     }
});



-------------- next part --------------
A non-text attachment was scrubbed...
Name: smime.p7s
Type: application/pkcs7-signature
Size: 3397 bytes
Desc: S/MIME Cryptographic Signature
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20110216/c65a7f70/attachment.p7s>