AJAX и Django| Как вывести модельное окно и создать объект?

Question

[nurzhannogerbek]

Пытаюсь вывести модальное окно с формой для создания новой записи. Использую bootstrap 4 и ajax. При нажатии на кнопку не появляется модальное окно, но затемняется фон. Как вывести модальное окно и правильно ли построен ajax запрос?!

Ошибка в консоли:


detail.html:

<!-- BUTTON TO TRIGGER THE ACTION -->
<button class="add-group-task" data-toggle="modal" data-target="#add-group-task-modal" data-url="{% url 'project:group_task_add' project_code=project.code %}">{% trans 'Create' %}</button>

<table class="table table-bordered" id="group-tasks-table">
   <!-- TABLE CONTENT-->
</table>

<!--MODAL-->
<div class="modal fade" id="add-group-task-modal" tabindex="-1" role="dialog" aria-labelledby="add-group-task-modal-title" aria-hidden="true">
   <div class="modal-dialog" role="document">
           <div class="modal-content">

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

urls.py:

url(r'^(?P<project_code>[0-9a-f-]+)/add_new_group_task/$', group_task_add, name='group_task_add'),

view.py:

def group_task_add(request, project_code):
    data = dict()
    project = get_object_or_404(Project, pk=project_code)
    if request.method == 'POST':
        form = GroupTaskAddForm(request.POST)
        if form.is_valid():
            group_task = form.save(commit=False)
            group_task.project = project
            group_task.save()
            data['form_is_valid'] = True
            group_tasks = GroupTask.objects.filter(project=project_code)
            data['html_group_tasks'] = render_to_string('project/project_detail.html', {'group_tasks': group_tasks})
        else:
            data['form_is_valid'] = False
    else:
        form = GroupTaskAddForm()
    context = {'form': form}
    data['html_group_task_add_form'] = render_to_string('project/group_task_add.html', context, request=request)
    return JsonResponse(data)

javascript:

$(function () {
            /* Functions */
            var loadForm = function () {
                var btn = $(this);
                $.ajax({
                    url: btn.attr("data-url"),
                    type: 'get',
                    dataType: 'json',
                    beforeSend: function () {
                        $("#add-group-task-modal").modal("show");
                    },
                    success: function (data) {
                        $("#add-group-task-modal .modal-content").html(data.html_form);
                    }
                });
            };

            var saveForm = function () {
                var form = $(this);
                $.ajax({
                    url: form.attr("action"),
                    data: form.serialize(),
                    type: form.attr("method"),
                    dataType: 'json',
                     success: function (data) {
                        if (data.form_is_valid) {
                            $("#group-tasks-table tbody").html(data.html_group_tasks);
                            $("#add-group-task-modal").modal("hide");
                        }
                        else {
                            $("#add-group-task-modal .modal-content").html(data.html_group_task_add_form);
                        }
                    }
                });
                return false;
            };

            // Create book
            $(".add-group-task").click(loadForm);
            $("#add-group-task-modal").on("submit", ".js-group-task-add-form", saveForm);
        });

group_task_add.html:

<form method="post" action="{% url 'project:group_task_add' project_code=project.code %}" class="js-group-task-add-form">
    {% csrf_token %}
    <div class="modal-header">
        <h5 class="modal-title" id="addGroupTaskModalLabel">{% trans 'Create a new group task' %}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div class="form-group">
            <label for="formGroupTaskInput">{% trans 'Name' %}</label>
            {{ form.name }}
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans 'Close' %}</button>
        <button type="submit" class="btn btn-primary">{% trans 'Create' %}</button>
    </div>
</form>

Comments

[Павел Аксенов]

В консольке(на скриншоте) написано, что $.ajax не функция. Если я правильно понял, то в версии jQuery slim нет этой функции, она есть только в обычной jQuery.

[nurzhannogerbek]

