Django Forms и Mapbox как сохранить данные при обновлении страницы

Я уже долгое время бьюсь над этой проблемой и не могу найти ни одной похожей проблемы с решением. В основном проект, над которым я работаю, предполагает использование фреймворка Mapbox, который отображает карту Йеллоустонского национального парка. Затем пользователь может нажать на кнопку загрузки изображения, которая устанавливает булево значение либо "true", либо "false" для того, чтобы определить, хочет ли пользователь загрузить изображение, основываясь на том, где на карте он нажмет на следующую кнопку. Если это значение истинно и пользователь нажимает на место на карте, координаты курсора используются для размещения маркера с всплывающим окном, содержащим форму Django. Эта модель формы может быть заполнена, после чего пользователь может нажать кнопку submit.

карта по умолчанию img

заполнение поста на карте img

В идеале я бы хотел, чтобы кнопка submit просто помещала заполненную форму внутрь всплывающего окна, а также сохраняла там маркер. Сейчас, когда я нажимаю кнопку submit, вся страница обновляется, карта перезагружается и все сделанные изменения просто исчезают. Однако заполненная форма, которая была отправлена, добавляется в мою базу данных.

Код просмотра домашней страницы

def homePage(request):
posts = Post.objects.all()
form = PostForm()
if request.method == 'POST':
    form = PostForm(request.POST)
    if form.is_valid():
        form.save()
        return redirect('home')

context = {'posts': posts, 'form': form}
return render(request, 'home.html', context)

Показать код модели

from django.forms import ModelForm
from .models import Post 

class PostForm(ModelForm):
    class Meta:
        model = Post
        fields = '__all__'

Код модели формы

class Post(models.Model):
    animal = models.CharField(max_length=32, choices=ANIMALS, default=BISON)
    description = models.TextField(null=True, blank=True)

    def __str__(self):
        return self.animal

Mapbox map.on('click', (event) code

)

if (boolVal == true){
                var result = window.confirm("Do you want to make a post here? " + lt + ", " + lg)
                if (result === true){

                    new mapboxgl.Marker({
                    color: "#FF447",
                    //draggable: true
                    }).setLngLat([lt, lg])
                    .addTo(map);

                    const postpopup = new mapboxgl.Popup({ offset: [0, -15] })
                    .setLngLat([lt, lg])
                    .setHTML(
                    `<h1>Yellowmap :) Post Forum</h1>
                        <div style="margin-left: 40px;">
                            <form method="POST" action="">
                                {% csrf_token %}
                                {{form.as_p}}
                                <input type="submit" value"submit"/>
                            </form>
                            <p></p>
                        </div>`
                    )
                    .addTo(map);
                } 
            }

У кого-нибудь есть какие-либо советы или подсказки для меня, чтобы решить эту проблему? Я не самый опытный в работе с Django, поэтому любая помощь будет очень признательна!

Вернуться на верх