Creé una aplicación de matraz que se supone que muestra un marco de datos después de pasar por un filtro. Para eso, he creado un formulario usando Flask-WTF para solicitar un filtro específico y luego aplicarlo. Necesito hacer que aparezca el resultado del marco de datos cuando se envía el formulario. Así que configuré la visibilidad del resultado del marco de datos como oculto y agregué un evento onclick {{ form.submit(onclick="showResult()") }} . Pero cuando hago clic en el botón Enviar, el resultado aparece brevemente y luego desaparece cuando el formulario termina de cargarse. Aquí está el código:
servidor.py
def get_df(): df = pd.DataFrame({'A': [0, 1, 2, 3, 4], 'B': [5, 6, 7, 8, 9], 'C': ['a', 'b', 'c', 'd', 'e']}) return df @app.route('/', methods=("POST", "GET")) def index(): df_result = get_df() form = NameForm() message = "" if form.validate_on_submit(): name = form.name.data df_result = df_result.loc[df_result['C']==name] message = 'your input is ' + name return render_template('index.html', tables=[df_result.to_html(classes='data', header="true")], form=form, message=message)índice.html
{% extends 'layout.html' %} {% block content %} <form method=post> {{ form.csrf_token }} {{ form.name }} {{ form.submit(onclick="showResult()") }} </form> <p class="pt-5"><strong>{{ message }}</strong></p> <div id="result" style="visibility:hidden;"> {% for table in tables %} {{ table|safe }} {% endfor %} </div> {% endblock %}javascript.js
function showResult() { document.getElementById('result').style.visibility = 'visible' }¿Podría ayudarme a descubrir por qué el estilo de visibilidad en javascript no persiste?
Su formulario no tiene un atributo de acción, por lo que no estoy seguro de dónde se envía su formulario para su procesamiento.
Un envío de formulario recarga la página. Lo que está haciendo su código actual es primero hacer visible el marco de datos, luego enviar el formulario que obliga a la página a recargarse y así su marco de datos vuelve a ser invisible.
La solución es hacer una llamada asíncrona para enviar su formulario, es decir, cuando el usuario hace clic para enviar su formulario, interceptar la acción de envío y bloquear el envío predeterminado, luego, utilizando su código asíncrono, envíe el formulario, procese el resultado devuelto y luego haga visible el marco de datos. . Código de muestra en el que puede construir
function showResult(e){ // Stop the default form submission e.preventdefault() // Make a POST request to your server sending the form fetch("/",{ method: "POST", body: new FormData(document.querySelector('form')}) .then(function(result) { // This is the response from the server return result.json(); }) .then(function(data){ // Process the returned data ...... // Make your frame visible document.getElementById('result').style.visibility = 'visible' }) }