reload page automatically without needing to RE-enter URL again Django

Question

My webpage consists of 2 parts, upper part is a section that let user to enter data while bottom part displays all the data in database in a table form. When user selects "Add" button in the upper part, the data will be saved into database and being outputted in a table in bottom part of the webpage. Is there anyway to show the table once i select the "Add" button ? Right now what the code is doing is when "Add" button is being selected, it will load a new form but then the whole table will disappear. I have to manually type this address again "http://127.0.0.1:8000/hrfinance/lscholarship/" then only the table will appear. Even with refreshing the page will not work. Below is my code in

views.py:

def scholarship(request, id=None):
    query_results = []
    if request.method == "POST":
        form = ScholarshipForm(request.POST)
        if form.is_valid():
            scholarship = form.save(commit=False)
            scholarship.save()
    else:
        form = ScholarshipForm()
        id = request.GET.get('scholarship')
    query_results = Scholarship.objects.all()
    data = {
            'query_results':query_results,
            'form': form
           }
    return render(request, 'hrfinance/add_remove_scholarship.html', data)

models.py

class Application(models.Model):
    studentID = models.CharField("Student ID", max_length=8, validators=[MinLengthValidator(8)], primary_key=True, default="")
    studentName = models.CharField("Student Name", max_length=500, default="")
    scholarship = models.TextField("Scholarship")

add_remove_scholarship.html

<div align="center" >
<form method="POST" onsubmit="return validation()" action="">
{% csrf_token %}
{{ form.errors }}
    <p>Upload File: {{ form.doc }}</p>
    <p>Faculty: {{ form.faculty }} </p>
    <p>Opening date: <input id="odate" type="date" name="openDate"> </p>
    <p>Closing date: {{ form.closeDate }} </p>
    <input type="submit" name="AddScholarship" value="Add Scholarship"   >
</form>
</div>
<br></br>
    <button id="button" type="button">Delete Selected Scholarship</button>
    <br></br>
    {{query_results}}
    <form method="POST" action="">
    {% csrf_token %}
<table  id="example" class="display" cellspacing="0" width="100%" border="1.5px">
    <tr align="center">
        <th> Scholarship </th>
        <th> Faculty </th>
        <th> Open Date </th>
        <th> Close Date </th>
    </tr>
    {% for item in query_results %}
    <tr align="center">
        <td>{{item.doc}}</td>
        <td>{{item.faculty}}</td>
        <td>{{item.openDate}}</td>
        <td>{{item.closeDate}}</td>
    </tr>
    {% endfor %}
    </table>
    </form>

Answer 1

Best practice is to use the Post/Redirect/Get pattern. This will solve your problems as well: the GET request will clear the form and show the new query results.

If the form is successfully saved, you simply return a redirect to the current page. The browser will then do a GET request. This prevents accidental duplicate form submissions when e.g. the user reloads the current page when it is still a POST request:

from django.shortcuts import redirect

def scholarship(request, id=None):
    query_results = []
    if request.method == "POST":
        form = ScholarshipForm(request.POST)
        if form.is_valid():
            scholarship = form.save(commit=False)
            scholarship.save()
            # Return a redirect to the same page
            return redirect('/path/to/current/page/')
    ...

Answer 2

def scholarship(request, id=None):
    query_results = []
    if request.method == "POST":
        form = ScholarshipForm(request.POST)
        if form.is_valid():
            scholarship = form.save(commit=False)
            scholarship.save()

    else:
        id = request.GET.get('scholarship')
    query_results = Scholarship.objects.all()
    form = ScholarshipForm()
    data = {
            'query_results':query_results,
            'form': form
           }
    return render(request, 'hrfinance/add_remove_scholarship.html', data)

you need to move the query out side the else condition.

Although, this method would take a lot of time as the number of rows in the database increases. A better method to do this would be to use jquery Ajax method to update the data in the database and show it dynamically using javascript/Jquery once the database is updated.