Django & Bootstrap: обновление формы с использованием Django Bootstrap модалов - PullRequest
Новая
       3

Django & Bootstrap: обновление формы с использованием Django Bootstrap модалов

0 голосов
/ 05 января 2020

Мой текущий путь: 

ticket-strap/
     ticketstrap/
           templates/
                 home.html
                 index.html
     tickets/
          __pycache__
          migrations
          templates/
               tickets/
                    tickets_dashboard.html (ticket_dashboard file in question)
               __init__.py
               admin.py
               apps.py
               forms.py (forms file in question)
               models.py (models file in question)
               tests.py
               urls.py (urls file in question)
               views.py (views file in question)
     ticketstrap/
          __pycache__
          __init__.py
          asgi.py
          settings.py
          urls.py (urls file in question)
          views.py
          wsgi.py

Я работаю над программой системы управления билетами, которая включает в себя Bootstrap 4 и Bootstrap 4 Модальности. Сейчас я пытаюсь редактировать данные в базе данных Django с помощью модальной формы.

У меня есть страница, которая отображает информацию о заявке, такую ​​как имя, тема, приоритет и т. Д. c. Внизу страницы находится кнопка «Изменить». Как только эта кнопка нажата, она активируется и показывает Bootstrap модальную форму, которая позволяет пользователю вводить новую информацию. Нет обязательных полей - если пользователь хочет отредактировать только тему заявки, которую он может, это должно обновить только поле темы заявки в базе данных Django. Если они отправляют форму, ничего не вводя, она не должна вносить никаких изменений. После отправки пользователь должен быть перенаправлен обратно на ту же страницу с информацией о билете с обновленной информацией.

Я искал больше информации по этому конкретному вопросу, но похоже, что в моей ситуации отличается то, что вместо создания совершенно новой HTML страницы для редактирования формы, я делаю это через * Форма 1036 * - то есть, когда я go и нажимаю Изменить на странице описания моего билета, он не переходит на новый URL-адрес - он остается в пределах того же пути URL-адреса и в конце должен перенаправить на тот же путь URL-адреса. Вот почему я в итоге поместил логи c для сохранения формы в ticket_details в tickets.views и не создал новую функцию для редактирования форм (ticket_details просто получает объекты данных билетов из базы данных Django) .

Я столкнулся с использованием Django форм, но не могу заставить его работать должным образом. Код выполняется без ошибок, но после отправки модального сообщения я перенаправлен обратно на ту же страницу с описанием билетов, но никаких изменений не происходит ни во внешнем интерфейсе, ни во внутреннем интерфейсе. Что мне здесь не хватает? Является ли использование Django Forms правильным подходом или есть другой метод, который я должен рассмотреть? Если вам понадобится дополнительный код или скриншоты, я буду рад обновить пост по мере необходимости. Код следующий:

ticketstrap.urls 

from django.contrib import admin
from django.conf.urls import url
from django.conf.urls import include
from django.urls import path
from . import views

app_name = 'ticketstrap'

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.home, name="homepage"),
    path('home/', views.home, name="home"),
    path('tickets/', include('tickets.urls')),
    path('accounts/', include('accounts.urls'))
    # url(r'^$', views.home, name="homepage"),
    # url(r'^home/', views.home, name="home"),
    # url(r'^tickets/', include('tickets.urls')),
    # url(r'^accounts/', include('accounts.urls'))
]

tickets.urls 

from django.conf.urls import url
from django.urls import path
from . import views

app_name = 'tickets'

urlpatterns = [
    path('', views.tickets, name="tickets"),
    path('new_ticket_submission/', views.new_ticket_submission, name="new_ticket_submission"),
    path('<int:ticket_id>/', views.ticket_details, name="ticket_details"),
    # path('<int:ticket_id>/edit', views.edit_ticket, name="edit_ticket")
    # url(r'^$', views.tickets, name="tickets"),
    # url(r'^new_ticket_submission/$', views.new_ticket_submission, name="new_ticket_submission")
]

tickets.models 

from django.db import models

class Ticket(models.Model):
    customer_name = models.CharField(max_length=50)
    customer_email = models.CharField(max_length=100)
    ticket_subject = models.CharField(max_length=200)
    ticket_type = models.CharField(max_length=20)
    ticket_status = models.CharField(max_length=30)
    ticket_priority = models.CharField(max_length=30)
    ticket_description = models.TextField()
    ticket_tags = models.CharField(max_length=50)
    # slug = models.SlugField()
    # submit_date = models.DateTimeField(auto_now_add=True)
    # submit_date = models.DateTimeField('Date Submitted')

    def __str__(self):
        return "status: {} | Subject: {} | Name: {}".format(self.ticket_status, self.ticket_subject, self.customer_name)

