Error with Turbolinks Rails 4 and contextMenu.js

Question

I use Rails 4 and Turbolinks, I use the plugin jquery "contextMenu" for create a little menu, If I reload my app and click on the button, my contextMenu work, but if I navigate in my app and come back on this page and click on my button, the contextMenu doesn't work.

Anyone can help me with my code please ?

 $(document).on "page:change", ->
  # uncheck tous les checkbox
  uncheckAllBox = ->
    $("#table_sounds :checkbox").each ->
      $("#sound_id").prop "checked", false
      @checked = false
      return
    $("#delete_sounds").css "display", "none"
    count_checkbox_true == 0
    return

  # check tous les checkbox
  checkAllBox = ->
    $("#table_sounds :checkbox").each ->
      $("#sound_id").prop "checked", true
      @checked = true
    $("#delete_sounds").css "display", "inline"  
    count_checkbox_true = count_checkbox_max
    return

  # Check le checkbox du table en fonction de la progression des sons
  checkType = (type) ->
    uncheckAllBox()
    $("#table_sounds tr").each ->

      # Check les checkbox qui ne sont pas encore checked et qui sont du type selectionner
      if type is $(this).attr("class")
        $(this).find(":checkbox").each ->
          @checked = true
          count_checkbox_true++
          return
      return
    return


  # Les différent test pour rendre visible l'image de la corbeille et check la checkbox du th
  count_checkbox_true = 0
  count_checkbox_max = 0


  if $("#table_sounds").length > 0

    ########################### BUG ON THIS PART ########################
    $(document).on "click", "#table_sounds #button_select", ->
      $.contextMenu
        selector: "#button_select"
        trigger: "left"
        callback: (key, options) ->
          m = "clicked: " + key
          window.console and console.log(m) or alert(m)
          return

        items:
          all:
            name: "Tout"
            callback: (key, options) ->
              checkAllBox()
              return

          none:
            name: "Aucun"
            callback: (key, options) ->
              uncheckAllBox()
              return

          success:
            name: "Finie"
            callback: (key, options) ->
              checkType "success"
              return

          error:
            name: "Erreur"
            callback: (key, options) ->
              checkType "error"
              return

          in_progress:
            name: "En cours"
            callback: (key, options) ->
              checkType "info"
              return
###################### END OF BUG PART ###########################
    $ ->
      $("#table_sounds :checkbox").each ->
        count_checkbox_max++
        if @checked
          count_checkbox_true++
          $("#delete_sounds").css "display", "inline"  
        return

      count_checkbox_max--
      document.getElementById("delete_system").style.display = "none"  if count_checkbox_max is 0
      count_checkbox_true = count_checkbox_max  if count_checkbox_true > count_checkbox_max
      return

    $(".checkbox_sounds").click ->
      if @checked
        count_checkbox_true++
        $("#delete_sounds").css "display", "inline" 

      else
        count_checkbox_true--
        $("#delete_sounds").css "display", "none"  

      if count_checkbox_true is count_checkbox_max
        $("#sound_id").prop "checked", true 
      else
        if count_checkbox_true > 0
          $("#delete_sounds").css "display", "inline" 
        $("#sound_id").prop "checked", false 
      return

    $("#sound_id").click ->
      if @checked
        checkAllBox()
      else
        uncheckAllBox()
      return
  return

But if i try with just an alert, that's work.

$(document).on "click", "#table_sounds #button_select", ->
  alert("that's work)

I dont understand what i need to modify for my code coffee work.

Thank's for your help.

This should help. https://github.com/kossnocorp/jquery.turbolinks — Justin, Aug 04 '14 at 13:25
you think I need that, i cant fix my error without this gem ? — Florian Dano Clement, Aug 04 '14 at 13:26
Two solutions I've seen. The one I mentioned first, and this http://stackoverflow.com/a/18770589/2456549. — Justin, Aug 04 '14 at 13:27
I try the second solution and same problem , if my page change my menu doesn't work. — Florian Dano Clement, Aug 04 '14 at 13:35
@FlorianDanoClement why are you using `page:change` event? Also you don't need gem, `on` function will work. — Mandeep, Aug 04 '14 at 13:37
I use page:change for my javascript work , if i navigate on my website, because document.ready doesn't work with turbolinks. no ? — Florian Dano Clement, Aug 04 '14 at 13:39
@FlorianDanoClement just remove the `page:change` event. You already have the click event on `#button_select` so it should work — Mandeep, Aug 04 '14 at 13:41
No , that doesn't work, I go upload my all coffeescript code. Maybe that can help you — Florian Dano Clement, Aug 04 '14 at 13:43
@FlorianDanoClement then there is something wrong with your code as you certainly don't need `page:change` event. Your alert is also working which doesn't have page:change event — Mandeep, Aug 04 '14 at 13:45
I need the page:change event for the checkbox function at the beginning and for count my number of checkbox. — Florian Dano Clement, Aug 04 '14 at 13:48

greenif · Answer 1 · 2014-10-17T20:27:37.923

A few month passed from last post.

But I had the same issue and I found the solution.

The problem is not only in JavaScript events. The events - it's only half of the problem.

Both solution of events problem specified above is good. I use

$(document).on('page:load', initContextMenus);

this approach is much easier and cleaner, in my opinion.

Another part of solution is that you need to unregister existed context menu.

$.contextMenu('destroy', selector );

So code in my case:

function initContextMenus() {
  $.contextMenu('destroy', "#taxonomies a" );

  $.contextMenu({
    selector: '#taxonomies a', items: {
      "new": {
        name: 'New',
        callback: function(key, options) {
          window.location.href = this.data('new-url');
        }
      },
      "edit": {
        name: 'Edit',
        callback: function(key, options) {
          window.location.href = this.data('edit-url');
        }
      },
      "delete": {
        name: 'Delete',
        callback: function(key, options) {
          deleteRequest(this.data('delete-url'), 'Are You sure?', this)
        }
      }
    }
  }
)}


$(document).ready(initContextMenus);
$(document).on('page:load', initContextMenus);

This should be the accepted answer, I ran into the same issue and this solved it. — Preetpal, Jun 16 '16 at 15:59

Error with Turbolinks Rails 4 and contextMenu.js

1 Answers1