CODEWITHSUNDEEP
javascripthtmldjangoformsmaterialize
slny06
slny06

Reputation: 67

Materialize CSS (with django) dropdown form not working

I'm trying to create a form in which the user choices an instance of model object (Invoice) already saved in the database and submits. I've tried to initialize the JS, but have little experience working with JS in html so I'm not totally sure I'm doing it right.

Right now the below code does not render anything besides the submit button in the form. I have tried adding a random input field (worked) and tried unpacking and rendering the "invoices" context as raw text on the same page (also worked) so I think I've narrowed the issue down to it being the form choices.

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>

form.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>

views.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')

forms.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

Upvotes: 1

Views: 1275

Answers (1)

slny06
slny06

Reputation: 67

For anyone else running into the same issue (credit to Sean Doherty in comments above for the answer):

JQuery needs to be loaded before CSS (and from my testing it looks like before the JS as well)

The below order got it working for me:

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

Upvotes: 2

Related Questions