Django: How to submit the form and receive the result on the same page without reloading the page

Question

I am working in django where I submit the input data and receive the manipulated result on the same page. Whenever I submit the form, the page reloads. I want to receive the output data, which is manipulated, on the same page without reloading / refreshing the page.

The model.py file is like this:

from django.db import models
from django.urls import reverse
# Create your models here.

class BFS(models.Model):
    description = models.TextField(blank=True, null=True)

The forms.py file is like this:

from django import forms
from .models import BFS

class BFSForm(forms.ModelForm):
    description = forms.CharField(
                        required=False, 
                        label=False,
                        widget=forms.Textarea(
                                attrs={
                                    'id': 'TA1',
                                    'rows': '10vh',
                                    'cols': '8vw',
                                    'placeholder': 'Enter Your Map Here',
                                    'class': 'textfield-style',
                                    'style': 'max-width: 100%; max-height: 100%;outline: none; border: none; background-color: white; width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; font-size: 20px; spellcheck="false";',
                                }
                            )
                        )
    
    class Meta:
        model = BFS
        fields = [
            'description'
        ]

The views.py file is like this;

from django.shortcuts import render, get_object_or_404, redirect
from .forms import BFSForm
from .models import BFS
from .ml import Maze

# def product_create_view(request):
def bfs_view(request):
    form = BFSForm(request.POST or None)
    if form.is_valid():
        form.save()
        form = BFSForm()

    try:
        image_url_info = None
        num_states_explored = None
        final_solution = None

        text_file = open("BFS\outputs\maze.txt", "w")
        field_name = 'description'
        input_value = BFS.objects.latest('id')

        field_object = BFS._meta.get_field(field_name)
        field_value = field_object.value_from_object(input_value)

        field_string_value = str(field_value).split("\n")
        text_file.writelines(field_string_value)
        text_file.close()

        m = Maze("BFS\outputs\maze.txt")
        print("Solving...")
        m.solve()
        m.output_image("static/search/bfs/maze.png", show_explored=True)

        image_url_info = "/../../../static/search/bfs/maze.png"
        num_states_explored = m.num_explored
        final_solution = str(''.join(m.end_result))

    except:
        print("BFS ERROR: Error in the try session of BFS in views.py")

    context = {
        'form': form, 'image_url': image_url_info, 'states_explored': num_states_explored, 
        'solution': final_solution
    }
    return render(request, "BFS/bfs.html", context)

The BFS app urls.py file is like this:

from django.conf import settings
from django.conf.urls.static import static

from BFS.views import bfs_view

app_name = 'BFS'

urlpatterns = [
    path('bfs/', bfs_view),
]


if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

The bfs.html file is like this:

<form method='POST'>{% csrf_token %}
   {{ form.as_p }}
   <input type='submit' value='Search' class="submit-btn poppins"/></a>
</form>

You can use Ajax for this. Check this out: https://stackoverflow.com/questions/20306981/how-do-i-integrate-ajax-with-django-applications — John Doe, Jun 29 '21 at 11:20
Does this answer your question? [How do I integrate Ajax with Django applications?](https://stackoverflow.com/questions/20306981/how-do-i-integrate-ajax-with-django-applications) — Ankit Tiwari, Jun 29 '21 at 14:43

score 0 · Answer 1 · answered Jun 29 '21 at 13:21

You cannot avoid reloading the page if you use a classic HTTP formular.

To achieve what you want, you need in your frontend to :

make an AJAX call
handle in Javascript the rerendering of your page

It can be done with VanillaJS or you can use libs to help you do it as axios or jquery.

score 0 · Answer 2 · answered Jun 29 '21 at 13:46

0

Yes it is Possible when you make an ajax call or by using javascript. And after on submit ajax form you can do

event.preventDefault()

answered Jun 29 '21 at 13:46

sreekanth

11
4

Django: How to submit the form and receive the result on the same page without reloading the page

2 Answers2