User login
Combine ajax (with prototype lib) and overlib
Looking around yahoo's new site what I liked is that popup with news teasser when you
hover news titles. I had to figure an easy way to do something like it using compenents
that can find easily. Cooking recipies that need tropical ingredients is not my style.
So, what came to me was to use the known overlib script for popups and prototype lib for ajax.
Put up the solution realy fast but I missed a tiny spot. When the user hovers a link a ajax
request is fired, ofcourse needs sometime to complete. Mean while the user may move his mouse
out of the link and place it over an other one. Where an other ajax request is fired. Things get
confused. We have the initial request runing and a second one fired, finaly a popup will show up
but we have lost that mouseout event that closes the popup (remember user moved away his mouse
from the first link). And we have an overlib tooltip following mouse pointer around with no way
to close it, and on top of that shows wrong info.
The solution? We need on mouseout to cancel pending ajax request. But lets see the code.
Page html is a list with 2 links. On mouseover get_response function is called that initiates
ajax request and tooltip display. On mouseout if ajax request is still in progress is canceled and
overlib tooltip is hidden.
<ul>
<li>
<a href="javascript:void(0);"
onmouseover="get_response(1);"
onmouseout="clear_teasser();">
This is news line #1</a>
</li>
<li>
<a href="javascript:void(0);"
onmouseover="get_response(2);"
onmouseout="clear_teasser();">
This is news line #2</a>
</li>
</ul>Javascript now. Realy simple get_response function fires an ajax request to get from server the
content we need to show. OnComplete show_teasser function is called who shows an overlib tooltip
containing html we got from the server. The last one, clear_teasser, closes tooltip.
The trick here is to hold a global reference of Ajax object to be able to check if
there is a request in progress. When mouseout event is fired clear_teasser checks
if newsAjax is null or not. When a request is finished newsAjax is set to null. So
if not null there is request in progress. So we try to abord request and the call
overlib function nd() to hide tooltip (if any visible).
var newsAjax=null; function get_response(id) { url = "get_response.php"; params= "id="+id; newsAjax = new Ajax.Request( url, { method: 'get', parameters: params, onComplete: show_teasser} ); } function show_teasser(response) { overlib(response.responseText); newsAjax=null; } function clear_teasser() { if( newsAjax!=null ) { try { newsAjax.transport.abort(); newsAjax=null; } catch(e) {} } nd(); } function reportError() { window.alert('Ajax error'); }
Just for completeness server side code that handles ajax request is (just a dummy thing)
if( $_GET['id']==1 ) $response = " <h3>Headline</h3> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur consequat placerat orci. Duis tincidunt elit fringilla dui aliquam ultricies. Nunc turpis nisi, ornare non, lacinia sed, iaculis a, odio. Phasellus posuere magna ac libero. Nulla eros. Praesent massa ligula, feugiat in, adipiscing nec, volutpat a, quam. Proin interdum commodo diam. Integer id est ut velit interdum congue. "; else $response = " <h3>Headline</h3> Nam adipiscing, purus at tincidunt euismod, mauris leo gravida arcu, eget tristique nisi magna nec justo. Donec metus metus, placerat eget, rhoncus sit amet, facilisis eget, lacus. Maecenas blandit augue eu pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam augue erat, placerat at, pellentesque eu, iaculis eget, nunc. "; echo $response;
Hope this was clear and helpful.
Links:
