All threads / Colorbox & Turbolinks load

Ask A Question

Notifications

You’re not receiving notifications from this thread.

Colorbox & Turbolinks load

Thomas M asked in Javascript

Hello,

Rails 5.1.0 & Turbolinks5 & Jquery3.1.2 here

I'm trying to make jQuery Colorbox works with dynamicly loaded elements (using ActionCable) with no luck.

With the implementation below, Colorbox is tied to a 'on click' event on the parent element, wich allows the newly loaded elements to be recognized automatically. However, this might not be the best option since colorbox seems to be ignored on all element when the user comes form another page (turbolinks:load), and is not available in console. Everything works fine on page reload.

What do I miss? Thank you in advance for your help

Here is my implementation:

class @GalleryLoader
  constructor: (@container,@elem) ->
    @setEvents()

  setEvents: ->
    $(@container).on 'click', @elem, @handleClick

  handleClick: (e) ->
    e.preventDefault()
    $(this).colorbox
      transition: 'fade'

$(document).on 'turbolinks:load', ->
  if (($ "[data-behavior='project-media-parent']").length)
    new GalleryLoader "[data-behavior='project-media-parent']", "[data-behavior='medium-link']"
    ```
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 34,885+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.