КОНТЕКСТ
Я создал приложение для колб, которое содержит форму на главной странице. Пользователь должен загрузить и повторно загрузить заполненный файл шаблона, а затем заполнить форму. Когда эта форма отправляется, скрипт запускается на загруженном файле на сервере, который в итоге создает файл .html.
Желаемый результат
Первоначально у меня был этот результирующий файл .html, отображаемый по другому URL-адресу (с помощью перенаправления), но вместо этого мне хотелось бы, чтобы форма отображалась в левой половине главной страницы, и результат html показывать прямо рядом с ним, в правой половине главной страницы.
Я борюсь с тем, как этого добиться, особенно при указании, где на странице я хотел бы, чтобы результаты появлялись, и подозреваю, что мне нужно использовать JavaScript (с которым я незнаком). Я попробовал «якорный» подход, но у меня это тоже не сработало. Буду очень признателен за любые рекомендации с этим! Спасибо:)
КОД
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
Я понимаю, как разделить домашнюю страницу на столбцы, но я все еще не понимаю, как указать, что я хочу, чтобы файл .html (называемый authorList.html), созданный на Python, отображался в части Where I want the results to appear index.html.
Ранее я настроил его так, чтобы маршрут upload перенаправлялся на маршрут results, а затем маршрут results просто отображал бы полученный authorList.html. Но как я могу указать в определенной части index.html, где я хочу, чтобы шаблон отображался? Нужно ли делать что-то вроде <a href="authorList.html"> в index.html?
Предыдущий код
@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')
ОБНОВЛЕНИЕ 2: МОЯ ПОПЫТКА
Я пытался использовать функцию JQuery для включения authorList.html в index.html (на основе этого вопроса здесь: Включить другой файл HTML в файл HTML ), но когда я нажимаю «Загрузить» Кнопка «Результаты» на моей домашней странице остается пустой. Может быть, редирект как-то все портит?
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 %}