Django CreateView messes up bootstrap-modal

Question

Rather a curious problem: My modal works perfectly until I associate the template containing it with a CreateView! So for example if I change template_name in BrandCreateView to new_brand_form1.html, new_brand_form2.html will load perfectly in the modal. But as it stands now, when I click the button that triggers the modal, I get this.

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)

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

EDIT:

Might this be the problem? The button that triggers the modal obviously points to the the URL that is associated with the CreateView in the urls.py (named 'createbrand`), maybe it's going in an un-ending cycle...?

Here's the button that triggers the modal

<button class="btn btn-default btn-sm" type="button" data-toggle="modal" href="{% url "createbrand" %}"  data-target="#createbrand">
   <span class="glyphiconglyphicon-plus">Add New</span>
</button>

Answer 1

You're trying to set href attr to HTML button tag?

Anyway, your button after your click tryin to act like a bootstrap-modal since you add all attributes need for it. That's why maybe you get some bootstrap-modal acting in your page. But in fact, it cannot find data-target="#createbrand" in your page, because your modal is somewhere else :)

Try these:

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

views.py:

// 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')

urls.py:

...

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

...

And in your main page where you want to place your modal add:

{% include 'app/snippets/modal-snippet.html' %}