Pager & Event Handlers

Eric Dalquist Wed, 16 Feb 2011 18:08:14 -0800

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">

</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();

    }
});

smime.p7s
Description: S/MIME Cryptographic Signature

_______________________________________________________
fluid-work mailing list - [email protected]
To unsubscribe, change settings or access archives,
see http://fluidproject.org/mailman/listinfo/fluid-work

Pager & Event Handlers

Reply via email to