web-dev-qa-db-fra.com

Erreur de référence non détectée: $ n'est pas une erreur définie dans jQuery

J'ai ce code dans jQuery: (le nom du fichier est javascript.js ... J'utilisais JavaScript avant ...)

$(document).ready(function() {
 $("#readFile").click(function() {
    $.get('test.txt', function(data) {
      $("#bottom_pane_options").html(data); // #bottom_pane_options is the div I want the data to go
    }, 'text');
 });
});

... et ceci en HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Culminating</title>
    <link href="style.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="./javascript.js"></script>
    <script
        src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false">
    </script>

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


    <script>
        function initialize()
        {
        var mapProp = {
          center:new google.maps.LatLng(50.569283,-84.378433),
          zoom:5,
          mapTypeId:google.maps.MapTypeId.TERRAIN
          };
        var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>

<body>
    <div class="content">
        <div id="googleMap"></div>
        <div id="right_pane_results">hi</div>
        <div id="bottom_pane_options">
            <button id="readFile">Read File</button>
        </div>
    </div>
</body>

Lorsque je vérifie la console, j'obtiens le Uncaught ReferenceError dire que $ n'est pas défini sur la première ligne. Je suppose qu'il fait référence au premier caractère de la première ligne. J'ai obtenu ce code sur un site Web et je suis nouveau sur jQuery donc je ne suis pas sûr de ce qui ne va pas ici.

Aucune suggestion?

javascriptjqueryhtmlfile-io
9
user3015565

Modifiez l'ordre dans lequel vous incluez vos scripts (d'abord jQuery):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="./javascript.js"></script>
<script
    src="http://maps.googleapis.com/maps/api/js?key=YOUR_APIKEY&sensor=false">
</script>
41
j08691

Les scripts sont chargés dans l'ordre dans lequel vous les avez définis dans le HTML.

Par conséquent, si vous chargez d'abord:

<script type="text/javascript" src="./javascript.js"></script>

sans charger jQuery d'abord, puis $ is not defined.

Vous devez d'abord charger jQuery pour pouvoir l'utiliser.

Je recommanderais également de placer vos scripts au bas de votre code HTML pour des raisons de performances.

7
MMM

Incluez d'abord le fichier jQuery:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript" src="./javascript.js"></script>
    <script
        src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false">
    </script>
7
Saravana

L'installation standard de MVC 5 place des références javascript dans le fichier _Layout.cshtml qui est partagé dans toutes les pages. Ainsi, les fichiers javascript étaient en dessous du contenu principal et de la fonction document.ready où étaient tous mes $.

PARTIE INFÉRIEURE DE _Layout.cshtml:

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

</body>
</html>

Je les ai déplacés au-dessus de @RenderBody () et tout allait bien.

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

</body>
</html>
1
JustJohn