Issue in referencing external js file inside html

Question

I am trying to reference external js file inside my html as follow, did I miss something? The pie chart is supposed to appear but I am not getting it. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script_src

<script src="http://benpickles.github.io/peity/jquery.peity.js"></script>
<script src="http://benpickles.github.io/peity/jquery.peity.min.js"></script>

<div><span class="pie">1/5</span></div>

Open console and read the message explaining it for you. – dfsq Dec 27 '17 at 08:25 — dfsq, Dec 27 '17 at 08:25

Brigo · Answer 1 · 2017-12-27T22:57:12.993

Your code has 4 main problems:

You didn't call jQuery inside the HTML document <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>, that must be called before the plugin
You called twice the plugin: both the minified and not minified version (if available, always request for the minified version since it's lighter)
You requested the plugin over HTTP instead the always better HTTPS
You didn't call the function inside the document with $(".pie").peity("pie")

Here's a working snippet.

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://benpickles.github.io/peity/jquery.peity.min.js"></script>
</head>

<body>

<div>
  <span class="pie">1/5</span>
  <span class="pie">226/360</span>
  <span class="pie">0.52/1.561</span>
  <span class="pie">1,4</span>
  <span class="pie">226,134</span>
  <span class="pie">0.52,1.041</span>
  <span class="pie">1,2,3,2,2</span>
</div>

  <script>
    $(document).ready(function() {
      $(".pie").peity("pie");
    });  
  </script>

</body>
</html>

redhatvicky · Answer 2 · 2017-12-27T08:37:46.607

Seems you have missed the JavaScript snippet 1. Loading order Should be changed ,

<html>
  <head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="http://benpickles.github.io/peity/jquery.peity.js"></script>
    <script type="text/javascript">
  $(document).ready(function() {
    $("span.pie").peity("pie");
  });
    </script>
  </head>
  <body>
<div><span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>
<span class="pie">1,4</span>
<span class="pie">226,134</span>
<span class="pie">0.52,1.041</span>
<span class="pie">1,2,3,2,2</span></div>
 <body>
</html>

score 0 · Answer 3 · answered Dec 27 '17 at 08:34

0

There are three changes to be made in your code.

You need to include jQuery.
You need to call the peity() function on the span.
You need not include both jquery.peity.js and jquery.peity.min.js. Including either one is sufficient.

See code below.

$(document).ready(function() {
  $("span.pie").peity("pie");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://benpickles.github.io/peity/jquery.peity.min.js"></script>

<div><span class="pie">1/5</span></div>

answered Dec 27 '17 at 08:34

Vivek

2,665
1
18
20

Thanks for highlight my mistakes. But I'm still not getting the result. – NewBie Dec 27 '17 at 08:48
Are you able to run the above snippet and get the result? – Vivek Dec 27 '17 at 08:50
yup. I can Run code snippet here. But my dojo is not working yet. – NewBie Dec 27 '17 at 08:52
He doesn't actually *need to call the peity() function on the span*, `$(".pie").peity("pie")` is enough – Brigo Dec 27 '17 at 08:54
@NewBie Can you please edit your question and paste your entire code? – Vivek Dec 27 '17 at 08:54

score 0 · Answer 4 · answered Dec 27 '17 at 10:26

0

In addition to the other answers, your Dojo snippet isn't working because you're trying to load the Peity plugin over HTTP from a page being served over HTTPS. Your web browser console will tell you that the browser blocks loading mixed content from an HTTPS page.

Load peity.js from https://benpickles.github.io/peity/jquery.peity.js. But when you publish your site, download peity.min.js and host it on your own server. Github is not a CDN.

answered Dec 27 '17 at 10:26

AuxTaco

4,883
1
12
27

Good to know! I will take note on that. But my piety ,alone, is working now finally http://dojo.telerik.com/uTikoB, here I am not getting js reference from Github, instead directly referencing from their hosting site http://benpickles.github.io/peity/. – NewBie Dec 27 '17 at 15:15

Issue in referencing external js file inside html

4 Answers4