2014-01-17 39 views
9

Ich habe diesen Code in jQuery: (Dateiname javascript.js ist ... Ich war mit JavaScript vor ...)

$(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'); 
}); 
}); 

... und dies in 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> 

Wenn ich die Konsole überprüfen, erhalte ich die Uncaught ReferenceError sagen, dass $ nicht in der ersten Zeile definiert ist. Ich nehme an, dass es sich auf das erste Zeichen in der ersten Zeile bezieht. Ich habe diesen Code von einer Website und ich bin neu bei jQuery, also bin ich mir nicht sicher, was hier falsch läuft.

Irgendwelche Vorschläge?

+4

Sie sollten die jQuery erste umfassen –

+1

Versuchen Sie Ihren eigenen Code Skript am Ende des HTML-Inhalte hinzufügen, bevor Sie Ihren Abschluss Tag, dies zu vermeiden, wie '$ wird defined' nicht Error. Und fügen Sie weitere vordefinierte Jquery oder eine andere Bibliothek im oberen -Tag hinzu. Ihre Bestellung sollte - '' und innerhalb des Körpers '' –

Antwort

41

Ändern der Reihenfolge Sie einschließlich Ihrer Skripte (jQuery zuerst):

<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> 
+0

Vielen Dank. Ihre Antwort löste das Problem. Aber jetzt bekomme ich einen Fehler, der besagt, dass mir der Header 'Access-Control-Allow-Origin' fehlt. Ich weiß, dass ich hinzufügen muss "Allow-Control-Access-Origin: *", aber ich bin mir nicht sicher ** wo ** um es zu sagen. – user3015565

7

Fügen Sie die jQuery erste Datei:

<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

Scripts werden in der Reihenfolge geladen Sie sie in der definierten HTML.

Deshalb, wenn Sie erste Last:

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

ohne ersten jQuery geladen wird, dann $ is not defined.

Sie müssen zuerst jQuery laden, damit Sie es verwenden können.

Ich würde auch empfehlen, Ihre Skripte aus Leistungsgründen an den unteren Rand Ihres HTML zu platzieren.

+0

... geladen und in der Reihenfolge interpretiert. Die Annahme des OP scheint zu sein, dass sie erst interpretiert werden, nachdem alle geladen sind. – akonsu

1

Die MVC 5-Bestandsinstallation stellt JavaScript-Verweise in die Datei _Layout.cshtml, die auf allen Seiten freigegeben ist. Also waren die Javascript-Dateien unterhalb der Hauptinhalt- und document.ready-Funktion, wo alle meine $ waren.

unterer Teil des _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> 

Ich zog sich über dem @RenderBody() und alles war in Ordnung.

@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> 
Verwandte Themen