JQuery Script not running

All, help needed. I am taking some of the Bootstrap/JQuery lessons in to my personal project. I can get bootstrap working OK but struggling with getting my browser to execute the JQuery. I have tried loading JQuery via:

but getting the error:

(index):2 GET https://jquery-3.3.1.min.js/ net::ERR_NAME_NOT_RESOLVED

source code is:

and webpage is:

https://robwuk.github.io/MPC_Boot/

any help gratefully received

Hope this helps.


<!DOCTYPE HTML>
<html>

<head>
<!-- meta tags needed to make mobile responsive -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- links to bootstrap and your css -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
  <link rel="stylesheet" href="https://robwuk.github.io/MPC_Boot/MPC_Style.css">

<title>Monkton Park Church - Welcome</title>
</head>

<body>
<div class="container-fluid">
  <div class="row" id="navbar">
    <div class="col-xs-12">
      <a href="#Welcome"><span class="text-center">Welcome</span></a> /
      <a href="#Circuit"><span class="text-center">Bede Circuit</span></a> /
      <a href="#Activities"><span class="text-center">Regular Activities</span></a> /
      <a href="#Contact"><span class="text-center">Contact Us</span></a> /
      <a href="http://www.methodist.org.uk" target="_blank"><span class="text-center">Methodist Church</span></a>
    </div>
  </div>

  <div class="row" id="header">
    <div class="col-xs-11">
      <h1 class="text-center text-primary" id="head">Monkton Park Methodist Church</h1>
      <h2><p class="text-center head">Minister: Revd Anon Ymous</p></h2>
      <h3><p class="text-center head">Address: 22 Anon Street, Jarrow</p></h3>
    </div>
    <div class="col-xs-1">
      <img class="img-responsive" src="https://robwuk.github.io/MPC_Boot/methodist_church_logo.png" alt = "Methodist Church">
    </div>
  </div>
</div>

<!-- jquery script -->
<script>
  $(document).ready(function() {
    $("#navbar").css("color", "orange");
    $("#navbar").css("background-color","black");
  });
</script>
<!-- link to jquery library -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- links to popper js and bootsrap js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

 </body>
</html>

1 Like

well JQuery is now loading but getting error:

(index):41 Uncaught ReferenceError: $ is not defined

BUT moving the:

block to the top makes it all work - thank you

Oops. Script needs to go after jquery is loaded.

Now you should have zero errors/bugs.


<!DOCTYPE HTML>
<html>

<head>
<!-- meta tags needed to make mobile responsive -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- links to bootstrap and your css -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
  <link rel="stylesheet" href="https://robwuk.github.io/MPC_Boot/MPC_Style.css">

<title>Monkton Park Church - Welcome</title>
</head>

<body>
<div class="container-fluid">
  <div class="row" id="navbar">
    <div class="col-xs-12">
      <a href="#Welcome"><span class="text-center">Welcome</span></a> /
      <a href="#Circuit"><span class="text-center">Bede Circuit</span></a> /
      <a href="#Activities"><span class="text-center">Regular Activities</span></a> /
      <a href="#Contact"><span class="text-center">Contact Us</span></a> /
      <a href="http://www.methodist.org.uk" target="_blank"><span class="text-center">Methodist Church</span></a>
    </div>
  </div>

  <div class="row" id="header">
    <div class="col-xs-11">
      <h1 class="text-center text-primary" id="head">Monkton Park Methodist Church</h1>
      <h2><p class="text-center head">Minister: Revd Anon Ymous</p></h2>
      <h3><p class="text-center head">Address: 22 Anon Street, Jarrow</p></h3>
    </div>
    <div class="col-xs-1">
      <img class="img-responsive" src="https://robwuk.github.io/MPC_Boot/methodist_church_logo.png" alt = "Methodist Church">
    </div>
  </div>
</div>


<!-- link to jquery library -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- links to popper js and bootstrap js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<!-- jquery script -->
<script>
  $(document).ready(function() {
    $("#navbar").css("color", "orange");
    $("#navbar").css("background-color","black");
  });
</script>

 </body>
</html>

in fact putting the scripts in that order at the top also works (for now at least) - THANK YOU for the help…

1 Like

For most Render-Blocking scripts you should put them right before the closing body tag, (technically you should load them "just before you need them"). There is also defer and async. You can try and run Lighthouse on the page to see more info on it as well.

2 Likes

Basically is an alias of jQuery()** so when you try to call/access it before declaring the function, it will endup throwing this ** is not defined error . This usually indicates that jQuery is not loaded and JavaScript does not recognize the . Even with **(document).ready** , $ is still going to be undefined because jquery hasn’t loaded yet.

To solve this error:

Load the jQuery CDN library at the beginning of all your javascript files/scripts which uses or jQuery, so that ** can be identified in scripts** .