.

Tuesday, December 05, 2006

how to add "snap preview anywhere" to a pure AJAX web application. #

You might have noticed that we have been working on a beta product for some time.
It's mainly intended for Turkish audience. It may seem like a "yet another social bookmarking app" at a first glance but we have built it considering several issues:

  1. Tagging and Social Bookmarking is a relatively new in Turkey;

  2. We have other things in mind; and the end product will be something other than a del.icio.us for Turkey.

Anyway keeping the marketing mojo aside; I recently faced a problem while trying to add snap support to the application.

If you have not seen what snap preview anywhere is go and learn about it on snap.com's website, and see it in action here.

The tool is simply used to add small preview bubbles to the links, so that the user sees what the page she is going to click looks like before actually visiting it:



Integrating snap plugin to a non-ajax web page is dead simple:You just copy and paste the JavaScript code provided into the head section of your web document.

However, the plugin cannot detect dynamically loaded content (i.e. if there is a link displayed dynamically inside a container div via JavaScript and AJAX; the link will not have a preview bubbly by default).

To find a workaround I reverse-engineered spa's JavaScript code a bit. Although it is compressed to save bandwidth, it is not obfuscated and is pretty easy to understand
(thank you snap.com for creating a self-documented code and thus making developers' life easier btw).

After working on the problem several hours a really simple solution popped up in my mind.
I simply re-initiated the plugin after my AJAX objects' oncomplete event handlers and all my dynamic content became snap-aware all of a sudden.

Here is an object-oriented sample; encapsulating the reset mechanism, so that we can alter it without changing the rest of the Application's code if needed:

var Application={
loadAjaxContent:function()
{
var ajax = _.ajax();/
* sardalya's ajax shortcut. */

ajax.oncomplete=Application.ajax_complete;
ajax.onerror=Application.ajax_error;

ajax.post(...some url here...);
},
ajax_complete:function(strResponseText,objResponseXML)
{
... do tons of initialization ...

/* Try is also a sardalya utility object.
* It is used to bypass any errors while resetting
* snap preview.
* Not really required here, just for defensive coding.
* Better be safe than sorry.
*/
Try.these(
function(){Application.resetSnapPreview();}
);
},
resetSnapPreview:function()
{
snap_preview_anywhere=new snapPreviewAnywhere();
/*altered upon codebase change @ 20070106*/
snap_preview_anywhere.onload();
}
};


After calling Application.loadAjaxContent() and loading dynamic data via AJAX; snap preview is re-initialized automagically.

Did I say I love to find simple solutions to seemingly complicated problems?

Labels: , , ,


 bu yaziyi sevdin mi?  hemen una ekle!
 


4 Coments

Anonymous said...
Does this solution still work for you? I recently stopped working for me. Maybe the SPA javascript was changed?
10:55 PM  
Volkan Ozcelik said...
# Does this solution still work for you?

Sure you can have a look.

I've updated the code upon SPA's change in their codebase.

HTH.
1:17 PM  
Sleepyhead said...
Thanks! I had some minor problems though. Had to set a 100 ms timeout when running the code.
11:27 AM  
Volkan Ozcelik said...
Thanks sleepyhead.

The code works okay for me without timeouts.

I'll have an in depth look when I have time and update this post accordingly should I find anything.
10:51 AM  


Post a Comment

Links to this post:


Create a Link

<< Home




Recent Posts

RSS

RSS register icon

Other Blogs

Various

Sponsor

Profile Information

Browser I Suggest

Sponsor

Dikkatimi Çekenler