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

这不是烧瓶问题。使用 bootstraps和jquery

之类的CSS模块可以轻松实现通过行和 col-sm 进行

Css类为您工作。 col-sm的最大值为 12 ，代表整个页面宽度的大小。

如果您想在三列中放置结果和数据，可以将col-sm分为三部分，即 col-sm-4 因为 4 + 4 + 4 将为您提供 12

如果您想在两列中放置结果和数据，就像您问的那样，您可以将col-sm分为两个，即 col-sm-6 因为 6 + 6 会给您 12

三列示例

<!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列示例

<!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>

要修复您的内容，请注意Div的打开和关闭位置

<!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>

您现在可以添加其他内容，并使代码与您的应用程序兼容

How to display Flask form results on a specific part of the same page

1 个答案: