Python Django CreateView弄乱了引导模式_Python_Django_Twitter Bootstrap 3_Bootstrap Modal

Python Django CreateView弄乱了引导模式

python django twitter-bootstrap-3

Python Django CreateView弄乱了引导模式,python,django,twitter-bootstrap-3,bootstrap-modal,Python,Django,Twitter Bootstrap 3,Bootstrap Modal,这是一个相当奇怪的问题：在我将包含它的模板与CreateView关联之前，我的模式工作得非常好！例如，如果我将BrandCreateView中的template\u name更改为new\u brand\u form1.html，new\u brand\u form2.html将在模式中完美加载。但现在，当我点击触发模式的按钮时 views.py： class BrandCreateView(SuccessMessageMixin ,generic.edit.CreateView):

这是一个相当奇怪的问题：在我将包含它的模板与CreateView关联之前，我的模式工作得非常好！例如，如果我将

BrandCreateView

中的

template\u name

更改为

new\u brand\u form1.html

，

new\u brand\u form2.html

将在模式中完美加载。但现在，当我点击触发模式的按钮时

views.py

：

class BrandCreateView(SuccessMessageMixin ,generic.edit.CreateView):

    template_name = 'new_brand_form2.html'
    model = Brand
    fields = ['name']


    def get_success_url(self):
        current_business = Business.objects.filter(owner=self.request.user).first()

        current_business.brands.add(self.object.pk)
        return reverse_lazy('index', kwargs={'pk': self.object.pk})

    # pre assign-current business to the business field
    def get_initial(self):
        initial = super().get_initial()
        initial['business'] = Business.objects.filter(owner=self.request.user).first()
        self.business_name = initial['business']
        return initial

    def form_valid(self, form):
        form.instance.user = self.request
        form.instance.business = self.business_name
        try:
            return super(BrandCreateView, self).form_valid(form)
        except IntegrityError:
            form.add_error('name' ,'You already have a brand by that name')
            return self.form_invalid(form)

// I believe you can make it better
def add_brand(request):
    if request.method == "POST":
        form = BrandForm(request.POST)

        if form.is_valid():
            form.save(commit=True)
    return reverse_lazy('your-page')

...

from .views import add_brand
url(r'^url/path/$', add_brand, name='createbrand'),

...

new\u brand\u form2.html

：

<div class="modal fade" tabindex="-1" role="dialog" id="createbrand">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
            {{ form.as_p }}
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="createbrand">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <form method="POST" action="{% url 'createbrand' %}" class="form-horizontal" id="brandForm">
      <div class="modal-body">

            {% csrf_token %}
            <input type="text" id="id_your_field_name"  name="your_field_name" placeholder="Enter..."/>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save changes</button> <!-- onclick="addBrand()" -->
      </div>
      </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div> 

{% block javascript %}
// You can use also AJAX request, but you 
// need to change your view and add onclick for this method to button
function addBrand(e){
    var brandForm = $("#brandForm");

    $.ajax({
        type: 'POST',
        url: "{% url 'createbrand' %}",
        data: brandForm.serialize(),
        success: function(res){
            if(res.msg !== "Error") {
               // Do something if error
            } else {
               // Do something if success
            }
    }
})}
{% endblock javascript %}

您正在尝试将

href

attr设置为

HTML按钮标记

不管怎么说，您的按钮在您单击尝试后会表现得像一个

引导模式

，因为您添加了它所需的所有属性。这就是为什么你可能会在你的页面中得到一些

引导模式。但事实上，它无法在您的页面中找到数据目标=“#createbrand”
，因为您的模式位于其他地方：）
试试这些：
modal snippet.html
：
<div class="modal fade" tabindex="-1" role="dialog" id="createbrand">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
            {{ form.as_p }}
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="createbrand">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <form method="POST" action="{% url 'createbrand' %}" class="form-horizontal" id="brandForm">
      <div class="modal-body">

            {% csrf_token %}
            <input type="text" id="id_your_field_name"  name="your_field_name" placeholder="Enter..."/>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save changes</button> <!-- onclick="addBrand()" -->
      </div>
      </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div> 

{% block javascript %}
// You can use also AJAX request, but you 
// need to change your view and add onclick for this method to button
function addBrand(e){
    var brandForm = $("#brandForm");

    $.ajax({
        type: 'POST',
        url: "{% url 'createbrand' %}",
        data: brandForm.serialize(),
        success: function(res){
            if(res.msg !== "Error") {
               // Do something if error
            } else {
               // Do something if success
            }
    }
})}
{% endblock javascript %} 

url.py
：
class BrandCreateView(SuccessMessageMixin ,generic.edit.CreateView):

    template_name = 'new_brand_form2.html'
    model = Brand
    fields = ['name']


    def get_success_url(self):
        current_business = Business.objects.filter(owner=self.request.user).first()

        current_business.brands.add(self.object.pk)
        return reverse_lazy('index', kwargs={'pk': self.object.pk})

    # pre assign-current business to the business field
    def get_initial(self):
        initial = super().get_initial()
        initial['business'] = Business.objects.filter(owner=self.request.user).first()
        self.business_name = initial['business']
        return initial

    def form_valid(self, form):
        form.instance.user = self.request
        form.instance.business = self.business_name
        try:
            return super(BrandCreateView, self).form_valid(form)
        except IntegrityError:
            form.add_error('name' ,'You already have a brand by that name')
            return self.form_invalid(form)

// I believe you can make it better
def add_brand(request):
    if request.method == "POST":
        form = BrandForm(request.POST)

        if form.is_valid():
            form.save(commit=True)
    return reverse_lazy('your-page')

...

from .views import add_brand
url(r'^url/path/$', add_brand, name='createbrand'),

...

在主页面中，您要在其中放置模式添加：
{% include 'app/snippets/modal-snippet.html' %}

谢谢同样的问题。我按原样复制了您的代码，删除了注释。当我访问实际的CreateView
URL（显示错误、成功时重定向、保存模型）时，它工作，但当调用模式时，它根本不显示，得到与以前相同的屏幕。顺便说一句，模式在页面源中“加载”。当我按下按钮时，它的属性会发生变化。我可以100%确认正在调用模态。如果我将数据目标
从#createbrand
更改为#justastring
，那么当我单击按钮时，绝对不会发生任何事情，但是如果它被正确设置为#createbrand
，那么屏幕会变暗，但模式实际上从未显示（即使其属性显示在源代码中）。我现在几乎不知道该怎么办@抱歉，老兄，上次我写得几乎昏昏欲睡：）我已经编辑了答案，你可以检查一下区别。实际上，在我的回答中，我们不使用CreateForm，而是手动添加字段输入，如
。并在您的视图中添加重定向到您的主页。我自己试过了。如果还可以工作，您可以安全地从按钮或锚定中删除href
“添加新的”

，这是不必要的