Fancybox doesn’t load on “next” page of table

  • Resolved sandeld

    (@sandeld)


    6 years, 8 months ago

    I am using the TablePress plugin which is built on the “DataTables” framework to organize and display yoga classes available on my client’s website.

    The example table attached here only has 10 rows, but if I set it to only display 5 per page, Fancybox stops working on page 2. Instead of popping up the video in a fancybox like in page 1, it tries to redirect the user to the video hosted on vimeo…which is not accessible.

    I reached out to the table plugin developer thinking it was something on their end, but they pointed out this exact thing is a limitation of the “DataTable” JS framework:

    https://datatables.net/faqs/#events

    Q. My events don’t work on the second page
    A. When attaching events to cells in a table controlled by DataTables, you need to be careful how it is done. Because DataTables removes nodes from the DOM, events applied with a static event listener might not be able to bind themselves to all nodes in the table. To overcome this, simply use jQuery delegated event listener options, as shown in this example. Additionally, you could use my Visual Event bookmarklet to help debug event issues.

    In the linked example, the programmer speaks as if “simply use jQuery delegated event listener” is a trivial task. It may be for a JS programmer; however, I am not.

    And since this seems like such a trivial task, I’m wondering if there’s already a built-in setting or easy workaround that you’ve already developed in Easy Fancybox.

    Any help you can offer would be great. The real table I’m working with for my client is already 55 rows and grows each week. In theory, it will be hundreds of rows long which is unrealistic to display all at once on a single page.

    Thank you

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @sandeld the plugin as a built-in event handler “post-load” (on the body element) that can be called to make it re-scan for new media links. The event handler needs to be triggered after new content is added to the page, like when the Next link is clicked or maybe on a sorting action.

    It depends on TablePress is there is an easy way to trigger a new event. Can you ask the developers if TablePress triggers its own event after new content has been loaded to the DOM? If so, it could be used to wake FancyBox and scan the new content…

    Thread Starter sandeld

    (@sandeld)

    I’ll pass this along, and let you know what they say.

    I wish I knew JS so that I could at least speak your guys’ language (pun intended), but I’ve avoided JS since 2001. lol

    Thread Starter sandeld

    (@sandeld)

    Here is the response from “TablePress”. If you’d like to read through that entire thread, you can see it here:

    Hi,

    the DataTables JS library does indeed offer such events (see https://datatables.net/reference/event/ ) but I don’t really have experience with those.

    Still, I don’t really think that the current way how FancyBox registers its events is the best. For me (without having more detailed insights, to be honest), it might make more sense for it to use “event delegation”, i.e. to register its event handler on the body element and check if it was the intended recipient there.

    Regards,
    Tobias

    Thread Starter sandeld

    (@sandeld)

    Hello,

    Any chance you’ve had a moment to review this from the TablePress developer?

    I understand you’re terribly busy so I’m not opposed to poking around in the code, but I could use a little push in the right direction in order to get this fixed. It’s quite important for the site to function properly.

    Thanks!

    Hi, not really sure about what the tablepress dev has in mind when he would like my plugin to use event delegation but looking at the tablepress events documentation, you might try this:

    
<script type="text/javascript">
jQuery('#myTable').on( 'draw.dt', easy_fancybox_handler );
</script>

    where #myTable should correspond with your particular tablepress table ID, I suppose… Or maybe a general jQuery(document.body) would work too.

    Thread Starter sandeld

    (@sandeld)

    So, this is something I would change in the TablePress plugin, NOT yours?

    Sorry, like I said, I’m not well versed in Java, but I can see that I will be shortly.

    Thread Starter sandeld

    (@sandeld)

    I posted your reply with the TablePress developer, and he already explained how to implement the code. It worked!!

    Thanks so much for your replies and working with the TablePress developer. You’ve saved me quite a big headache.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Fancybox doesn’t load on “next” page of table’ is closed to new replies.

Tags