如何在同一页面的特定部分显示Flask表单结果

Question

CONTEXT

I've created a flask application that contains a form on the homepage. The user is meant to download and re-upload a filled-out template file, then fill out the form. When this form is submitted a python script is invoked on uploaded file on the backend, which finally produces an .html file.

DESIRED RESULT

Originally, I was having this resulting .html file displayed on different URL (via a redirect), but what I'd like instead is for the form to be displayed on the left half of the homepage, and the html result to display right next to it, on the right half of the homepage.

I'm struggling with how to achieve this, especially in specifying where on the page I'd like the results to appear, and suspect I need to use JavaScript (which I am unfamiliar with). I tried the "anchor" approach but that did not work for me either. I'd really appreciate any guidance with this! Thanks :)

CODE

app.py:

def upload():
    if request.method == 'POST':
            if request.form['affiliation'] == "letter":
                affiliation = "let"
            elif request.form['affiliation'] == "number":
                affiliation = "num"

            proc = subprocess.Popen('python author_script.py {} -m {}'.format(file.filename, affiliation), shell=True, stdout=subprocess.PIPE)
            time.sleep(0.5) #wait for html file to be created before going to the results page.
            return redirect(url_for('upload'))

    return render_template('index.html', template_file=app.config['TEMPLATE_FILE'])

index.html:

{% extends "layout.html" %}

{% block body %}

<div class="container">
    <div style="text-align:left">
      <br>
      <h1>Author List Script</h1>
    </div>
    <section id="intro" class="main">
    <div class="row">
      <div class="column">
          <h6>Download the template file below and re-upload with your custom author information</h6><br>
          <a href="static/ExampleAuthorList.txt" download="Authors_Template.txt"><button type="button">Download</button></a><br><br><br>
          <form action="" method=post enctype=multipart/form-data>
          <div id="buttonDiv">
            <p><input type=file name=file value="Choose File">
            <p>Mark affiliations with:</p>
            <input type="radio" name="affiliation" value="number" id="number" class="form-radio" checked><label for="number" checked>Number</label><br>
            <input type="radio" name="affiliation" value="letter" id="letter" class="form-radio"><label for="letter">Letter</label>
            <br><br>
          </div>
            <input type=submit value=Upload></p>
          </form>
          </div>
      <div class="column">
          <h4>Results</h4>
          <!-- Where I want the results to appear -->
      </div>
      </div>
      </section>
    </div>

    <!-- Scripts -->
      <script src="js/jquery.min.js"></script>
      <script src="js/skel.min.js"></script>
      <script src="js/util.js"></script>
      <script src="js/main.js"></script>

{% endblock %}

UPDATE

I understand how to divide the homepage into columns, but I still don't understand how to specify that I want the python-produced .html (called authorList.html ) file to display in the Where I want the results to appear part of index.html .

Previously, I had it set up so that the upload route would redirect to the results route, and then the results route simply renders the resulting authorList.html . But how can I specify within a specific part of index.html where I want the template to be rendered? Do I need to do something like <a href="authorList.html"> within index.html ?

Previous code

@app.route("/", methods=['GET', 'POST'])
def upload():
    if request.method == 'POST':
            if request.form['affiliation'] == "letter":
               affiliation = "let"
            elif request.form['affiliation'] == "number":
               affiliation = "num"

            proc = subprocess.Popen('python author_script.py {} -m {}'.format(file.filename, affiliation), shell=True, stdout=subprocess.PIPE)
            time.sleep(0.5) #wait for html file to be created before going to the results page.
            return redirect(url_for('results'))
    return render_template('index.html', template_file=app.config['TEMPLATE_FILE'])

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

UPDATE 2: MY ATTEMPT

I tried using a JQuery function to include the authorList.html within index.html (based on this question here: Include another HTML file in a HTML file ), but when I press the "Upload" button, the Results section of my homepage is still blank. Maybe the redirect is somehow messing things up?

app.py:

