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 %}
