javascript - 物化CSS(使用django)下拉表单不起作用
问题描述
我正在尝试创建一个表单,其中用户选择已经保存在数据库中的模型对象(发票)的实例并提交。我试图初始化 JS,但在 html 中使用 JS 的经验很少,所以我不完全确定我做得对。
现在,除了表单中的提交按钮之外,下面的代码不会呈现任何内容。我尝试添加一个随机输入字段(有效)并尝试将“发票”上下文解包并呈现为同一页面上的原始文本(也有效),所以我认为我已经将问题缩小到表单选择。
header.html
<head>
{% load static %}
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Compiled and minified CSS -->
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
$('select').formSelect();
});
</script>
</head>
<body>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Elb</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="/bulk_invoice_upload/">Invoice Upload</a></li>
<li><a href="/bulk_inventory_upload/">Inventory Upload</a></li>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
</body>
表单.html
{% extends 'main/header.html' %}
<body>
{% block content %}
<br>
<br>
<form method="POST">
{% csrf_token %}
<label for="invoice">Invoice</label>
<select id="invoice" name="invoice">
<option class=browser-default value="" disabled selected>Choose invoice</option>
{% for invoice in invoices %}
<option class=browser-default value="{{ invoice }}">{{ invoice }}</option>
{% endfor %}
</select>
<br><br>
<input type="submit" value="Save" />
</form>
{% endblock content %}
</body>
视图.py
def inventory_upload(request):
if request.user.username == 'admin': # Check that user is authorized
if request.method == 'POST': # Render HTML of results page returned to user
...do something and return to user...
else: # Initial html display to user
invoices = Invoice.objects.all()
inventory = get_inventory_from_sheet()
form = BulkInventoryUpload
return render(request=request,
template_name='form.html',
context={'invoices': invoices, 'inventory': inventory, 'form': form})
else: # Bounce user back to homepage if not authorized
return redirect('main:homepage')
表格.py
from django import forms
from django.forms import formset_factory
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User
from .models import Invoice
class BulkInventoryUpload(forms.Form):
invoice = forms.CharField(label='invoice', max_length=150)
def get_invoice(self, commit=True):
invoice = self.cleaned_data['invoice']
return invoice
解决方案
对于遇到相同问题的其他任何人(在上面的评论中感谢 Sean Doherty 的答案):
JQuery 需要在 CSS 之前加载(从我的测试来看,它看起来也像在 JS 之前)
下面的命令让它为我工作:
<head>
{% load static %}
<!-- Compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('select').formSelect();
});
</script>
<!-- Compiled and minified CSS -->
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
推荐阅读
- javascript - JavaScript & PayPal Checkout Button Question
- python - 如何在 Python 中以和谐的方式在日历日期上分配人员?
- c++ - 设计一个 C++ 非侵入式事件系统
- php - 将所有数组值转换为正确数据类型的有效方法
- pymnet - 如何导入 pymnet 库?
- android - 如何进行嵌套布局权重?
- c++ - 我可以引用 C++ 中的指针吗?
- vue.js - Menu Items being stacked Horizontally instead of Vertically when binding Items with v-for in Bootstrap Navbar
- c++ - c++ function pointer assignment is safe?
- dynamics-crm - ParentId in CustomerAddress Entity in Dynamics 365