Fancybox and Tempo Javascript Not Working Together on Samsung Galaxy Android 2.3.3

For a mobile site we’re successfully using the Tempo Javascript rendering engine, used to create a list of items from some json data. This items was composed of a visible part and an hidden part to be shown with Fancybox on user click.

Everything works great on desktop browser, iPhone and even a number of Android devices. Not on a couple of Samsung Galaxy (I ad II) with Android 2.3.3.

What happens is the popup opening not with the content of the relative hidden div (as usually is done) but reloading the whole page inside the popup content area. This is common to Fancybox when you try to open a popup referencing an not existant anchor. For example:

<a href="#data1">Click to open</a>
<div id="data2">Popup content</div>

Since #data1, interpreted as CSS rule, does not identify an element, Fancybox, as far as I know, still open the popup “thinking” it have to load via AJAX the page URL plus the #data1 anchor (the URL pointed by the first A element).

This is what I discovered to happen when I create some A tags connected as in the above example with DIV tags via Tempo: it seems that Fancybox, on Samsung Galaxy, cannot find the DIVs identified by the A href attribute. Probably is a browser bug!

You can try your self at this address: http://www.satollo.net/mobile/tempo-not-working.php. Look at the source code of the page to see how it works.

Is there a solution? Probably many. The simpler I find is to trigger the popup opening directly on click event of A tags:

<a onclick="$.fancybox({href: '#data{{id}}'})">{{id}} {{name}}</a>

This way on Galaxy the popup open and display the right content. See http://www.satollo.net/mobile/tempo-working.php.

Note that even using the Tempo rendering events (like the RENDER_COMPLETED) to attach the Fancybox to the rendered elements does not help. For example:

// Event
var t = Tempo.prepare("list").notify(tempoDone);

// Listener
function tempoDone(event) {
  if (event.type === TempoEvent.Types.RENDER_COMPLETE) {
    $("a.popup-anchor").fancybox();
  }
}