jQuery thickbox problem on ajax loaded content with php and codeigniter

Hope everyone doing well. Today I’ll show a trick about jQuery thickbox which I was using for one of my project. I have worked earlier also with this earlier but i didn’t have to work with ajax loaded content. Normally it’s working great with your inline element on your page but when you will use it in the content which is loading by ajax will show the problem, the link in the ajax content will work as default link.

Assume you have a content that is loading via ajax. In the ajax content you have a link that is using the thickbox to do an action. Now if you use the default thickbox scripts I think you will see the link is redirecting but not working as you are expecting. A simple trick I will tell you so that you can fix it easily.

Open the thickbox.js and see at line 21.

//add thickbox to href & area elements that have a class of .thickbox
function tb_init(domChunk){
    $(domChunk).click(function(){
	var t = this.title || this.name || null;
	var a = this.href || this.alt;
	var g = this.rel || false;
	tb_show(t,a,g);
	this.blur();
	return false;
    });
}

Now replace it with the following code :

//add thickbox to href & area elements that have a class of .thickbox
function tb_init(domChunk){
    $(domChunk).live('click', function(){
        var t = this.title || this.name || null;
        var a = this.href || this.alt;
        var g = this.rel || false;
        tb_show(t,a,g);
        this.blur();
        return false;
    });
}

Look, we just change one line which is using jQuery click event and we bind it as live, that’s the trick. Now the links from your ajax content will work as you expect.


<a href="<?=site_url('controller/method/'.$result->id)?>?height=400&width=600" title="Title">Test Edit</a>

Happy coding … Cheers !

Advertisements

, , , ,

  1. #1 by Ian on April 25, 2012 - 4:23 AM

    My hero! I’ve been struggling with this problem for a couple of days and the fix was that easy. Thank you!

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: