首页 > 解决方案 > 从破折号回调调用javascript函数

问题描述

我一直在努力在我的仪表板应用程序中生成模式。我确实将 .css 和 .js 文件都放在了 assets 文件夹中,但我不确定在回调中调用 .js 函数的语法,.js 函数接受一个 .css 参数然后激活它,因此它具有popup(modal) 效果基于是否修正文件...</p>

.css 包含模态代码的文件

.popup_File {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%) scale(0);
  transition: 500ms ease-in-out;
  border: 1px solid black;
  border-radius: 10px;
  z-index: 10px;
  width: 500px;
  max-width: 80%;
}
.popup_File.active{
  transform: translate(-50%, 50%) scale(1);
}

.js 对用于激活 css 文件中模式的 Javascript 函数进行编码

function openmodal(popup){
  if (popup == null) return
  popup.classList.add('active')
  document.write('see')
}

我想实际激活css模式的回调(见评论)->

 import dash_bootstrap_components as dbc 
import dash_bootstrap_components as dbc 
import dash_core_components as dcc 
import dash_html_components as html 
from dash.dependencies import Input, Output, State, ClientsideFunction 

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.JOURNAL])
app.layout = html.Div(
                className = 'popup_File',
                id = 'Wrong_file',
                children = [
                        html.Div( 
                            className = 'header', 
                            children = [
                                html.Div("Invalid file type", className = 'title'),
                                html.Button('&times', className = 'Close_wrongFile', id = 'File')]),
                        html.Div('The file you have uploaded does not have the vcf file extension.', className = 'Warning_wrongfile')
                    ]
    )

#Call back for checking uploaded file
    
    @app.callback(
    Output('place_Filename', 'children'),
    [Input('VCF', 'contents')],
    [State('VCF', 'filename')]
    )
    def VCF_processing(contents, filename):
    if filename is None:
        layout = html.Div(
        [
            html.H6(
                'Drag and Drop .vcf '
            )
        ]
        ) 
        return layout
    else:
        if '.vcf' not in filename:
        #... I want to call the .js function here to tell the user that an incorrect file has been uploaded
            return warning modal

if __name__ == '__main__':
    app.run_server(debug=False)

我一直在努力寻找要使用的正确语法以及如何放置 .js 代码并使用 Python dash 中的正确参数调用 assets 文件夹中的函数。请帮忙!!

标签: javascriptcssplotly-dash

解决方案


推荐阅读