Question

I am trying to make an AJAX request that updates a div’s content when that div is shown. My initial thought was to use an Event observer that watched for a div to be shown, but I cannot seem to find an appropriate handler. Is there an easy way to make an AJAX request for an element ‘on show?’

Answer 1

By “on show” i assume you mean is visible within the browser viewport. In which case you would need to check if an element is within the viewport and then observe anything that would change this.

This is a rudimentary function for checking if an element is within viewport:

function withinViewport(el) {
    var elOffset = $(el).cumulativeOffset(el);
    vpOffset = document.viewport.getScrollOffsets();
    elDim = $(el).getDimensions();
    vpDim = document.viewport.getDimensions();
    if (elOffset[1] + elDim.height < vpOffset[1] || elOffset[1] > vpOffset[1] + vpDim.height ||
        elOffset[0] + elDim.width < vpOffset[0]  || elOffset[0] > vpOffset[0] + vpDim.width) {
        return false;
    }
    return true;
}

You could then – for example – observe the scroll event to check if the element has moved into view

Event.observe(window, 'scroll', function() {
       if(withinViewport('element')){
          new Ajax.Updater("element","script.php");
       }
});