Python/Flask/HTML - Render HTML in new window instead of home page

Question

I have a Python code where I'm using Flask to create a webpage. In the home page, I'm filling out a form, submitting using a button and it displays a table based on the inputs.

The problem i'm having is that once I click the button to submit the form, it renders the table on that same webpage. I would like to create a new window using JavaScript window.open() or whatever other method you might suggest to render that table inside the new window and leave the home page as it is. I tried looking around and I can't seem to get anything to work. I've read through this question and this question. But those suggestions don't seem to match what i'm looking for.

This is my code:

Python code

from flask import Flask, render_template, request,
app = Flask(__name__)

def get_table(user_input):
...
return dict    //returns list of dictionaries, for example... 
               //dict = [{'name':'Joe','age':'25'},
               //        {'name':'Mike','age':'20'}, 
               //        {'name':'Chris','age':'29'}] 



@app.route("/")
def home():
    return render_template('home.html')


@app.route("/table", methods = ['POST'])
def table():
    user_input = request.form['input']
    dict_table = get_table(user_input)     //return list of dictionaries
    return render_template('table.html', dict_table=dict_table)

if __name__ == '__main__':
    app.run(debug=True)

home.html

<!DOCTYPE html>
<html>
<head>
   <title>Homepage</title>
</head>
<body>
        <form action="/table" method="post">
            <select name="input">
               <option value="1">Input</option>
            </select>
           <button type="submit">Click Me!</button>
        </form>
</body>
</html>

table.html

<!DOCTYPE html>
<html>
<head>
   <title>Table</title>
</head>
<body>
        <table id="table">
        {% if dict_table %}
        <tr>
            {% for key in dict_table[0] %}
                <th>{{ key }}</th>
            {% endfor %}
        </tr>
        {% endif %}

        {% for dict in dict_table %}
        <tr>
            {% for value in dict.values() %}
                <td>{{ value }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
    </table>
</body>
</html>

Could someone explain in a clear way how I can click the form submit button on my homepage, stay on the homepage home.html, and make the table from table.html open up in a new window (maybe using window.open() from JavaScript or something else)?

I would appreciate it if someone could walk me through the steps on how to do this with my code provided and show me specifically where to call functions and things like that. I'm new to Flask/HTML/JS and I'm just trying to learn for personal use and I'm getting frustrated reading links and documents that show just how to display a URL like google.com in a new tab, which is not what I want. Thanks!

try this https://stackoverflow.com/questions/3951768/window-open-and-pass-parameters-by-post-method — Đào Minh Hạt, Feb 21 '19 at 04:52
Like this? https://stackoverflow.com/questions/44606429/modal-window-in-jinja2-template-flask — gittert, Feb 21 '19 at 06:57

score 5 · Accepted Answer · edited Aug 17 '22 at 15:10

Step1: Check out this link that explains how to use Jquery and Ajax with FLASK

The key concept here is AJAX (asynchronous JavaScript and XML). In short, it is an architecture that makes it possible to send requests to the server in the background (called Asynchronous requests) and then modifies the content of the page currently displayed by the web browser according to the result received from the server, avoiding as well as the server does not transmit the complete page again.

Step2: A solution to your problem

First we write the routes:

from flask import Flask, render_template, request,
app = Flask(__name__)

user_input = None

def get_table(user_input):
    ...
    return dict    # returns list of dictionaries, for example... 
                   # dict = [{'name':'Joe','age':'25'},
                   #         {'name':'Mike','age':'20'}, 
                   #         {'name':'Chris','age':'29'}] 

@app.route('/')
def home():
    return render_template('home.html')

@app.route('/_ajax_user_input')
def ajax_user_input():
    global user_input
    user_input = request.args.get('user_input', 0, type=int)
    return "ok"

@app.route("/table")
def table():
    x = user_input
    dict_table = get_table(x)     # return list of dictionaries
    return render_template('table.html', dict_table=dict_table)

After we attack the templates:

home.html:

     <select id="input" name="input">
         <option value="1">Input</option>
     </select>
     <button type="button" class="test"> Click Me! </button>

     <script>
         $(document).ready(function(){
             $('.test').bind('click', function() {
                 $.getJSON($SCRIPT_ROOT + '/_ajax_user_input',{
                     user_input: $('#input').val(),
                 },function() {
                     window.open('http://127.0.0.1:5000/table', '_blank');
                 });
                 return false;
             });
         });
     </script>

table.html:

     <table id="table">
         {% if dict_table %}
             <tr>
                 {% for key in dict_table[0] %}
                     <th>{{ key }}</th>
                 {% endfor %}
             </tr>
         {% endif %}

         {% for dict in dict_table %}
             <tr>
                 {% for value in dict.values() %}
                     <td>{{ value }}</td>
                 {% endfor %}
             </tr>
         {% endfor %}
     </table>

Basically here is what happens:

when I click on my button, I call the Javascript script:
```
   $('.test').bind('click', function() {
```
This sends an ajax request to FLASK, which consists in executing the ajax_user_input() function:
```
   $.getJSON($SCRIPT_ROOT + '/_ajax_user_input',
```
To this function I send a data (the value selected by the user in the select tag) and this data is stored in the variable user_input:
```
   user_input: $('#input').val(),
```
On the side of Flask I get the data and I store it in a global variable that I named user_input too:
```
   global user_input
   user_input = request.args.get('user_input', 0, type=int)
```
Then in my script I call a javascript method that allows me to open a url in a new tab (more details here):
```
   window.open('http://127.0.0.1:5000/table', '_blank');
```
The 'table' route, stores in the variable x the data previously stored in my global variable (user_input), then it calls the function get_table() (by passing him the variable x in parameter) which returns a list of the dictionaries, and finally it returns the page table.html with the list of the dictionaries in parameter:
```
   x = user_input
   dict_table = get_table(x)
   return render_template('table.html', dict_table=dict_table)
```

I hope this will help you, even though I am convinced that there are many other ways to do it, perhaps more effective.

Hi Tobin, thank you for the detailed answer but while reading that, I realized I worded my question incorrectly. I have made edits to fix it. I meant to open table.html in a "new" window, not a popup window. I should not have called it a popup window. I wanted to open it in a new tab or new window. Is there any way I could do that? — ss1111, Feb 21 '19 at 23:21
@ss1111 I just edited my answer. I hope this time it meets your concern. In case of problems, do not hesitate to leave a comment — Tobin, Feb 22 '19 at 13:04
I read through and understood how your code works and it makes sense to me now. But when I tried it and click the "Click Me!" button, it doesn't seem to do anything. Is there something i'm doing wrong? When you tried this, did it work for you? If so, I must have a syntax error somewhere on my side — ss1111, Feb 23 '19 at 18:32
Indeed when I test it works very well. There must be a syntax error somewhere in your code or you may have forgotten to import Jquery. I'll suggest that you use your browser's inspector to make sure the Ajax request is working properly. — Tobin, Feb 25 '19 at 14:57
In case of concern especially do not hesitate to add a comment. But I am very sure that the problem must come from your javascript manipulation; make sure to import jquery before the body tag, check the semicolons in your javascript code, if necessary add "console.log" and check in your console if it reacts. it will allow you to see if Ajax queries succeed. — Tobin, Feb 25 '19 at 15:02

Python/Flask/HTML - Render HTML in new window instead of home page

1 Answers1