[FIXED] Why is render_template is not working twice when updating the same parameters?

Issue

I recently started using Flask, MongoDB and ElasticSearch. My MongoDB is working well and also my ElasticSearch.

The issue is that I generate a list of dictionaries and then display the information on my HTML website. The first time I call render_template, everything is working well. Then, I modulate the inputs (with javascript). It calls my flask function (when there is a change on one of the input) for the same webpage but this time the list is different. Then, I ask to render_template the same webpage with the new list and it never displays the new one.

Here is the HTML code :

    <div class="porsche-models-gallery">
        {% for model in porsche_models %}
            <div class="porsche-model-card">
                <img src="{{ model.image_url }}" alt="{{ model.porsche_name }}" class="porsche-model-image">
                <h3 class="porsche-model-name">{{ model.porsche_name }}</h3>
                <p class="porsche-model-price">{{ model.porsche_price }} €</p>
            </div>
        {% endfor %}
    </div>

Here is the python function :

@app.route('/', methods=['GET', 'POST'])
def home():
    porsche_models_list = []

    if request.method == 'POST':
        filter_params = {
            "min_price": int(request.form.get('price-min')),
            "max_price": int(request.form.get('price-max')),
            "min_speed": int(request.form.get('speed-min')),
            "max_speed": int(request.form.get('speed-max')),
            "min_accel": float(request.form.get('accel-min')),
            "max_accel": float(request.form.get('accel-max')),
            "min_l_100": float(request.form.get('l-100-min')),
            "max_l_100": float(request.form.get('l-100-max')),
            "min_power": int(request.form.get('power-min')),
            "max_power": int(request.form.get('power-max'))
        }

        porsche_models_list = search_porsche_model('porsches', **filter_params)
    else:
        porsche_models_infos = list(get_mongodb_data(collection))

        for porsche_model_info in porsche_models_infos:
            model_data = {
                'porsche_price': porsche_model_info.get('porsche_price'),
                'porsche_name': porsche_model_info.get('porsche_name'),
                'image_url': porsche_model_info.get('image_url')
            }
            porsche_models_list.append(model_data)

    return render_template('index.html', porsche_models=porsche_models_list)

As I do not change the parameter and return the same output (with the new list), I expected to display the new set of documents instead of the last one. Do you have any idea on how to fix this?

As I really want to use ElasticSearch to fully understand it, I kept this part of the code. Then I tried to retrieve the data from my python code in the javascript without calling render_template. Then I would try to display it dynamically. Of course it does not work.

I am running out of ideas, and I am wondering why it does not work. It should (according to my understanding) just render the same webpage with a new list to display isn't it?

Solution

It's because you're using POST method, you got the info in your python script but it doesn't change the URL (info sent in hidden mode), so it's not reloading the page. Use GET instead, this way, you're gonna have the requests on the URL and it's gonna change the content of the page ! Use POST only for sensitive content, GET for requests

Answered By - Hugocrt