How to allow only a certain section of my code to reload in Django

Question

So, I am using a Django application where I am using the google maps API as well. So this is the instance...when I submit a form... I only want my form div to reload and NOT the div where my map lies.

So my code is...

        <section class="middleSection p-2">
            <div class="HideOpenMiddleCont justify-content-center" onclick="HideOpenMiddleCont()">
                <div class="px-4 rounded-pill bg-warning" id="arrowCont">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-arrow-down-short text-dark" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z"/>
                    </svg>
                </div>
            </div>

            {% if view == 'trip' %}
                {% include "app/passenger/trip.html" %}
            {% elif view == "upcomingRides" %}
                {% include "app/passenger/upcomingRides.html" %}
            {% elif view == "pastRides" %}
                {% include "app/passenger/pastRides.html" %}
            {% endif %}

            <div class="optionBarPull" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
                    <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
                </svg>
            </div>

        </section>


    <section class="rightSection" id="map">
        <h3 class="font3 text-center p-2"><strong>Google Maps is here</strong></h3>
        <h4 class="font3 text-center text-danger" id="googleMapsText"></h4>
        <h5 class="font3 text-center text-muted">Please try refreshing the page if the maps doesnt display.</h5>
    </section>

My form is in the <section class="middleSection p-2">, which i want to reload once submitted but I want to keep the <section class="rightSection" id="map"> as it is.

How am I to deal with such a situation, because when I submit a form all my markers and circles get erased which is annoying...

Any help would be greatly appreciated thanks!

Are you familiar with AJAX? You need to submit the form asynchronously using JavaScript and AJAX — Iain Shelvington, Jun 25 '21 at 01:28
[This should get you started](https://stackoverflow.com/questions/19527586/how-to-replace-html-element-with-ajax-response), in short make a call with Ajax e.g. to a dedicated endpoint, get a response, replace the div you want with it once you receive it — Edoardo Facchinelli, Jun 25 '21 at 01:51

Faiz P · Accepted Answer · 2021-06-25T05:47:35.763

You can use AJAX where you want to update parts of a web page, without reloading the whole page. I mostly use AJAX-Jquery. Code will simply look like this.

<script>
    $('#btn').click(function () {
    var data = {
        'csrfmiddlewaretoken': '{{csrf_token}}',
        '---': ---,
        '---': ---,
    }
    
        $.ajax({
            url: '/',
            method: 'POST',
            data: data,
            dataType: 'json',
            success: function (data) {
                
            }
        })
    }
})</script>

If you are not familiar with this code.

First, take all the data you want to send and include it in data as key value pair
give URL, method, data, and dataType

You can access every data you sent to the backend with request.POST, in the method use return Jsonresponse. the response will come to success function in ajax you can write js code to clear your form.

Make sure you have added cdn for ajax and jquery on top of ajax script

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

I hope this will help.

Hey so, just make sure that under the ajax you also add the `processData: false, contentType: false,` . Else you will get an unexpected error. — Najaaz, Jun 26 '21 at 09:16

How to allow only a certain section of my code to reload in Django

1 Answers1

Linked