Using colorbox(a jquery plugin) ajax in a complex situation


Colorbox is a lightweight customizable lightbox plugin for jQuery.

I am using colorbox for another perpose: to show a (semi!) modal window to show information on ajax call.

You can get the plugin here .

Here I’ll give a simple example how to load ajax data and show through colorbox plugin. In second phase i’ll try to give the scenario of the complex situation and give the solution. Though the solution looks so obvious now, i had to go through lots of other solutions (Not worthy for that situation).

In line:10 we included the plugin.

In line:8 we included the css file

In line:14 we implemented colorbox on all element having class ajax (Eg. line:20); The implementation is done while document is ready.

To call the ajax we have to follow line:20; (See href=”….”)

Now this should do your work. Now complexity arises when we are trying to implement colorbox on a link that has class “ajax” but loaded on another ajax call triggered by user.

Say like we loaded some html by following call to a div having class body:

$(‘div[class=\’body\’]’).load(‘index.php?route=dashboard/pachistory/getPackHistory’);

And the html returned and loaded in the div is as following for example:

<\a class=”ajax” href=”index.php?route=x/f/a”> New Link </a>

Now what is the expected behavior to us now? Definitely we’d expect when user’ll click on New Link they should see a modal window having the html got through the ajax call.
But that is not going to happen. Why? Lets see what happens when we are executing line:14 of the earlier example.

It makes some changes of element having class name ajax, for example it changes the class to “ajax cboxElement”.

So when we are executing line:14 (on load of document) the New Link is not yet in the document so the changes are not effecting this part of document. This is why we not getting our expected behavior.

To rid of the problem we’ll use callback function (a function(1) passed as a parameter to a function(0) to be executed when the execution of function(0) is completed <a href=”http://www.codeguru.com/cpp/cpp/cpp_mfc/callbacks/article.php/c10557/Callback-Functions-Tutorial.htm“>read more</a>

So what we are doing is simply like :
$(‘div[class=\’pacHistoryContainer\’]’).load(‘index.php?route=dashboard/pachistory/getPackHistory’, function(){
$(“.ajax”).colorbox();
});

2 thoughts on “Using colorbox(a jquery plugin) ajax in a complex situation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s