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()

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .