[FIXED] Flask render_template from Javascript function won't work

Issue

I am trying to do the following:

1. On button click, call a javascript function to pass a parameter to a flask function

 container.addEventListener('click', event => {
    const tgt = event.target.closest(".evd-btn");
    let arrayID = tgt.value;
    const arrayInt = Number(arrayID);
    const queryArray = mesgArray[arrayInt];
    fetch("/full_evidence/"+queryArray, {method: "POST"})
  });
});

2. The Flask function runs some python code using the parameter and then redirects to an html page to render the result

@app.route('/full_evidence/<query>', methods = ['GET', 'POST'])
def full_evidence(query):
    if request.method == 'POST':
        content = retriever.get_source(query)
        return render_template('evidence.html')

'1' works correctly and I am able retrieve the content from get_source() however it won't redirect me to evidence.html. The logs give me

127.0.0.1 - - [22/Nov/2023 11:06:46] "POST /full_evidence/when%20was%20The%20Biodiversity%20Metric%204.0%20User%20Guide%20published HTTP/1.1" 200

which i'm assuming is correct, but I don't get redirected to the evidence.html page. Whats going on?

Solution

The basic idea of an AJAX call is that the entire page does not have to be reloaded and rendered.
Using fetch also requires the developer to process the data received from the server in the code themselves. Then blocks or the await command are available for this purpose.
If you want to receive a template and add it to the page, I advise you to convert the response into text and replace the content of an existing element.

fetch("/full_evidence/"+queryArray, {method: "POST"})
    .then(resp => resp.ok && resp.text())
    .then(text => {
        const elem = document.getElementById('my-element');
        elem.innerHTML = text;
    });

Remember that you are not delivering a complete page, but only the part to be replaced from the server.

Answered By - Detlef