CODEWITHSUNDEEP
pythondjangodjango-formsdjango-views
nakiya
nakiya

Reputation: 14403

Django form doesn't show available values

I'm quite new to Django...

So, I have a model. Notice the two foreign key fields (DeviceProfile model actually has data, but MISMStateSnapshot does not):

class MISMWorkflow(models.Model):
    createdAt = models.DateTimeField(default=timezone.now)
    currentSnapshot = models.ForeignKey('MISMStateSnapshot', null=True, blank=True, on_delete=models.SET_NULL)
    device = models.ForeignKey(DeviceProfile, null=True, blank=True, on_delete=models.SET_NULL, related_name='workflows')

    def get_absolute_url(self):
        return reverse('{}:workflow_detail'.format(VIEW_NAMESPACE), args=(self.pk,))

And a CreateView:

class WorkflowCreateView(generic.CreateView):
    model = MISMWorkflow
    fields = '__all__'
    template_name = 'mism_web/workflow_create_form.html'

    def form_valid(self, form):
        form.instance.device = DeviceProfile.objects.get(pk=self.kwargs.get('device_id'))
        form.instance.createdAt = timezone.now()
        return super(WorkflowCreateView, self).form_valid(form)

And the template:

{% extends 'mism_web/base.html' %}
{% load material_form %}

{% block content %}
<form action="" method="POST">{% csrf_token %}
    <!--{{ form.as_p }}-->
    {% form form=form %}{% endform %}
    <input type="submit" name="_submit" class="btn" value="Save" />
</form>
{% endblock %}

urls:

url(r'^workflow/workflow_create/$', workflow.WorkflowCreateView.as_view(), name='workflow_create_new'),

This is what I see when I go to create page:

Screenshot

There are couple of things wrong with this:

  1. I don't see the calendar/clock widget for the DateTimeField (createdAt) that I expected to see here.
  2. There's no selection input for either currentSnapshot or device fields (Even though there are devices in the DB)

This is not because I am using the django-material plugin. I tested without it and I still get the same "empty" form.

What's the cause of this and how to fix?

EDIT:

This is what I see in the admin panel for `MISMWorkflow', this is exactly the sort of form I expect to see (ofc, I don't want to create foreign key entities from here, just to list them down):

Admin panel

EDIT: The problem seems to happen only when I extend the base template. If I don't use it, I can see the fields properly. For example, template will be like so:

<html>
<body>
<form action="" method="POST">{% csrf_token %}
    {{ form.as_p }}
    <input type="submit" name="_submit" class="btn" value="Save" />
</form>
<body>
<html>

And I can see the dropdowns now:

enter image description here

Here is my base.html:

{% load static %}
{% load compress %}

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="{% static 'mism_web/css/materialize.min.css' %}" media="screen,projection"/>
        <link type="text/css" rel="stylesheet" href="{% static 'mism_web/css/helper.css' %}" media="screen,projection"/>

        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <!-- TODO: Fix navbar links -->
    <body>
        <div>
            <nav>
                <div class="nav-wrapper">
                    <a href="{% url 'mism_web:index' %}" class="brand-logo">MISM</a>
                    <a href="#" data-activates="mobile" class="button-collapse">
                        <i class="material-icons">menu</i>
                    </a>
                    <ul class="right hide-on-med-and-down">
                        <li>
                            <a href="{% url 'mism_web:index' %}">
                                <i class="material-icons left">home</i>
                                Home
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'mism_web:device_list' %}">
                                <i class="material-icons left">perm_device_information</i>
                                Devices
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'mism_web:workflow_list' %}">
                                <i class="material-icons left">format_indent_increase</i>
                                Workflows
                            </a>
                        </li>
                        <li>
                            {% if user.is_authenticated %}
                            <a href="#">{{ user.get_username }}</a>
                            {% else %}
                            <a href="#">Unknown user</a>
                            {% endif %}
                        </li>
                    </ul>
                    <ul class="side-nav" id="mobile">
                        <li>
                            <a href="{% url 'mism_web:device_list' %}">
                                <i class="material-icons top">home</i>
                                Home
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'mism_web:device_list' %}">
                                <i class="material-icons top">perm_device_information</i>
                                Devices
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'mism_web:workflow_list' %}">
                                <i class="material-icons top">format_indent_increase</i>
                                Workflows
                            </a>
                        </li>
                        <li>
                            {% if user.is_authenticated %}
                            <a href="#">{{ user.get_username }}</a>
                            {% else %}
                            <a href="#">Unknown user</a>
                            {% endif %}
                        </li>
                    </ul>
                </div>
            </nav>
        </div>

        <div class="container">
            {% block content %} {% endblock %}
        </div>
        <script type="text/javascript" src="{% static 'mism_web/js/jquery-3.2.1.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'mism_web/js/materialize.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'mism_web/js/helper.js' %}"></script>
    </body>
</html>

So, it's the base.html interfering with the form display in some way. I have no idea how.

Upvotes: 0

Views: 197

Answers (1)

Ajmal Noushad
Ajmal Noushad

Reputation: 946

From what I understood. It seems you havent initialized the select in materialize.

Try adding a script tag in the html file with the form with the following contents:

 $(document).ready(function() {
   $('select').material_select();
 });

You may need to initialize the datepicker plugin too to display the datepicker calendar.

More about this can be found here: http://materializecss.com/forms.html

Upvotes: 1

Related Questions