1

I am creating a single webpage and I would like to go to a specific section (in this case called results) of that page using Flask's render_template.

Is there any way to do so, for example by passing in an argument go_to_results = True into render_template:

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':

        if 'file' not in request.files:
            return render_template('index.html')

        file = request.files['file']

        if file.filename == '':
            return render_template('index.html')

        prediction = predict(file, 3, percentage=True)

        return render_template('index.html', prediction_html = prediction, go_to_results = True)
        
    return render_template('index.html')

I found this example but it doesn't fit my needs, as I am using only 1 HTML page ('index.html'). Link to a specific location in a Flask template.

UPDATE WORKING SOLUTION: I added this to the HTML results section:

<a href="#results">
</a>

And then I used this JS code.

<script>
    function jumpToHash(hash){
        if (hash){
            var url = location.href;
            location.href = "#results";
        }
    }
jumpToHash({{ anchor }});
</script>
ivoalbrecht
  • 19
  • 4

1 Answers1

0

You can add a little bit of JS to your template and pass the anchor.

In your Flask:

render_template('index.html', anchor="your_tag_id")

JS code to add to index.html:

<script>
    function jump(h){
        var url = location.href;               //Save down the URL without hash.
        location.href = "#"+h;                 //Go to the target element.
        history.replaceState(null,null,url);   //Don't like hashes. Changing it back.
    }

    jump({{ anchor }});
</script>

Credit for the JS here.

Luca Angioloni
  • 2,243
  • 2
  • 19
  • 28
  • Thanks Luca, your explanation is very clear though it doesn't seem to work. I have 0 knowledge of JS unfortunately. Would I need to change something inside the JS function jump? Or could it be due to the other JS code inside the html file (too big to paste here): – ivoalbrecht Dec 15 '20 at 09:29
  • Hatd to say.... as a precaution, move the js to the bottom of the HTML – Luca Angioloni Dec 15 '20 at 09:36
  • I tried to do so, didnt work unfortunately. I also commented out all the other JS code, but still it did not work. I also hard-coded "results" instead of {{ anchor }}, that did not work either... – ivoalbrecht Dec 15 '20 at 11:47
  • Are you sure your results div has the `id="results"` ? Would you be able to try the other solutions proposed here: https://stackoverflow.com/questions/13735912/anchor-jumping-by-using-javascript ? – Luca Angioloni Dec 15 '20 at 12:32
  • I am sure, thanks though. I also tried the other solutions and I tried resetting the Flask application etc. I will now get some debugging help elsewhere, will let you know the outcome. – ivoalbrecht Dec 15 '20 at 13:44
  • I added the solution in the question. – ivoalbrecht Dec 15 '20 at 14:56
  • Ok, good. Looks like my solution worked. – Luca Angioloni Dec 15 '20 at 14:58