def upload():
    if request.method == 'POST':
            if request.form['affiliation'] == "letter":
                affiliation = "let"
            elif request.form['affiliation'] == "number":
                affiliation = "num"

            proc = subprocess.Popen('python author_script.py {} -m {}'.format(file.filename, affiliation), shell=True, stdout=subprocess.PIPE)
            time.sleep(0.5) #wait for html file to be created before going to the results page.
            return redirect(url_for('upload'))

    return render_template('index.html', template_file=app.config['TEMPLATE_FILE'])

index.html:

{% extends "layout.html" %}

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="jquery.js"></script> 
  <script> 
    $(function(){
      $("#includedContent").load("authorList.html"); 
    });
  </script> 

</head>

{% block body %}

<div class="container">
  <div class="row">

    <div class="col-sm-6">

<div style="text-align:left"><br><h1>Author List Script</h1></div>

    </div>


    <div class="col-sm-6">

       <section id="intro" class="main">
    <div class="row">
      <div class="column">
          <h6>Download the template file below and re-upload with your custom author information</h6><br>
          <a href="static/ExampleAuthorList.txt" download="Authors_Template.txt"><button type="button">Download</button></a><br><br><br>
          <form action="" method=post enctype=multipart/form-data>
          <div id="buttonDiv">
            <p><input type=file name=file value="Choose File">
            <p>Mark affiliations with:</p>
            <input type="radio" name="affiliation" value="number" id="number" class="form-radio" checked><label for="number" checked>Number</label><br>
            <input type="radio" name="affiliation" value="letter" id="letter" class="form-radio"><label for="letter">Letter</label>
            <br><br>
          </div>
            <input type=submit value=Upload></p>
          </form>
          </div>
      <div id="includedContent" class="column">
          <h4>Results</h4>
      </div>
      </div>
      </section>


    </div>

  </div>
</div>

{% endblock %}

Answer 1

This is not flask question. it can easily be achieve using css module like bootstraps and jquery

Css Class via row and col-sm is what does the job for you. col-sm has maximum value of 12 which represents size of a full page width.

If you want three columns where you can place your results and data, you can split col-sm into three ie col-sm-4 as 4+4+4 will give you 12

If you want two columns where you can place your results and data, just like you have ask, you can split col-sm into two ie col-sm-6 as 6+6 will give you 12

Three column Examples

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Left</h3>
          <div>Your content for left appears here</div>
    </div>
    <div class="col-sm-4">
      <h3>middle</h3>
           <div>Your content for Middle appears here</div>

    </div>
    <div class="col-sm-4">
      <h3>Right</h3>        
      <div>Your content for right appears here</div>

    </div>
  </div>
</div>

</body>
</html>

2 column Examples

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h3>Left</h3>
          <div>Your content for left appears here</div>
    </div>

    <div class="col-sm-6">
      <h3>Right</h3>        
      <div>Your content for right appears here</div>

    </div>
  </div>
</div>

</body>
</html>

To fix your content be mindful of where Div opens and closes

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">
  <div class="row">



    <div class="col-sm-6">

      <h3>Left for author script</h3>
<div style="text-align:left"><br><h1>Author List Script</h1></div>

    </div>


    <div class="col-sm-6">

      <h3>Main Content at Right</h3>        
       <section id="intro" class="main">
    <div class="row">
      <div class="column">
          <h6>Download the template file below and re-upload with your custom author information</h6><br>
          <a href="static/ExampleAuthorList.txt" download="Authors_Template.txt"><button type="button">Download</button></a><br><br><br>
          <form action="" method=post enctype=multipart/form-data>
          <div id="buttonDiv">
            <p><input type=file name=file value="Choose File">
            <p>Mark affiliations with:</p>
            <input type="radio" name="affiliation" value="number" id="number" class="form-radio" checked><label for="number" checked>Number</label><br>
            <input type="radio" name="affiliation" value="letter" id="letter" class="form-radio"><label for="letter">Letter</label>
            <br><br>
          </div>
            <input type=submit value=Upload></p>
          </form>
          </div>
      <div class="column">
          <h4>Results</h4>
          <!-- Where I want the results to appear -->
      </div>
      </div>
      </section>


    </div>





  </div>
</div>

</body>
</html>

You can now add other things that follows and make the code compatible with your applications