Repeat Region in Air with back / next paging issue

Question

Oddly enough, many of the widgets and whatnot that are
Spry-related work fine in AIR out of the box, but I ran into one
problem that sounds like it can be fixed with Element Selector.
First off, I am using Spry Spry_1_6_1_022408, the latest AIR
release (1.5) and using Dreamweaver CS3.
On my page I have the following (and yes, all of the
necessary .js is on the page, I though it would be redundant to
post that).
HTML:
<div spry:region="transcript09">
<table cellpadding="0" cellspacing="0" width="740"
style="padding:0px; margin:3px; border:1px solid #ccc;">
<tr spry:repeatchildren="transcript09">
<td width="70%" bgcolor="#deecf2"><span
style="padding:3px;
font-weight:bold;">{boldname}</span>  {name}</td>
<td width="30%" valign="top" bgcolor="#deecf2"
align="right"><input type="image" src="imx/back.gif"
onclick="UpdatePage(pageOffset - pageSize);" />
<input type="image" src="imx/next.gif"
onclick="UpdatePage(pageOffset + pageSize);" /></td>
</tr>
<tr spry:repeatchildren="transcript09">
<td valign="top" colspan="2"><div
style="padding:15px 10px 15px 10px; text-align:center;"><img
src="assets/images/{photoURL}" style="border:1px solid #ccc;"
/></div></td>
</tr>
<tr spry:repeatchildren="transcript09">
<td valign="top" colspan="2"><div
style="padding:5px 10px 5px 10px; border-top:1px solid
#ccc;">{copy}</div></td>
</tr>
</table>
</div>
and in another .js file I have:
var transcript09 = new
Spry.Data.XMLDataSet("transcript09.xml",
"transcripts/slideinfo/slides", { filterFunc: MyPagingFunc });
transcript09.setColumnType("photoURL", "image");
transcript09.setColumnType("copy", "html");
// new code for AIR
Spry.Data.Region.addObserver("transcript09", { onPostUpdate:
function()
Spry.$$("#UpdatePage").addEventListener("change",
function(){ transcript09.setCurrentRowNumber(this.selectedIndex);
}, false);
// end new AIR code
var pageOffset = 0;
var pageSize = 1;
var pageStop = pageOffset + pageSize;
function MyPagingFunc(ds, row, rowNumber)
if (rowNumber < pageOffset || rowNumber >= pageStop)
return null;
return row;
function UpdatePage(offset)
var numRows = transcript09.getUnfilteredData().length;
if (offset > (numRows - pageSize))
offset = numRows - pageSize;
if (offset < 0)
offset = 0;
pageOffset = offset;
pageStop = offset + pageSize;
// Re-apply our non-destructive filter on dsStates1:
transcript09.filter(MyPagingFunc);
-->now...the code on it's own works. pulls from the XML
properly, populates the table and repeats. When I compile in
AIR...the back / next buttons do not function.
I found this
example,
however the way that their back / next buttons were set up are
different from how I set mine up. So I started to cobble the code
together (as seen in the "// new AIR code" comment) and found that
things were not as simple as I thought.
So any suggestions would be greatly appreciated.
Thanks!

Answer 1

Hi Bit Crusher,
Your buttons stop working because AIR ignores any on*
(onclick, onmouseover, etc) attributes on elements that are
inserted *after* the onload event for the document has fired. You
might want to checkout these docs for more information:
http://labs.adobe.com/technologies/spry/air.html
http://labs.adobe.com/technologies/spry/articles/air/photo_gallery.html
http://labs.adobe.com/technologies/spry/demos/gallery/index-air.html
To fix the problem you'll want to add ids to your buttons and
then use addEventListener() to attach the click handlers in your
region's onPostUpdate observer as you are already doing for
#UpdatePage.
--== Kin ==--