Django-Javascript无法在模板中使用 [英] Django - Javascript not working in templates
问题描述
我正在尝试根据用户选择选择显示输入字段.从stackoverflow学习，我编写了以下代码:
I am trying to display an input field based on user choice selection. Learning from stackoverflow, I have written the following code:
<form action="/register/" method="post" enctype="multipart/form-data">{% csrf_token %}
<select name="designation" id="designation">
<option value="faculty">Faculty</option>
<option value="student">Student</option>
</select>
<div id="students" style="display:none;">
<input type="file" name="uploadFile">
</div>
</form>
<script type="text/javascript">
$('#designation').on('change',function(){
if( $(this).val()==="student"){
$("#students").show()
}
else{
$("#students").hide()
}
});
</script>
该代码在 https://jsfiddle.net/中有效.但是，当我尝试在django模板中使用它时，它不起作用(即在选择'student'时什么也没有出现).我的base.html中也包含以下内容.
The code does work in https://jsfiddle.net/. However, when I am trying to use it in my django template its not working.(i.e., on selecting 'student' nothing appears). I have the following included as well in my base.html.
<script src="{% static 'jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
更新: base.html::hideshow.js是脚本.
UPDATE: base.html: hideshow.js is the script.
<!DOCTYPE html>
{% load staticfiles %}
{% load static %}
<html lang="en"
xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<link href="{% static 'css/bootstrap-dist.min.css' %}" rel="stylesheet">
<link href="{% static 'css/ie10-viewport-bug-workaround.css' %}" rel="stylesheet">
<script src="{% static 'JS/html5shiv.min.js' %}"></script>
<script src="{% static 'JS/respond.min.js' %}"></script>
<script src="{% static 'JS/hideshow.js' %}"></script>
<link href="{% static 'css/carousel.css' %}" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'css/sampleLogin.css' %}" />
</head>
<body>
{% include "messages_display.html" %}
<br />
{% include "navbar.html" %}
{% block content %}
{% endblock %}
register.html:
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container">
<div class="col-md-12">
<div class="col-sm-7 col-sm-offset-2">
<h1>{{ title }}</h1><br />
<form action="/register/" method="post" enctype="multipart/form-data">{% csrf_token %}
<select name="designation" id="designation">
<option value="faculty">Faculty</option>
<option value="student">Student</option>
</select>
<div id="students" style="display:none;">
<input type="file" name="uploadFile">
</div>
</form>
{% endblock content %}
请帮助.
推荐答案
首先，您必须在HTML文件中包含jquery.min.js文件.然后，您必须将js代码保存在 $(document).ready(function())中，然后您的代码才能正常工作
First you have to include jquery.min.js file in html file. Then you have to keep js code in $(document).ready(function().then your code will work
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#designation').on('change',function(){
console.log($(this).val());
if( $(this).val()==="student"){
$("#students").show()
}
else{
$("#students").hide()
}
});
});
</script>
<select name="designation" id="designation">
<option value="faculty">Faculty</option>
<option value="student">Student</option>
</select>
<div id="students" style="display:none;">
<input type="file" name="uploadFile">
</div>
这篇关于Django-Javascript无法在模板中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
