1

I am using waypoint and it send me this message:

Uncaught TypeError: Cannot read property 'each' of undefined

this is how I got the code with vue.js + rails:

<template>
      <div id="playerContainer final">
         <iframe src="xxxxxxxxx" allowfullscreen></iframe> 
       </div>
</template>

<script>
  require('waypoints/lib/jquery.waypoints.min.js')
  export default {
    mounted(){
      var ele
      new Waypoint({
        element: ele = document.getElementById('final'),
        handler: function(direction) {
          if (direction == 'down') {
            $(ele).addClass('muestra')
          } else {
            $(ele).removeClass('muestra')
          }
          console.log(direction);
        }
      });
    }
  }
<script>

I will really appreciate guys if you ca help me with this issue.

JULIO MACHAN
  • 161
  • 1
  • 2
  • 13
  • what is `require('waypoints/lib/jquery.waypoints.min.js')`? If you use rails, you might need to load external javascript files with asset pipeline. Is that loaded correctly? – IzumiSy Sep 08 '17 at 09:04
  • it include the lib in the vue file if I don't include the require it send me the message that the watpoint is not define or declare – JULIO MACHAN Sep 08 '17 at 13:18

1 Answers1

1

I found that div cannot contain multiple ids. You can get it work if you specify whole id in getElementById.

ele = document.getElementById('playerContainer final')

Can a DOM element have an ID that contains a space?

IzumiSy
  • 1,508
  • 9
  • 17
  • I removed an id and I'm using only the **id ="playerContainer"**, I got the same message, and if remove the line **require('waypoints/lib/jquery.waypoints.min.js')**, it doesn't show me the message but don't do anything – JULIO MACHAN Sep 08 '17 at 16:03
  • I found a new possible one. Have you checked if your jquery is beind loaded correctly? This is a similar issue: https://github.com/imakewebthings/waypoints/issues/559 – IzumiSy Sep 08 '17 at 16:19
  • I removed an id and I'm using only the **id ="playerContainer"**, also I move the **require('waypoints/lib/jquery.waypoints.min.js')**, inside the **mounted() {}** it is working I just need to fix some issue with the styles – JULIO MACHAN Sep 08 '17 at 16:37