Search code examples
javascriptjqueryhtmlruby-on-railsjplayer

jQuery is not defined, $ is not defined and Cannot read property 'fn'

I am making a web application for a university project. This is about music, until I could upload the music easily, but when I am going to reproduce I have several problems, which I have been looking for and have not been able to solve yet. Mainly when I inspect my page I always get the jQuery error not defined, and the moment a song to play it, I get the $ is not defined error. But when I load the page at that point and let me play the songs, and I can go and play the next one normally. But whenever I start section and try to play them at the beginning never works. And it is always necessary to reload the page to make it work normally.

this is the head of the html:

<head>
  <script src="http://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
  <Script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#jquery_jplayer_1").jPlayer({
          ready: function () {
            $(this).jPlayer("setMedia", {
              mp3: "<%[email protected]%>"
            });
          },
          swfPath: "/js",
          wmode: "window",
          supplied: "mp3",
          useStateClassSkin: true,
          autoBlur: false,
          smoothPlayBar: true,
          keyEnabled: true,
          remainingDuration: true,
          toggleDuration: true
        });
      });
    </script>
</head>

for this moment i have a the <%=render "reload"%> in the first line of the html. Because before I had to load the page every time I went to review a song. With this I do not have to do it. But I still have the problem mentioned above. this is the _reload:

<script type="text/javascript">
 $(document).ready(function() {
         location.reload();
 });
 </script>

Solution

  • Your plugin page shows you're missing a little information in this post. A link to a css file, ex:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/skin/pink.flag/css/jplayer.pink.flag.min.css">

    Here's a codepen of your plugin working as intended. https://codepen.io/anon/pen/eEGbXG

    It uses the referenced jQuery version 1.11.1 and the plugins' CDN links for style and js, which you can also find here: https://cdnjs.com/libraries/jplayer

    I used your same markup and commented out your jPlayer function and it works as well.

    I added the example markup in the body referenced from your plugin page from here also: http://jplayer.org/latest/quick-start-guide/step-6-audio/

    Hope this helps!