jQuery/HTML5 roulette not working

Question

I'm trying to implement a jquery/html5 roulette into my site.
I've found some jsfiddle code I'd like to use: http://jsfiddle.net/kYvzd/118/ But when I'm trying to implement it on my website it won't work.. I'm receiving the error TypeError: $(...).spinwheel is not a function [Learn More]

This is the code I've implemented: The HTML:

<legend class="text-center header">Roulette!</legend>
  <div id="main">
    <div id="left-column">
      <form class="iform" action="#" method="get">
        <label for="joiner"></label>
        <input id="joiner" name="joiner" class="joiner" placeholder="Please Enter your name" />
        <button class="add">Add</button>
        <button class="spin-trigger">Spin</button>
      </form>        
      <canvas class="canvas" width="500" height="500"></canvas> 
    </div>
    <div id="right-column">
      <p class="winner">The Winner is ... <span>&nbsp;</span></p>
      <ul class="participants">
      </ul>
    </div>
    <div style="clear:both"></div>

  </div>

<script>
$(document).ready(function(){
   $('.canvas').spinwheel({
       pplArray : ["♈", "♉", "♊", "♋","♌", "♍", "♎", "♏","♐", "♑", "♒", "♓"]
   });
});
</script>

The JS is exactly as the JS file, implemented like this:

<script src="http://code.jquery.com/jquery-1.6.js" type="text/javascript"></script>
<?php
  if($active=="roulette") echo '<script src="js/roulette.js" type="text/javascript"></script>'
?>

I can see that the file is roulette.js is implemented, so there's nothing wrong at the PHP part $active.
I feel really stupid because I've basically just copied the code and it won't work..
And the <script> part in the HTML that's the only thing I've moved because I will need to change some values there dynamically.

Update: The website link is: http://randomstock.net/roulette.php

Answer 1

You have two copies of jQuery included in your site. Looking at the <head> you have

<script src="http://code.jquery.com/jquery-1.6.js" type="text/javascript"></script>
<script src="js/roulette.js" type="text/javascript"></script>

At this point, you have jQuery 1.6 running on the page, with the spinwheel plugin added to jQuery as you are expecting.

You have the code

$(document).ready(function () {
    $("canvas").spinwheel(...);
});

This would all work as you are expecting.

HOWEVER!

Towards the bottom of your page, you have

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

At this point, you have a new copy of jQuery - one without the spinwheel plugin installed. Your page is in a weird limbo state, where the $(document).ready is running from jQuery 1.6, but the $ inside it when it runs will be the newer jQuery, without the plugin.

Two solutions:

Preferred: get rid of the duplicate jQuery
$(document).ready(function($) { ... }) will ensure that the $ inside the function will be the same as the one outside.

jQuery/HTML5 roulette not working

Question

1 answers

solution1
1 2016-10-16 13:05:28

jQuery/HTML5 roulette not working

Question

1 answers

solution1 1 2016-10-16 13:05:28

solution1
1 2016-10-16 13:05:28