时间戳

首页 > 解决方案 > modal 不加载表单数据

javascript - modal 不加载表单数据

问题描述

我有数据表单和数据更新视图，当我不使用模态时，它工作得很好，但是当使用模态时，它会加载空表单，如果我在没有模态的情况下加载，则会出现保存在数据库中的数据. 我不知道我要去哪里错了。我可以更改用户名并保存，问题是假设user1我想更改为user2名称，当我单击更改名称时，表单字段没有填写user1。如果我没有使用模态，它带有已经填写的user1

视图.py

class UserNameUpdate(LoginRequiredMixin, UpdateView):
    model= User 
    fields = ['username']
    template_name=' /change-username.html'

    def get_object(self, queryset=None):
        if queryset is None:
            queryset = self.get_queryset()   # This should help to get current user 

        # Next, try looking up by primary key of Usario model.
        queryset = queryset.filter(pk=self.request.user.usuario.pk)


        try:
            # Get the single item from the filtered queryset
            obj = queryset.get()
        except queryset.model.DoesNotExist:
            raise Http404("No user matching this query")
        return obj


    def get_success_url(self):
        return reverse('sistema_perfil')

更改用户名.html

{% load static %}
{% load bootstrap %}
{% load widget_tweaks %}
{% load crispy_forms_tags %}
{% block main %}
<div class="container">
<div class="card text-white bg-primary mb-3">
        <div class="card-header"><small class="text">
          <a href="{% url 'sistema_index' %}" class="text-white ">Home /</a>  
          <a href="{% url 'sistema_perfil' %}" class="text-white ">Perfil /</a>  
          <a  class="text-white">Usúario</a>
            </small></a></p> Alterar Nome do Usúario</div>
  <div class="card bg-light text-center ">
  <div class="card-body text-secondary text-center">



<form method="post" action="{% url 'sistema_change_username' %}" class="form-signin" enctype="multipart/form-data" id="form" name="form" validate>
{% csrf_token %}

<div class="form-row "> 


    <div class="form-group col-md-6 text-center">
        {{ form.username| as_crispy_field}}
      </div>
</div>

<input type="submit" class="btn btn-primary " >

</form>


<a class="btn btn-light float-left" href="sistema_perfil" role="button">Voltar</a>


</div>
</div>
</div>
</div>
{% endblock %}

menu_perfil.html

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            Launch demo modal
        </button>

                    <!-- Modal -->
                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            </div>
                            <div class="modal-body">

    {% include 'profile/change-username.html' %}
                            </div>
                            <div class="modal-footer">

                            </div>
                        </div>
                        </div>
                    </div>

标签： javascriptajaxdjangobootstrap-modalajaxform

解决方案

从两个不同的视图加载带模态和不带模态的模板是否正确？如果是这样，问题是您如何使用 Django 的{% include %}模板标签。以下是文档：

https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#include

关键线：“包含的模板在包含它的模板的上下文中呈现。”

它看起来像是menu_perfil.html从不同的视图呈现的，它不会将表单对象传递到其上下文中。所以menu_perfil.html不知道是什么{{ form }}。而使用表单对象change-username.html与您的视图一起呈现。UsernameUpdate尝试将您的模态 HTML 移动到 change-username.html 中，围绕您的表单代码，而不是包含单独的代码段，看看是否能解决问题。

一般来说，使用从基本模板继承比使用{% extends %}更可取，includes除非你真的必须这样做，因为这样的限制。

推荐阅读