Моя форма Django не отображается при использовании модального Bootstrap - PullRequest
Новая
       40

Моя форма Django не отображается при использовании модального Bootstrap

1 голос
/ 25 марта 2019

У меня проблемы с рендерингом формы Django в модальном режиме. Я подозреваю, что это потому, что мне нужен Ajax, чтобы получить URL в браузере, но я не знаю как.

Форма: 

class TrackedWebsitesForm(forms.ModelForm):
    class Meta:
        model = TrackedWebsites
        fields = "__all__"

Вид: 

def web(request):
    if request.method == 'POST':
        form = TrackedWebsitesForm(request.POST)
        if form.is_valid():
            try:
                form.save()
                return redirect('/websites')
            except:
                pass
    else:
        form = TrackedWebsitesForm()
    return render(request,'dashboard/create_website.html',{'form':form})

Urls: 

urlpatterns = [
    path('web', views.web),

create_website.html: 

<div id="addEmployeeModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">

<form method="POST" class="post-form" action="/web">
  {% csrf_token %}
  <div class="modal-header">
    <h4 class="modal-title">Add website</h4>
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  </div>
  <div class="modal-body">
    <div class="form-group">
     {{ form.as_p }}
  </div>
  <div class="modal-footer">
    <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
    <input type="submit" class="btn btn-success" value="Add">
  </div>
</form>

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

Некоторые фото

Неработающая модальная форма: Imgur

Формы работают при доступе напрямую по ссылке: Imgur

Может кто-нибудь мне помочь? Я визуализирую поля формы вручную, но я просто обрезал его с помощью form.as_p, иначе вопрос не подтвердился бы, потому что было слишком много кода.

1 Ответ

4 голосов
/ 25 марта 2019

Я думаю, что если вы можете открыть модальное окно и не визуализируете формуляр, это потому, что вы не загружаете его, попробуйте сделать это:

Добавьте это в views.py 

def add_employee(request):
    form = TrackedWebsitesForm()
    return render(request, 'your_template', {'form':form})

Добавьте это в свой urls.py 

path('employee/add', views.add_employee, name='add_employee'),

в html

Поместите это на страницу, с которой вы планируете открыть свой модал, и оберните свою кнопку вdiv 

 <div id="addEmployee">
    <a style="float:right" class="btn btn-success" >
        <i class="fas fa-fw fa-plus"></i> 
        <span>Add New Employee</span>
    </a>
</div>

<div id="addEmployeeModal" class="modal fade" role="dialog">
</div>

Создайте другой HTML-код для модального лица и добавьте идентификатор в свою форму 

<div class="modal-dialog">
    <div class="modal-content">
        <form id="addEmployeeForm" method="POST" class="post-form" action="/web">
            {% csrf_token %}
                <div class="modal-header">
                    <h4 class="modal-title">Add website</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                <div class="form-group">
                    {{ form.as_p }}
               </div>
               <div class="modal-footer">
                   <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                   <input type="submit" class="btn btn-success" value="Add">
               </div>
        </form>
    </div>
</div>

в своем js 

$(document).ready(function () {

    let my_modal = $("#addEmployeeModal");
    const url_form = "/employee/add";

    $("#addEmployee a").click(function () {
      my_modal.load(url_form, function () {
          my_modal.modal("show"); // Open Modal
          $("#addEmployeeForm").submit(function (e) {
              e.preventDefault(); // Cancel the default action
              $.ajax({
                  method: "POST",
                  data: $(this).serialize(),
                  dataType: "json",
                  url: "/url that handles the request/",
                  success: function (response) {
                      my_modal.modal('hide');
                  },
                  error: function (response) {

                  },});      
              });
          });
      });
  });

Этот ответ вас возьметна следующий вопрос как ответить после отправки данных из модала.Следовательно, вы должны сделать следующее в представлении, которое обрабатывает запрос.

Сначала импортируйте следующее в views.py 

from django.http import JsonResponse

А в представлении, которое обрабатывает запрос, скопируйте это 

if form.is_valid ():
    ...
    response = JsonResponse ({"message": 'success'})
    response.status_code = 201 // indicates that the request has been processed correctly
    return response
else:
    ...
    response = JsonResponse ({"errors": form.errors.as_json ()})
    response.status_code = 403 // indicates that there was an error processing the request
    return response
...