calling fancybox from dynamic content ($(this).fancybox is not a function)

[mkb5150]

Hello, I am fairly new to jQuery so I hope there is an easy fix for
this... I am using fancybox to pull up a custom URI based on which row
in the table a user clicks. The table shows 20 results at a time, and
will call up a URI such as page.php?foo=50. There are next/prev
buttons on the table that uses jquery to repopulate the table with the
next 20 results. Anyway, for the initial page load, everything works
great. But as soon as the table changes, it stops working and the
javascript error is $(this).fancybox is not a function. I don't know
how to get it to reapply the fancybox event to the new set of data, it
seems to only work on initial page load.

Here is how I am calling the function:

function addClickHandlers() {

$("#codesNext", this).click(function(){
$("#availcodes").load("includes/populate_table.php", { start: $
("#start").val() }, addClickHandlers);
});

$(".code").each(function(index) {
$(this).unbind(); });

$(".code", this).each(function(index) {
$(this).fancybox( { href: "manageCode.php?code=" + $
(this).attr("name") } );
addClickHandlers();
});

}
$(document).ready(addClickHandlers);

and this is a sample table row:
<tr class="code" id="rowevenover" name="278">

I also tried it without calling from the addClickHandlers function and
just putting it inside $(document).ready, but this didn't work
either. I tried it this way to see if the handlers just needed
reapplied after the content refreshed...

any ideas? thanks in advance!

[Brett DeWoody]

I also ran into this problem. The solution is to have an anchor tag
on your page that gets triggered (via jQuery) when the user clicks
your dynamic content. Here's how this works:

First add the FancyBox javascript to your page or JS file as you would
normally. The below contains JS to bind FancyBox to a link with an ID
of "openFancyBox" as well as JS to trigger FancyBox when the user
clicks a link with an CLASS of "clickFancyBox". I'm using jQuery's
live() function so that any link that gets added dynamically with a
CLASS of "clickFancyBox" will ensure the FancyBox gets opened.

<script>
$("a#openFancyBox").fancybox();

$("a.clickFancyBox").live('click',function() {
$('a#openFancyBox').trigger('click');
});
</script>
<a id=""openFancyBox href="[IMAGE_URL]"></a>

Then when you want to have any dynamically generated content trigger
simply add an anchor tag with a CLASS of "clickFancyBox". Like this:

<a class="clickFancyBox" href="[IMAGE_URL]">Open Fancy Box</a>

When a user clicks the above link it will trigger a click on the link
with FancyBox binded to it, and open FancyBox.

Hope that helps!

-Brett DeWoody

[Brett DeWoody]

Oops, the first snippet of code should be:

<script>
$("a#openFancyBox").fancybox();
$("a.clickFancyBox").live('click',function() {
$('a#openFancyBox').trigger('click');
});
</script>
<a id="openFancyBox" href="[IMAGE_URL]"></a>

The difference being the quotes around the ID of the anchor tag.

[j]

Quick question... I'm using the below code on dynamically loaded
content via AJAX.

It works fine on the initial page, however; on the dynamically loaded
content it opens for a second, then quickly switches over to the whole
browser window. What it's opening is a "View Record" type page (PHP)
to open a PDF from a database (not sure if that matters?)

Any ideas on how to fix this?

On Apr 15, 12:21 am, Brett DeWoody <brettdewo...@gmail.com> wrote:
> Oops, the first snippet of code should be:
>
> <script>
>      $("a#openFancyBox").fancybox();
>      $("a.clickFancyBox").live('click',function() {
>            $('a#openFancyBox').trigger('click');
>      });
> </script>
> <a id="openFancyBox" href="[IMAGE_URL]"></a>
>
> The difference being the quotes around the ID of the anchor tag.
>
> On Apr 15, 1:18 am, Brett DeWoody <brettdewo...@gmail.com> wrote:
>
>
>
> > I also ran into this problem.  The solution is to have an anchor tag
> > on your page that gets triggered (via jQuery) when the user clicks

> > yourdynamiccontent.  Here's how this works:

--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.