Bollysite Blog

I found an interesting JQuery plugin to code painless AJAX modules.

It’s called LiveQuery which binds events/callbacks/plugins to the elements, will be loaded into DOM through AJAX requests.

Where to use LiveQuery?

We know that jQuery has most famous ready(); method that executes after DOM completion. So, what’s the point of LiveQuery?

Okay, let’s take an example.

We need to load some healthy amount of HTML elements using AJAX which includes hyperlinks, table, forms etc. and then we want to bind events to them. How would we achieve that?

Simple solution would be write a callback function.

$.get('ajax_url',serialize_params_map,function(data){
// manipulate data variable;
// execute callback to bind events;
});

We may think, it would be great we don’t have to attach manual callback after each and every ajax call and should be simple as

$(document).ready(
  function(){
  //execute callback to bind events;
  }
);

To understand my point more clearly, take a practical example.

1. ThickBox Problem

   // thickbox.js (jQuery plugin)
   //on page load call tb_init
   $(document).ready(
     function(){
       //pass where to apply thickbox
       tb_init('a.thickbox, area.thickbox, input.thickbox');
       imgLoader = new Image();// preload image
       imgLoader.src = tb_pathToImage;
     }
   );

   Look at line6.
   It only executes one time when DOM get completed.

   What If we need to bind thickbox to new elements, inserted through AJAX request?

   One solution could be call tb_init(‘..’) as “callback function” to every AJAX request

   $.get('ajax_url',serialize_params_map,function(data){
   // manipulate data
     tb_init('a.thickbox, area.thickbox, input.thickbox');
   //pass where to apply thickbox
   });

   or use LiveQuery ONLY ONCE i.e.

   

   $('a.thickbox').livequery(
     function(){
       tb_init('a.thickbox');
     }
   );

   So, what would above code do?
   It simulates $(document).ready(); function. Also observers for any “set of newly matched elements” inserted in DOM. So whenever “AJAX request” insert new elements in DOM, above function will bind thickbox to them.

2. FaceBox Problem
   The same case with facebox… and could be with many more jquery plugins. To make facebox work properly with post loaded HTML elements, use…

   jQuery(document).ready(function() {
   $('a[rel*=facebox]').livequery(
     function(){
       $(this).facebox();
     });
   });

   instead of

   jQuery(document).ready(
     function($) {
       $('a[rel*=facebox]').facebox();
     }
   );

The conclusion is…

jQuery + painless AJAX modules => efficient use of LiveQuery.

Here is a project.

Bollysite has lots of cool backend/frontend stuff  to give latest updated news as well as good User Interaction to the user.

Finally, one of my frontend engineering work Bollysite movies, get featured on Google Code Blog.

For every movies information, I didn’t have any image into my database. So, first I tried Flickr API to get relevant images to movies. But Flickr failed to deliver relevant images for old movies.

So, finally I try for Google Image Search API. First result on Google was relevant to every odd/old movies.

Then, I just needed to tweak API to get only first result. I could find that function google.search.ImageSearch.RawCompletion returns raw output.

So, I override that function with my custom function.

google.search.ImageSearch.RawCompletion = function(arg1,arg2,arg3,arg4){
if(typeof(arg2.results[0].tbUrl) != "undefined"){
movieImage = new Image();
movieImage.src = arg2.results[0].tbUrl; // Here first image will come
// now you can use movieImage.src to anywhere....
}
}
google.setOnLoadCallback(OnLoad);

So, now google powers every movie images to BollySite Movies

Along with jQuery, we have used third party module facebox for hindi lyrics. During testing different browsers, I got problem with placement of facebox.

In internet explorer (IE 6 & 7) it got aligned left.

So, finally I tried some cross browser hack for it. I have done some little change in facebox.js

At the end of function,

$.facebox.reveal = function(data, klass) {

I have added followng line,

if(jQuery.browser.msie){
b = $("BODY").width();
pl = (b - $('#facebox .content')[0].offsetWidth)/2;
$('#facebox')[0].style.paddingLeft = pl;
}
}

Explanation:-

[1] If browser is Internet Explorer, it gets width of view port into b variable
[2] Now facebox width is $(‘#facebox .content’)[0].offsetWidth
[3] So, required left padding is (total screen width – box with)/2
[4] $(‘#facebox’)[0].style.paddingLeft = pl line properly aligns the facebox.

We pleased to know you that now you can send lyrics to someone special to you. I love to dedicate love lyrics to my beloved, so I think why not to make such a module that can help other people to share their hearts’ thought.

Apart from that, we have added printer friendly version for hindi lyrics. So, on printed page you can get lyrics only.

If you find any mistakes or errors in lyrics, feel to click correct it, it’s yours. We will review it & update lyrics accordingly.

So enjoy, Bollysite’s Hindi Lyrics

Team,
Bollysite