Floatbox doesn't work with Datatables

Page: 1

Author Post
Member
Registered: Jul 2013
Posts: 17
I'm trying to use float box with "Datatables" a plugin for jQuery that creates nice sortable tables. http://datatables.net/

Floatbox works fine attached to a link anywhere in the page EXCEPT if the link is inside the <th> tags at the start of this table. I don't know much about debugging javascript. Hopefully you can help by looking at a page I built with a very simple usage of float box.

The first link works fine. The second link doesn't. The code is exactly the same.

Here is a link to the problem page: (Both links read "click me" you'll see them below the map at the top of the table)
http://teetimegolfpass.com/ma/golfcourses-zz.php?region=ma

Thanks.
Administrator
Registered: Aug 2008
Posts: 3382
Yes it does (work with datatables that is).

It looks like your second link is added dynamically after the page loads, so it was not 'activated' at page load time. Please read this section in the Instructions about activating dynamically added content.

The short answer is, you need to run fb.activate() after adding that link to the page.

You may also want to read about the fb.activate function in the API reference.
Member
Registered: Jul 2013
Posts: 17
Thanks, the example problem is solved.

I read the section you suggested and there was a simple way to make the LINK work inside the datatable. All that was needed was to replace the floatbox class with onclick="fb.start(this); return false;"

Like this:
<a href="img/enjoy-the-best.gif" onclick="fb.start(this); return false;">click me</a>

But ....................... I built the example page using a simple link that uses floatbox to display an image. The current problem on the page is that I really want to display some info using a CONTEXT BOX.

I modified the page to show the problem (it works outside of the datatable but no within the datatable).

Can you tell me how to modify the "Button" code so that a context box will work? Sorry, I'm not very good with javascript.

Here is the modified page: The click me link now works inside the datatable but the bootstrap button/context box doesn't)
http://teetimegolfpass.com/ma/golfcourses-zz.php?region=ma

Thanks again for your help.
Administrator
Registered: Aug 2008
Posts: 3382
Same answer. You need to run fb.activate() to light up content that has been dynamically added to the page after the page is loaded.

Assigning fb.start to a link's onclick action works great for standard floatbox links (unless trying to start a gallery set). There is no fb.start equivalent for fbContext, fbTooltip or fbCycler thingies. fb.activate() lights up all dynamic thingies, not just standard floatboxes.
Member
Registered: Jul 2013
Posts: 17
I know you your job is floatbox support (you do a great job at that too) not helping people write code but I thought I try one more question.

I know the answer to my problem is to use fb.activate(). I've spent a good part of the night trying to do just that but I'm not a javascript programmer and I can't figure out where to put the fb.activate().

May page is running at least 2 scripts that seem to dynamically update the page. GoogleMaps and Datatables

Any chance you could take a look at where I've placed these fb.activate(s) and make a suggestion as to why it's still not working ?

The link(fb.start) in the datatables header works fine but the button(contextbox) doesn't. Here is a link to the page:
http://teetimegolfpass.com/ma/golfcourses-zz.php?region=ma
Administrator
Registered: Aug 2008
Posts: 3382
Well, let's take a look.

The div that contains the table that contains the young fbContext element has a class name of "FixedHeader_Cloned" on it. That sounds like something that would be created by the fixedHeader.js script that's on the page. Searching that script for "FixedHeader_Cloned", we see that class being assigned to a div referenced as "nDiv" in the "_fnCloneTable" function. Right near the end of that function we see it calling "appendChild( nDiv )" to stick that div into the body. Try inserting a call to fb.activate() right after that appendChild call and before the return statement. You might even want to call "fb.activate( nDiv )" to restrict the activation to the contents of the newly attached div instead of crawling the entire page.

Looking again, actually where you have fb.activate() on the main page already will probably work if you remove the parameter from the call. You have "fb.activate(tob123)", which means 'activate all the Floatbox stuff that is attached to child elements of tob123'. But there are no child elements of tob123. (And it should be a quoted string anyway.) Just call fb.activate() as suggested and see if that works out for you.
« Last edit by admin on Thu Apr 10, 2014 4:01 pm. »

Page: 1