Добавление данных в базу и обновление таблицы на странице

@InfServ · Регистрация: 27.08.2018

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

Здравствуйте!
Пишу сайт (я новичок), использую Python + Django + HTML + CSS + Bootstrap + JS + JQuery.
Задача: хочу вызвать модальное окно по кнопке "Добавить", где нужно заполнить поля, нажать кнопку "Сохранить", данные нужно передать в БД и обновить таблицу на странице.
Подскажите, пожалуйста, как это можно реализовать?

@nocl1p · 27.02.2019, 13:49

data: form.serialize() + "&name=name&model=model&date=date&ip=ip& shop={{shop.id}}"
Что это?
Импользуйте просто data: form.serialize()

Добавлено через 1 минуту
Покажите код формы которая отправляет POST запрос

Добавлено через 1 минуту
Повторюсь еще раз. Нужно обрабатывать событие onsubmit формы.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$("#add-form").on('submit', function(event) {
    event.preventDefault();
    var form = this;
    $.ajax({
        url: "{% url 'render_table' %}",
        method: "POST",
        data: $form.serialize(), // Так же можно попробовать  data: new FormData(form)
        success: function(result) {
            console.log(result.devices)
         }
    });
}

@InfServ · 28.02.2019, 11:34 **[ТС]**

Он мне в консоли выдает ошибку:
Forbidden (CSRF token missing or incorrect.): /ajax/render-table/

Насчет этого:

data: form.serialize() + "&name=name&model=model&date=date&ip=ip& shop={{shop.id}}"

Это я писала, потому что предполагала, что проблема в этом (на форумах так рекомендовали другим). Но если я оставлю только "form.serialize()" ошибка останется.
Теперь я думаю, что здесь надо какую-то защиту дописать

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
def addDevice(request):
    if request.method == "POST":
        shop = request.POST.get("shop")
        device = Device.objects.create(
            name = request.POST.get("name"),
            model_d = request.POST.get("model_d"),
            data_set = request.POST.get("data_set"),
            ip = request.POST.get("ip"),
            shop_id = Shop.objects.get(id = shop)
        )
        devices = Device.objects.all();
        return JsonResponse({"devices": devices})
    return render(request, 'about_shop.html')

Добавлено через 1 час 4 минуты
Нет, все-таки проблема в JS. До views.py он еще не доходит. Да даже не доходит до:

JavaScript
1
2
3
success: function(result) {
            console.log(result.devices) //alert("123");
         }

Добавлено через 27 минут
Я все поняла. Ошибка была в этом:

JavaScript
1
var form = this;

Поменяла на:

JavaScript
1
var form = $('#add_device');

Код формы, которая отправляет POST запрос:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="dialog">
  <form method="post"   onsubmit="return false" id="add_device">
    {% csrf_token %}
      <table>
        {{ adform.as_table }}
      </table>
    <br>
    <input type="submit" id="add_d" value="Сохранить">
    <input type="button" id="close" value="Закрыть">
  </form>
</div>

Теперь ошибка в другом. Как мне передать в функцию id_shop? Страница уже открыта ('/aboutshop/1'). Когда обрабатывается запрос:

JavaScript
1
url: "{% url 'render_table' %}",

URL меняется ('/aboutshop/1/ajax/render_table' насколько я понимаю) и id_shop просто так не получить. Как же получить id_shop?

Добавлено через 2 часа 39 минут
Вы писали все правильно:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$("#add-form").on('submit', function(event) {
    event.preventDefault();
    var form = this;
    $.ajax({
        url: "{% url 'render_table' %}",
        method: "POST",
        data: $form.serialize(), // Так же можно попробовать  data: new FormData(form)
        success: function(result) {
            console.log(result.devices)
         }
    });
}

Благодарю!!!
Просто такая путаница получилась. Но благо, я все поняла, переделала. Другая проблема появилась: как получить id_shop (shop_id).

@nocl1p · 28.02.2019, 15:59

Я рад, что у вас получается

По поводу shop_id, вам его где надо получить?

Добавлено через 1 час 21 минуту
Чтобы получить в шаблоне нужно чтобы вьюха отдавала контекст:

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
def addDevice(request):
    if request.method == "POST":
        shop = request.POST.get("shop")
        device = Device.objects.create(
            name = request.POST.get("name"),
            model_d = request.POST.get("model_d"),
            data_set = request.POST.get("data_set"),
            ip = request.POST.get("ip"),
            shop_id = Shop.objects.get(id = shop)
        )
        devices = Device.objects.all();
        return JsonResponse({"devices": devices})
    return render(request, 'about_shop.html', {'shop': shop})

@InfServ · 01.03.2019, 06:30 **[ТС]**

Спасибо вам

Мне надо получить shop_id, когда сохраняю инфу с модального окна. Потому что вся информация (name, model, date_set, ip) относится к магазину.
Как будто надо здесь как-то обыграть:

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
def addDevice(request, pk): #может здесь pk получить?
    if request.method == "POST":
        shop = request.POST.get("shop")
        device = Device.objects.create(
            name = request.POST.get("name"),
            model_d = request.POST.get("model_d"),
            data_set = request.POST.get("data_set"),
            ip = request.POST.get("ip"),
            shop_id = Shop.objects.get(id = shop)
        )
        devices = Device.objects.all();
        return JsonResponse({"devices": devices})
    return render(request, 'about_shop.html')

Раньше получала shop_id через:

Python
1
url(r'^aboutshop/(?P<pk>\d+)$', views.aboutshop)

А теперь получается, что мой урл будет '/aboutshop/1/ajax/render_table'
Вот и вопрос: как же получить shop_id?

@nocl1p · 01.03.2019, 10:55

Я наверно немного не понимаю, у вас же shop_id отправляется постом во вьюху

Python
1
2
if request.method == "POST":
    shop = request.POST.get("shop")

@InfServ · 01.03.2019, 12:08 **[ТС]**

nocl1p, Извините, наверно, плохо объяснила.
Это неправильно. Должно быть как-то так:

Python
1
2
3
4
5
6
7
8
9
10
11
12
def addDevice(request, pk): #может здесь pk получить?
    if request.method == "POST":
        device = Device.objects.create(
            name = request.POST.get("name"),
            model_d = request.POST.get("model_d"),
            data_set = request.POST.get("data_set"),
            ip = request.POST.get("ip"),
            shop_id = pk
        )
        devices = Device.objects.all();
        return JsonResponse({"devices": devices})
    return render(request, 'about_shop.html')

Т.е. эта функция должна сохранять новое оборудование с известным shop_id из "/aboutshop/1/" (pk=1). Просто когда я заполню информацию в модальном окне и нажму сохранить, ссылка у меня станет "/aboutshop/1/ajax/render_table". А мне эту "1" (или любую другую цифру) надо передать в "def addDevice".

@nocl1p · 01.03.2019, 12:24

Вы же можете внутри шаблона узнать какой shop_id вам нужен:

Python
1
url(r'^ajax/render-table/(?P<shop_id>\d+)$', views.addDevice, name='render_table'),

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$("#add-form").on('submit', function(event) {
    event.preventDefault();
    var form = this;
    $.ajax({
        url: "{% url 'render_table' <your_shop_id> %}", // Например url: "{% url 'render_table' 5 %}"
        method: "POST",
        data: $form.serialize(), // Так же можно попробовать  data: new FormData(form)
        success: function(result) {
            console.log(result.devices)
         }
    });
}

Python
1
2
3
4
5
6
7
8
9
10
11
12
def addDevice(request, shop_id): # Вот сюда будет передан shop_id из ajax
    if request.method == "POST":
        device = Device.objects.create(
            name = request.POST.get("name"),
            model_d = request.POST.get("model_d"),
            data_set = request.POST.get("data_set"),
            ip = request.POST.get("ip"),
            shop_id = shop_id
        )
        devices = Device.objects.all();
        return JsonResponse({"devices": devices})
    return render(request, 'about_shop.html')

Пока что я это так понимаю. Потому как не вижу всей логики проекта.

@InfServ · 01.03.2019, 12:49 **[ТС]**

Вооот... я также делала (на форумах почитала):

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
$("#add_device").on('submit', function(event) {
      alert("test");
      event.preventDefault();
      var form = $(this);
      $.ajax({
        url: "{% url 'render_table' {{shop.id}} %}",
        method: "POST",
        data: form.serialize(),
        success: function (result) {
          console.log(result.devices)
        }
      });
    });

Только он мне ошибку выдает:

Could not parse the remainder: '{{shop.id}}' from '{{shop.id}}'

@nocl1p · 01.03.2019, 12:51

JavaScript
1
url: "{% url 'render_table' shop.id %}"

@InfServ · 01.03.2019, 13:05 **[ТС]**

УРА! Спасибо, спасибо!!!

Он не ругается, но теперь выдает другую ошибку, хотя все поля заполнены:

IntegrityError: NOT NULL constraint failed: firstapp_device.model

И требует, чтобы я дату указывала, хотя в БД может быть NULL.

@nocl1p · 01.03.2019, 13:16

Что вот это такое firstapp_device.model?
Я ж не могу читать удаленно

Добавлено через 3 минуты
Хотя, смотрите, вы добавляете объект данной модели:

Python
1
2
3
4
5
6
class Device(models.Model):
    name = models.CharField(max_length=100)
    model = models.CharField(max_length=100)
    data_set = models.DateField()
    ip = models.CharField(max_length=15)
    shop = models.ForeignKey(Shop, on_delete = models.CASCADE)

И посмотрите что вы творите вот тут:

Python
1
2
3
4
5
6
7
device = Device.objects.create(
            name = request.POST.get("name"),
            model_d = request.POST.get("model_d"),
            data_set = request.POST.get("data_set"),
            ip = request.POST.get("ip"),
            shop_id = shop_id
        )

Ничего вас не смущает?

Добавлено через 3 минуты
Поле model не заполняется и оно не помечено как null = True поэтому и ошибка (оно не может быть пустым). Наверно вот так вот надо:

Python
1
model = request.POST.get("model_d"),

@InfServ · 01.03.2019, 13:26 **[ТС]**

Мда... Увидела, изменила) Другая ошибка:

TypeError: <QuerySet [<Device: Device object (1)>]> is not JSON serializable

А насчет firstapp_device.model это:

@nocl1p · 01.03.2019, 13:48

Вот так попробуйте во вьюхе написать:

Python
1
2
devices = Device.objects.values('name', 'model', 'data_set', 'ip', 'shop_id');
devices = list(devices)

Если не поможет то вот так:

Python
1
2
devices = Device.objects.all()
devices = [{'name': item.name, 'model': item.model, 'data_set': item.data_set, 'ip': item.ip, 'shop_id': item.shop_id} for item in devices]

Добавлено через 15 минут
Или же:

Python
1
2
3
from django.core.serializers import serialize
 
devices = serialize('json', Device.objects.all())

@InfServ · 01.03.2019, 14:05 **[ТС]**

Я сразу решила применить это:

Python
1
2
3
from django.core.serializers import serialize
 
devices = serialize('json', Device.objects.all())

Заработало!!!

Только наплодило мне...
P.S.: хотя сейчас проверила, сама виновата

Только проблема осталась с датой, если я ее не введу, то ошибку выдаст. Сделала по вашему замечанию:

Python
1
2
3
4
5
6
class Device(models.Model):
    name = models.CharField(max_length=100)
    model = models.CharField(max_length=100)
    date_set = models.DateField(blank=False, null=True)
    ip = models.CharField(max_length=15, blank=False, null=True)
    shop = models.ForeignKey(Shop, on_delete = models.CASCADE)

@nocl1p · 01.03.2019, 14:07

Работает - это уже успех

@InfServ · 01.03.2019, 14:20 **[ТС]**

Спасибо!!!

Новые блоги и статьи Все статьи Все блоги /
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .

@InfServ 0 / 0 / 0 Регистрация: 27.08.2018 Сообщений: 19

	Добавление данных в базу и обновление таблицы на странице 22.02.2019, 10:25. Показов 22693. Ответов 35 Метки ajax, go, модальное окно (Все метки) Здравствуйте! Пишу сайт (я новичок), использую Python + Django + HTML + CSS + Bootstrap + JS + JQuery. Задача: хочу вызвать модальное окно по кнопке "Добавить", где нужно заполнить поля, нажать кнопку "Сохранить", данные нужно передать в БД и обновить таблицу на странице. Подскажите, пожалуйста, как это можно реализовать? 0

@nocl1p 55 / 38 / 20 Регистрация: 30.03.2012 Сообщений: 330
	01.03.2019, 14:07
	Работает - это уже успех 1

@InfServ 0 / 0 / 0 Регистрация: 27.08.2018 Сообщений: 19
	01.03.2019, 14:20 [ТС]
	Спасибо!!! 0

Добавление данных в базу и обновление таблицы на странице

Решение

Решение