Ajax в Django. Или почему модальное окно покоится в глубинах разметки

@Александер2000 · Регистрация: 29.06.2013

Студворк — интернет-сервис помощи студентам

Доброго времени суток. Я совершенно не шарю в js, но потребовалось сделать кнопки без перезагрузки, решил немного залезть
наткнулся на статью (не знаю можно ли постить ссылки на сторонние ресурсы) как сделать красивое модальное окно через ajax и добаить в него данные, то что мне впринципе нужно
и столкнулся с такой проблемой, скрипт у меня выглядит рабочим, но не работает, не могу разобраться почему

прикладываю
main

Python
1
2
3
4
5
6
7
8
9
10
<div>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
                <script src="{% static 'js/js.js' %}"></script>
                <script
                        src="https://code.jquery.com/jquery-3.5.1.js"
                        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
                        crossorigin="anonymous"></script>
                {% block javascript %}
                {% endblock %}
            </div>

View

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class MainArticles(ListView):
    template_name = 'dishes/articles.html'
    model = Articles
 
 
class MainArticlesCreate(TemplateView):
 
    def article_create(self, request):
        form = ArticlesForm()
        context = {'form': form}
        html_form = render_to_string('dishes/articles_create.html',
                                     context,
                                     request=request,
                                     )
        return JsonResponse({'html_form': html_form})

Сам скрипт

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function () {
  $(".js-create-articles").click(function () {
    $.ajax({
      url: '/articles/create/',
      type: 'get',
      dataType: 'json',
      beforeSend: function () {
        $("#modal-articles").modal("show");
      },
      success: function (data) {
        $("#modal-articles .modal-content").html(data.html_form);
      }
    });
  });
 
});

Страница со статьей

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
{% extends 'main.html' %}
{% load static %}
 
{% block javascript %}
<script src="{% static 'js/articles.js' %}"></script>
{% endblock %}
 
{% block content %}
<section class="feature">
    <div class="col-md-9">
        <h2 class="section-header">Товары в корзине</h2>
        <div class="table-responsive">
            <p>
                <button type="button" class="btn btn-primary js-create-articles">
                    <span class="glyphicon glyphicon-plus"></span>
                    New article
                </button>
            </p>
            <table class="table">
                <tr class="info">
                    <td class="info col-md-3">Товар</td>
                </tr>
                {% for obj in object_list %}
                <tr>
                    <td class="info col-md-3">{{ obj.name }}</td>
                    <td class="info col-md-3">{{ obj.deception }}</td>
                    <td class="info col-md-3">
                        <button>edit</button>
                    </td>
                </tr>
 
                {% empty %}
                <tr>
                    <td colspan="7" class="text-center bg-warning">No book</td>
                </tr>
                {% endfor %}
            </table>
            <p><a href="{% url 'dishes:index' %}">NAZAAAAAD </a></p>
        </div>
        <!-- THE MODAL WE WILL BE USING -->
        <div class="modal fade" id="modal-articles">
            <div class="modal-dialog">
                <div class="modal-content"></div>
            </div>
        </div>
    </div>
</section>
{% endblock content %}

А это страница с созданием статьи

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% load widget_tweaks %}
 
 
<form method="post">
  {% csrf_token %}
  <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">Create a new articles</h4>
  </div>
  <div class="modal-body">
    {% for field in form %}
      <div class="form-group{% if field.errors %} has-error{% endif %}">
        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        {% render_field field class="form-control" %}
        {% for error in field.errors %}
          <p class="help-block">{{ error }}</p>
        {% endfor %}
      </div>
    {% endfor %}
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary">Create book</button>
  </div>
</form>

ну собственно окно по клику не появляется, проверял работоспосоносбть скрипати вот так

JavaScript
1
2
3
4
<script type="text/javascript">
  if (window.jQuery) alert("jQuery подключен");
  else alert("jQuery не подключен");
</script>

появлялось "подключен, не знаю что не так

Добавлено через 6 минут

Python
1
2
3
class ArticlesForm(forms.ModelForm):
    model = Articles
    fields = {'name', 'tag', 'deception'}

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Articles(models.Model):
    name = models.CharField(max_length=100)
    tag = models.CharField(max_length=20, null=True, blank=True)
    deception = models.TextField(max_length=800)
 
    def __str__(self):
        return self.name
 
    class Meta:
        verbose_name = 'Статьи'
        verbose_name_plural = 'Статьи'
 
    def get_absolute_url(self):
        return reverse('dishes:articles', kwargs={"pk": self.id})

если вдруг понадобиься форма и модель

Добавлено через 1 минуту

Python
1
2
path('articles/', views.MainArticles.as_view(), name='articlesview'),
path('articles/create/', views.MainArticlesCreate.as_view(), name='articlescreateview'),

urls

Добавлено через 7 минут
молю господа бога, чтобы мне ответил человек кто мастерски владеет js и django, и терпим к таким как я

@TomsonAnastasia · 30.07.2020, 15:29

Здравствуйте.
Вы проверяете, проходит ли у Вас запрос на views?
Поставьте alert непосредственно после выполнения запроса, то есть вот здесь.

success: function (data) {
$("#modal-articles .modal-content").html(data.html_form);
}

Добавлено через 58 минут
А еще измените

$("#modal-articles").modal("show");

на

JavaScript
1
$("#modal-articles").show()

Новые блоги и статьи Все статьи Все блоги /
Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .

Опции темы