CODEWITHSUNDEEP
jquerytwitter-bootstrapcloud9-ide
Ryan
Ryan

Reputation: 1432

$ still not defined after moving jQuery file to head

I've explored reasonable remedies found here and elsewhere, but for for some reason cloud9 does not want to let me play with jQuery. I started with the "links at the bottom approach," got the $ not defined please fix or add /*global $*/ error (even though my code was in $(document).ready(function () {}); ), then moved everything up to the <head> tag so that there was no way my script could try to run before jQuery was loaded. Still, the same error. What gives?

Note I also tried reversing the order of the bootstrap and google jQuery links. Also, very new at front-end dev. Thx. 

<!DOCTYPE html>

<html lang="en">
    <head>
        <!-- Bootstrap Links -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- style -->
        <style>
            .container-fluid {
                font-family: Serif, Helvetica;
                background-color: #8A2BE2;
                color: #FFFFFF;
            }

            #container-top {
                height: 75vh;
                margin: 50px 50px 50px 50px;
                background-color: #000000;
                color: #FFFFFF;
                font-size: 50px;
            }

            /* word-wrap added to ensure quote remained in container */
            .quote {
                font-family: Serif, Helvetica;
                word-wrap: break-word;
            }

            /*
            .vertical-align {
                display: flex;
                align-items: center;

            }
            */

        </style>
        <!-- scripts -->
        <script>
            $(document).ready(function () {

            });

        </script>
    </head>
    <body>
        <div class="container-fluid">

Upvotes: 0

Views: 146

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

got the $ not defined please fix or add /global $/ error (even though my code was in $(document).ready(function () {}); )

It means something else removes $ reference to jQuery. To avoid it in document ready handler, you can pass explicit alias:

$(document).ready(function ($) {
  // now '$' refers to jQuery inside ready handler even if '$' has been overwritten by other code
});

Upvotes: 3

Master Yoda
Master Yoda

Reputation: 4402

jQuery references always need to be included before plugins that rely on it.

Here is the solution you provided in your question added as SO snippet so you can see for yourself that it should work when references are added in the correct order.

$(document).ready(function() {
  $(".container-fluid").append("jquery is set up correctly");
});
.container-fluid {
  font-family: Serif, Helvetica;
  background-color: #8A2BE2;
  color: #FFFFFF;
}

#container-top {
  height: 75vh;
  margin: 50px 50px 50px 50px;
  background-color: #000000;
  color: #FFFFFF;
  font-size: 50px;
}

/* word-wrap added to ensure quote remained in container */
.quote {
  font-family: Serif, Helvetica;
  word-wrap: break-word;
}

/*
.vertical-align {
    display: flex;
    align-items: center;

}
*/
<!-- notice that jQuery reference has been added first !-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container-fluid"></div>

Upvotes: 1

Related Questions