tickets.views 

from django.shortcuts import render, redirect, get_object_or_404
from django.http import HttpResponse
from django.contrib.auth.forms import UserCreationForm, AuthenticationForm
from django.contrib.auth import login, logout
from django.contrib.auth.decorators import login_required

from .models import Ticket
from .forms import MyForm

# decorator: extends the fucntion to add additional functionality
@login_required(login_url="/accounts/login")
def tickets(request):
    ticket_name = Ticket.objects.all()
    return render(request, "tickets/tickets_dashboard.html", {'ticket_name': ticket_name})

@login_required(login_url="/accounts/login")
def new_ticket_submission(request):
    print("New ticket has been submitted!")
    customer_name = request.POST["newTicketName"]
    customer_email = request.POST["newTicketEmail"]
    ticket_subject = request.POST["newTicketSubject"]
    ticket_type = request.POST["newTicketType"]
    ticket_status = request.POST["newTicketStatus"]
    ticket_priority = request.POST["newTicketPriority"]
    ticket_description = request.POST["newTicketDescription"]
    ticket_tags = request.POST["newTicketTags"]

    # variable for new ticket table
    ticket_info_vars = Ticket(
        customer_name = customer_name,
        customer_email = customer_email,
        ticket_subject = ticket_subject,
        ticket_type = ticket_type,
        ticket_status = ticket_status,
        ticket_priority = ticket_priority,
        ticket_description = ticket_description,
        ticket_tags = ticket_tags
    )
    ticket_info_vars.save()
    return redirect('/tickets/')

@login_required(login_url="/accounts/login")
def ticket_details(request, ticket_id):
    if request.method == 'POST':
        instance = get_object_or_404(Ticket, id=ticket_id)
        form = MyForm(request.POST or None, instance=instance)
        if form.is_valid():
            form.save()
            return redirect('ticket/ticket_details.html')
        else:
            form = MyForm(instance=instance)

    ticket_info = Ticket.objects.filter(id=ticket_id)
    return render(request, 'tickets/ticket_details.html', {'ticket_info': ticket_info})

ticket_details. html

{% extends "index.html" %}

{% block content %}
<div class="row">
  <div class="col-sm-8">
    {% for ticket in ticket_info %}
    <div class="card ticketInfo mt-2 ml-2">
      <h5 class="card-header">{{ticket.ticket_subject}}</h5>
      <div class="card-body">
        <p class="card-text">
          <strong>Description:</strong><br />
          {{ticket.ticket_description}}
        </p>
        <br />
        <p class="card-text">
          <strong>Submitted By:</strong><br />
          {{ticket.customer_name}}
        </p>
        <br />
        <p class="card-text">
      <strong>Contact Info:</strong><br />
      {{ticket.customer_email}}
      </p>
      <br />
      <div id="form-group">
        <label for="comment"><strong>Comment</strong></label>
        <textarea class="form-control" id="comment" rows="5" placeholder="Write your comment here."></textarea>
      </div>
      <br />
      <!-- <button type="submit" class="btn btn-primary">Update</button> -->
      <button data-toggle="modal" data-target="#editTicketDetails" type="submit" class="btn btn-secondary">Edit</button>
      <button type="submit" class="btn btn-outline-danger float-right">Delete</button>
    </div>
  </div>
  </div>

  <div class="col">
    <div class="card ticketInfo mt-2 mr-2">
      <div class="card-body">
      <p class="card-text text-capitalize">
        <strong>Type:</strong>
        <br />
        {{ticket.ticket_type}}
        <select name="newTicketStatus" class="form-control" name="newTicketStatus" aria-describedby="new-ticket-priority">
          <option value="question">Question</option>
          <option value="incident">Incident</option>
          <option value="problem">Problem</option>
          <option value="featureRequest">Feature Request</option>
          <option value="refund">Refund</option>
        </select>
      </p>
      <br />
      <p class="card-text text-capitalize" >
        <strong>Status:</strong>
        <br />
        {{ticket.ticket_status}}
        <select name="newTicketStatus" class="form-control" name="newTicketStatus" aria-describedby="new-ticket-priority">
          <option value="open">Open</option>
          <option value="inProgress">In Progress</option>
          <option value="pending">Pending</option>
          <option value="resolved">Resolved</option>
          <option value="closed">Closed</option>
          <option value="waitingOnCustomer">Waiting on Customer</option>
          <option value="waitingOnThirdParty">Waiting On Third Party</option>
        </select>
      </p>
      <br />
      <p class="card-text text-capitalize">
        <strong>Priority:</strong><br />
        {{ticket.ticket_priority}}
        <select name="newTicketPriority" class="form-control" name="newTicketPriority" aria-describedby="new-ticket-priority">
          <option value="low">Low</option>
          <option value="medium">Medium</option>
          <option value="high">High</option>
          <option value="urgent">Urgent</option>
        </select>
      </p>
      </div>
    </div>
  </div>
