Ajax and Thickbox

**peeyushgupta** · 10-03-2008, 11:50 AM

Hello Sir, i am using ajaxtabs whick load html pages. In html pages i am using
thickbox.js and thickbo.css but its not running. i dont how it will run.

Can anysone solve this problem, that will be very thankful of you.

My code is like that

In ajaxtab i am using

<ul id="maintab" class="shadetabs">
<li class="selected">
<a href="home.php" rel="ajaxcontentarea">Home</a></li>
<li><a href="services.php" rel="ajaxcontentarea">Services</a></li>
<li><a href="portfolio.php" rel="ajaxcontentarea">Portfolio</a></li>
<li><a href="technology.php" rel="ajaxcontentarea">Technology</a></li>
<li><a href="clients.php" rel="ajaxcontentarea">Clients</a></li>
<li><a href="company.php" rel="ajaxcontentarea">About us</a></li>
<li><a href="contacts.php" rel="ajaxcontentarea">Contacts</a></li>
</ul>

In services.php there is a link where i used this code.

<a href="webdesign.php?height=487&width=650" rel="ajaxcontentarea" class="thickbox">

Plz help me solve this problem

**jscheuer1** · 10-03-2008, 03:07 PM

AJAX imported content is not initialized by ThickBox. ThickBox initializes its content (elements with the thickbox class) on page load. The imported AJAX content is not there yet.

And, AJAX doesn't run scripts on (from) imported pages, at least not most scripts.

So, we can take a page from Lightbox v2.04's book, which initializes the document to check for click events, instead of the individual lightbox elements.

Note: This solution worked out and tested with ThickBox 3.1 and jQuery 1.2.6, results may vary with other versions of ThickBox or jQuery.

How this works out is, first install ThickBox (jquery.js, thickbox.js, and thickbox.css) in the head of your 'top' page, the one with ajaxtabs on it, just as if it were to be the only page with any ThickBox content on it (configuring the resource images to work with that page). After that in the head of your 'top' page, put this script:

Code:

<script type="text/javascript">
function tb_init(){
	$(document).click(function(e){
	e = e || window.event;
	var el = e.target || e.scrElement || null;
	if(el && el.parentNode && !el.className || !/thickbox/.test(el.className))
	el = el.parentNode;
	if(!el || !el.className || !/thickbox/.test(el.className))
	return;
	var t = el.title || el.name || null;
	var a = el.href || el.alt;
	var g = el.rel || false;
	tb_show(t,a,g);
	el.blur();
	return false;
	});
};
</script>

That will replace ThickBox's native initialization with one that listens for clicks on the page, but that otherwise does the same thing. Now your imported content will work with Thickbox.

**peeyushgupta** · 10-04-2008, 05:30 AM

From where i download latest version of thickbox.

Its still not running i have tried. Can u give accurate code so that i paste easily.

Thanks
Peeyush

**jscheuer1** · 10-04-2008, 07:35 AM

The code and instructions I posted are accurate. I got ThickBox and jQuery from here:

http://jquery.com/demo/thickbox/

If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

**peeyushgupta** · 10-04-2008, 08:20 AM

Thank for the code. I have implement this on my website. It is running successfully. But its create large gap when i open websitedesign page.

Plz check the link

www.mediacreation.info.

plz go to services page and click on webdesign.php and others llink they are not show exactly. Also the alignment of page goes to left in firefox but it shows center in ie. I How i center the page in firefox.

Thanks
Peeyush

**jscheuer1** · 10-04-2008, 08:43 AM

To start with, you need to use a valid URL DOCTYPE for your 'top' page. This is mentioned on the ThickBox demo page, but not explained well. DOCTYPES tell the browser what standards to use in rendering your page, so this is certainly a factor here. You currently have this DOCTYPE on the 'top' page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

The closest valid URL DOCTYPE to that would be:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

So try replacing it with that.

Once you have that, if you are still having problems, it probably would have to do with using the wrong dimensions and/or style rules. Just like javascript, the stylesheet for your imported content should be on or linked to the head of the 'top' page, as AJAX imported stylesheets and AJAX imported stylesheet links will not be active.

**peeyushgupta** · 10-06-2008, 10:39 AM

Hello Sir, same error occurs, there is so much gap in thickbox when i click on webdesign and other links.

What should i do for remove this gap.

Thanks
Peeyush

**jscheuer1** · 10-06-2008, 02:38 PM

Looking at your live page's markup, it looks so non-standard and the ThickBox isn't currently working at all, I'm not sure off the top of my head what to do about all that. I do know that after you change the DOCTYPE as required by this script, you can validate your markup:

http://validator.w3.org/

and styles:

http://jigsaw.w3.org/css-validator/

And/or start a new thread in CSS forum (where they may well ask you to validate your markup and styles anyway):

http://www.dynamicdrive.com/forums/forumdisplay.php?f=6

for help in laying out your page. You will need to at least have a live demo of the problem for help there.

By the way, on your question about centering your actual page, just in general, if you are using text-align:center or <center> or align="center", to get it to center and that's not working for FF, you should use this property/value pair in style:

Code:

margin: 0 auto;

This is best applied to a container division for the entire page set to the desired width of the page contents.

With your current markup, this style would work for FF to center:

Code:

body > table {
margin:0 auto;
}

**Jonathan** · 10-20-2009, 02:55 PM

Hello John,

I also am using Ajax tabs, oddly enough when I try to use thickbox links within the ajax loaded content, the link opens a new page instead of displaying a thickbox prompt.

First of all, I see something odd in the solution provided here:

We redeclare the function tb_init() in the project page, however, it can only be called by explicity making a call to tb_init at some point, if thickbox only works with links that are present during page load, how would the new tb_init be called in the first place? In my case, I have to explicity call TB_init() after I the server returns my AJAX request (but this still does not work...) (Sorry if you already mentionned this and I missed it..)

I have attached get_tab_contents.php, the contents of the tabs that fills the div (for different tabs) after the ajax requests are sent, and project, which is the page where this particular tabbed menu is included in.

I liked your thorough replies to the previous user, and I'm confident that you can help me with this problem which has been aggravating me for way too long.

Thank you in advance.

Kind regards,

Jonathan

**jscheuer1** · 10-20-2009, 03:13 PM

It's not clear to me what's going on with your PHP, I'm no expert with that language. But it really shouldn't matter, it is the served HTML that matters here. So, if I had a link to your page that shows this problem, I could be of more help.

But the basic concepts here are:

AJAX import of javascript using AJAX Tabs does nothing. So if you want to change the init, it (the new init function) must be on the same page as the thickbox script, and follow it in the parse order of the page, so that it can overwrite the native thickbox init function. This page (with the two scripts on it) cannot be imported using AJAX Tabs.
The new init works by listening to the page for clicks. If it hears one, it determines at that point if you've clicked a link with the thickbox class, if so - it activates thickbox. This is different than the old init which only listened for the onload event. Once it heard that, it attached thickbox onclick code to each link it found that had the thickbox class. With the old init, if more thickbox links were added later, they would be missed.

Thread: Ajax and Thickbox

Thread Tools

Search Thread

Ajax and Thickbox

Regarding THickbox

Regarding THickbox

Regarding THickbox

Similar problem...

Bookmarks

Bookmarks

Posting Permissions