2016-11-21 12 views
1

Ich habe die folgenden Django-Vorlage und ich habe eine Schaltfläche definiert, so dass es die Javascript-Funktion, die ich auf der Seite wie folgt hinzugefügt. Ich habe die folgenden Ausgaben:django Vorlage kann nicht JavaScript rufen

1) Wenn ich die Skript-Tags in den Header-Abschnitt bringen, zeigt sich nichts.

2) Wenn die Taste drücken, bekomme ich die undefinierte Fehlermeldung. (Uncaught ReferenceError: postData).

Was messe ich hier?

Vielen Dank, Mike

newproduct.html

{% load staticfiles %} 
<!DOCTYPE html> 
<html> 
<head> 





<title>New Product</title> 
</head> 
<body> 
<p>Hellow</p> 
<a href="/">Back</a> 

    <h2>Please enter product details:</h2> 
    <button onclick="postData();">Send Post</button> 


<form action="http://127.0.0.1:8000/newproduct/" method="post"> 
    <p>{{ message }}</p> 
     {% csrf_token %} 
     {{ form.as_p }} 

    <input type="submit"/> 
</form> 


<script src="bower_components/jquery/src/jquery.js" type="text/javascript"/> 
<script src="scripts/main.js" /> 

</body> 
</html> 

main.js

function postData() 
{ 
    $.post('/newproduct', {name:'New Product JS', price:555, }); 
}; 
+0

Ich habe genau das gleiche Problem Ich bin am sterben, um die Antwort zu finden. – user1941390

Antwort

4

Sie haben hartcodiert der Verweis auf postData in Ihr HTML, aber Sie haben es verwendet, bevor Sie es definiert haben, seit dem JS wird erst am Ende der Seite geladen.

Sie können dies beheben, indem Sie das Skript an den Anfang des HTML-Dokuments verschieben. Es ist jedoch besser, JS nicht direkt in HTML zu verwenden. Stattdessen sollte das Skript selbst die domready-Funktionalität von jQuery verwenden, um sich an das button -Ereignis zu binden.

html:

<h2>Please enter product details:</h2> 
<button id="my_button">Send Post</button> 

main.js

$(function() { 
    $('#my_button').click(function() { 
    $.post('/newproduct', {name:'New Product JS', price:555, }); 
    }); 
}); 
0

Vielleicht sind Sie Schwierigkeiten haben, den Pfad der URL-Handhabung, verwenden Sie stattdessen den vollständigen Pfad, versuchen Sie so etwas wie:

{% static ‘path/to/file’ %} 

In Ihrer settings.py

STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),) 

Denken Sie daran, dass Ihr statisches Dateiverzeichnis auf der gleichen Ebene Ihres Projekts eingerichtet ist.