</div> <!--row collapse-->


{% endfor %}

<!-- 
***BOOTSTRAP MODAL IN QUESITON***
-->

<!-- Edit Ticket Modal-->
<form class="newTicketForm" method="post" action=".">
  {% csrf_token %}
  <div class="modal fade" id="editTicketDetails" tabindex="-1" role="dialog" aria-labelledby="newTicketModal" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title" id="exampleModalLabel">Edit Ticket</h3>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <!-- New Ticket Modal Body -->
        <div class="modal-body">

          <!-- New Ticket Name -->
          <div class="row form-group">
            <div class="col">
              <label for="newTicketName">
                Name
              </label>
              <input type="text" name="newTicketName" class="form-control">
            </div>

          <!-- New Ticket Email -->
            <div class="col">
              <label for="newTicketEmail">
                Email
              </label>
              <input type="text" name="newTicketEmail" class="form-control">
            </div>
          </div> <!-- Collapse Row for Name and Email -->

          <!-- New Ticket Subject -->
          <div class="form-group">
            <label for="newTicketSubject">
              Subject
            </label>
            <input type="text"class="form-control" name="newTicketSubject" aria-describedby="new-ticket-subject">
          </div>

          <!-- New Ticket Type -->
          <div class="form-group">
            <label for="newTicketType">Type</label>
            <select name="newTicketType" class="form-control" name="newTicketType" aria-describedby="new-ticket-type">
              <option value="" selected disabled>Choose a Ticket Type</option>
              <option value="question">Question</option>
              <option value="incident">Incident</option>
              <option value="problem">Problem</option>
              <option value="featureRequest">Feature Request</option>
              <option value="refund">Refund</option>
            </select>
          </div>

          <!-- New Ticket Status -->
          <div class="form-group">
            <label for="newTicketStatus">Status</label>
            <select name="newTicketStatus" class="form-control" name="newTicketStatus" aria-describedby="new-ticket-priority">
              <option value="" selected disabled>Choose a Ticket Status</option>
              <option value="open">Open</option>
              <option value="inProgress">In Progress</option>
              <option value="pending">Pending</option>
              <option value="resolved">Resolved</option>
              <option value="closed">Closed</option>
              <option value="waitingOnCustomer">Waiting on Customer</option>
              <option value="waitingOnThirdParty">Waiting On Third Party</option>
            </select>
          </div>

          <!-- New Ticket Priority -->
          <div class="form-group">
            <label for="newTicketPriority">Priority</label>
            <select name="newTicketPriority" class="form-control" name="newTicketPriority" aria-describedby="new-ticket-priority">
              <option value="" selected disabled>Choose a Ticket Priority</option>
              <option value="low">Low</option>
              <option value="medium">Medium</option>
              <option value="high">High</option>
              <option value="urgent">Urgent</option>
            </select>
          </div>

          <!-- New Ticket Text Area -->
          <div class="form-group">
            <label for="newTicketDescription">Description</label>
            <textarea name="newTicketDescription" class="form-control" rows="6"></textarea>
          </div>

          <!-- New Ticket Tags -->
          <div class="form-group">
            <label for="newTicketTags">Tags</label>
            <input type="text" class="form-control" name="newTicketTags" aria-describedby="newTicketTags">
          </div>
        </div> <!-- Collapse Modal Body -->

        <!-- Footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Update</button>
        </div>
      </div>
    </div>
  </div>
</form> <!-- Collapse New Ticket Modal Form -->

{% endblock %}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...