Павел Аксенов: Спасибо за информацию. Я поменял на обычную версию jQuery (3.1.1). Cейчас при нажатии на кнопку также не выводится модальное окно, но при этом происходит следующая ошибка. В последней строке Traceback`a можно заметить что значение project_code отсутствует. Можете ли еще раз подсказать во view cейчас использую render_to_string, как правильно добавить kwargs={'project_code': project.code}? Не могу сообразить...

`Traceback (most recent call last):
File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\core\handlers\exception.py", line 39, in inner
response = get_response(request)
File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\core\handlers\base.py", line 187, in _get_response
response = self.process_exception_by_middleware(e, request)
File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\core\handlers\base.py", line 185, in _get_response
response = wrapped_callback(request, *callback_args, **callback_kwargs)
File "C:\Users\Nurzhan\PycharmProjects\RMS\project\views.py", line 121, in group_task_add
data['html_group_task_add_form'] = render_to_string('project/group_task_add.html', context, request=request)
File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\template\loader.py", line 68, in render_to_string
return template.render(context, request)
File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\template\backends\django.py", line 66, in render
return self.template.render(context)
File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\template\base.py", line 208, in render
return self._render(context)
File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\template\base.py", line 199, in _render
return self.nodelist.render(context)
File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\template\base.py", line 994, in render
bit = node.render_annotated(context)
File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\template\base.py", line 961, in render_annotated
return self.render(context)
File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\template\defaulttags.py", line 439, in render
url = reverse(view_name, args=args, kwargs=kwargs, current_app=current_app)
File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\urls\base.py", line 91, in reverse
return force_text(iri_to_uri(resolver._reverse_with_prefix(view, prefix, *args, **kwargs)))
File "C:\Users\Nurzhan\AppData\Local\Programs\Python\Python35-32\lib\site-packages\django\urls\resolvers.py", line 392, in _reverse_with_prefix
(lookup_view_s, args, kwargs, len(patterns), patterns)
django.urls.exceptions.NoReverseMatch: Reverse for 'group_task_add' with arguments '()' and keyword arguments '{'project_code': ''}' not found. 1 pattern(s) tried: ['ru/account/dashboard/projects/(?P[0-9a-f-]+)/add_new_group_task/$']
[27/Mar/2017 00:41:51] "GET /ru/account/dashboard/projects/6ee4fa74-8e91-4365-98be-adb0325ce36c/add_new_group_task/ HTTP/1.1" 500 20661`

[Павел Аксенов]

Мне кажется, что в шаблоне group_task_add.html есть тег {% url %} и в него не передается значение project_code.

[Павел Аксенов]

В шаблон передается только context = {'form': form}

[nurzhannogerbek]

Павел Аксенов: вы правы, я тоже это имел введу. Не передается значение project_code. Добавил `context = {'project': project, 'form': form}` Модельное окно появилось, но при попытки создать новую запись опять ругается. Как вы думаете где еще мое упущение?

Traceback (most recent call last):
*****SOME TEXT******
File "C:\Users\Nurzhan\PycharmProjects\RMS\project\models.py", line 125, in get_absolute_url
return reverse('project:group_task_detail', args=[self.project_code, self.code])
AttributeError: 'GroupTask' object has no attribute 'project_code'

model.py:
class GroupTask(models.Model):
project = models.ForeignKey(Project, on_delete=models.CASCADE)
code = models.UUIDField(_('Code'), primary_key=True, default=uuid.uuid4, editable=False)
name = models.CharField(_('Name'), max_length=250)
tasks = models.ManyToManyField("Task")

def __str__(self):
return self.name

def get_absolute_url(self):
return reverse('project:group_task_detail', args=[self.project_code, self.code])

[Павел Аксенов]

В модели GroupTask нет поля project_code. Тут скорее всего в get_absolute_url в args должен быть [self.code] или [self.project.имя_поля_с_кодом] если оно есть в модели Project.

[Павел Аксенов]

Наверное args=[self.project_pk]

[Павел Аксенов]

Еще раз))) вот моё последнее предположение. Оно должно быть верным args=[self.project_pk, self.code] или args=[self.project_id, self.code]

[nurzhannogerbek]

Павел Аксенов: Спасибо большое за вашу помощь! Могли бы вы все ваши ответы отдельно опубликовать в виде ответа, чтобы я смог отметить их как правильный ответ.

[nurzhannogerbek]

Павел Аксенов: Могу ли я спросить у вас еще одну вещь? Есть такая ссылка href="{{ group_task.get_absolute_url }}", которая открывает новую страницу, где подробная информация об объекте. При открытии страницы пишет Page not found (404) и Raised by: project.views.group_requirement_detail. Меня смущает последнее. Указана другая функция в view, а не group_task_detail которую указал в get_absolute_url. Как можно объяснить такое поведение странное?

[Павел Аксенов]

А можно посмотреть строчку из urls.py, которая ссылается на project.views.group_requirement_detail ?

[nurzhannogerbek]

Павел Аксенов: Вот url который ссылается на project.views.group_requirement_detail:

url(r'^(?P[0-9a-f-]+)/(?P[0-9a-f-]+)/$',
group_requirement_detail,
name='group_requirement_detail'),

А вот url который должен был использоваться:

url(r'^(?P[0-9a-f-]+)/(?P[0-9a-f-]+)/$',
group_task_detail,
name='group_task_detail'),

[Павел Аксенов]

С урлами такое дело, это все регулярные выражения.
для group_requirement_detail - r'^(?P[0-9a-f-]+)/(?P[0-9a-f-]+)/$'
для group_task_detail - r'^(?P[0-9a-f-]+)/(?P[0-9a-f-]+)/$'
они получаются одинаковые, в результате выполнится первый встретившийся, которым является group_requirement_detail, так как он находится выше.

[nurzhannogerbek]

Павел Аксенов: на сразу заметил, что тут стерлись значения. Почему то тостер не пропускает значение между символами < и >. URLы выглядят так (вместо - там стоят знаки > и <):

group_task_detail: r'^(?P-project_code-[0-9a-f-]+)/(?P-group_task_code-[0-9a-f-]+)/$'

group_requirement_detail: r'^(?P-project_code-[0-9a-f-]+)/(?P-group_requirement_code-[0-9a-f-]+)/$'

Поставил url group_task_detail выше. Страница
group_task_detail открылась. А будет ли допустим при открытии group_requirement_detail открываться в таком случаи group_task_detail ? Раз она стоит выше и встречается первой.

[Павел Аксенов]

NogerbekNurzhan: Значения между символами > и < влияют только на передаваемые значения во вьюхи.
В данном случае для регулярного выражения они не несут смысловой нагрузки.
А так как сами регулярные выражения идентичны, то выполняться будет всегда верхний.
Соответственно если сейчас выше group_task_detail, то будет выполняться только он.