✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Cannot load Javascript script

I am having some troubles loading JS scripts in my Dash App

My app is organized as

assets
    -- custom-scripts.js
    -- style.css
app.py

So, my app.py file is:

import dash
import dash_html_components as html

external_stylesheets = [
    {
        'href': 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css',
        'rel': 'stylesheet',
        'integrity': 'sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4',
        'crossorigin': 'anonymous'
    }
]

external_scripts = [
    {
        'src': 'https://use.fontawesome.com/releases/v5.0.13/js/solid.js',
        'integrity': 'sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ',
        'crossorigin': 'anonymous'
    },
    {
        'src': 'https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js',
        'integrity': 'sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY',
        'crossorigin': 'anonymous'
    },
    {
        'src': 'https://code.jquery.com/jquery-3.3.1.slim.min.js',
        'integrity': 'sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo',
        'crossorigin': 'anonymous'
    },
    {
        'src': 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js',
        'integrity': 'sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ',
        'crossorigin': 'anonymous'
    },
    {
        'src': 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js',
        'integrity': 'sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm',
        'crossorigin': 'anonymous'
    }
]


app = dash.Dash(
    __name__,
    external_scripts=external_scripts,
    external_stylesheets=external_stylesheets)

app.layout = html.Div(
    className='wrapper',
    children=[
        # <!-- Sidebar -->
        html.Nav(
            id='sidebar',
            children=[
                html.Div(
                    children=html.H3('Name of the App'),
                    className='sidebar-header'
                ),
                html.Ul(
                    className='list-unstyled components',
                    children=[
                        html.P('Navigation'),
                        html.Li(
                            className='active',
                            children=[
                                html.A(
                                    'Home',
                                    href='#homeSubmenu',
                                    className = 'dropdown-toggle',
                                    **{'aria-expanded': 'false', 'data-toggle': 'collapse'}
                                ),
                                html.Ul(
                                    className='collapse list-unstyled',
                                    id='homeSubmenu',
                                    children=[
                                        html.Li(
                                            html.A(
                                                'Home 1',
                                                href='#'
                                            )
                                        ),
                                        html.Li(
                                            html.A(
                                                'Home 2',
                                                href='#'
                                            )
                                        ),
                                        html.Li(
                                            html.A(
                                                'Home 3',
                                                href='#'
                                            )
                                        ),
                                    ]
                                )
                            ]
                        ),
                        html.Li(
                            children=[
                                html.A(
                                    'About',
                                    href='#'
                                )
                            ]
                        ),
                        html.Li(
                            children=[
                                html.A(
                                    'Contact',
                                    href='#'
                                )
                            ]
                        )
                    ]
                )
            ]

        ),

         # <!-- Page Content -->
         html.Div(
             id='content',
             children=[
                 html.Nav(
                     className = 'navbar navbar-expand-lg navbar-light bg-light',
                     children=[
                         html.Div(
                             className = 'container-fluid',
                             children = [
                                 html.Button(
                                     type = 'button',
                                     id = 'sidebarCollapse',
                                     className = 'btn btn-info',
                                     children = [
                                         html.I(className='fas fa-align-left'),
                                         html.Span('Toggle Sidebar')
                                     ]
                                 )
                             ]
                         )
                     ]
                 )
             ]
         ),

        )
    ]
)

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

My custom-scripts.js file is

        $(document).ready(function () {
            $('#sidebarCollapse').on('click', function () {
                $('#sidebar').toggleClass('active');
            });
        });

And the CSS file is the same as https://bootstrapious.com/tutorial/sidebar/style4.css

When I load my App sometimes the buttom “Toggle Sidebar” works, but sometimes it does not and I do not know on which this depends.

Sometimes works and I only refresh the page and does not work anymore.

After stop the App I get this in the Console:

So I think I have a problem fetching _reload-hash

were you able to get this to work? I have similar issues with the data-* attributes. let me know what you did to fix it.

Interesting to read this !
I was unable to make this (data-* attributes + javascript) work in the Dash environment and posted about it here before. Therefore I made a solution that uses the html.Iframe component and I feed it the raw HTML code in a string through “srcDoc” attribute. Then the javascript does work as expected. But I wonder why this doesnt work off the shelf…

Hi @IvoB, Can you provide an example code to see how you implemented this using the html.Iframe. Thanks,

yeah I will post it asap !

Something along the lines like this:

  return html.Div([
    html.Div([
        Header(),
        html.Div(id='target'),
        ], className="subpage")
    ], className="page")

@app.callback(dash.dependencies.Output('target', 'children'), [dash.dependencies.Input('plot', 'clickData')])
def display_click_data(clickData):
    if clickData != None:
        val = clickData['points'][0]['customdata']
        val = val.split("##")
        if val[1] is not '0':
            badgeIdentifier = 'data-doi="' + val[1] + '"'
            searchTerm = val[1]
		fileContents = '<script src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>
		<div><H3>Details for title: ' + val[0] + ' ...</H3></div>
		<div class="altmetric-embed" data-badge-type="donut" data-link-target="_blank"' + badgeIdentifier +'></div>
		<a href="https://cris.nl/en/searchAll/index/?search=' + searchTerm + '" target="_blank">
		LINK TO PURE</A>
		</br>
		<A HREF="https://dx.doi.org/' + val[1] + '" target="_blank">
		LINK TO DOI</A>		'
        return html.Iframe(srcDoc=fileContents,style={'border': '1px solid lightgrey', 'width': '100%', 'height': 200, 'white-space': ' pre-wrap'})
    else:
        return html.Div('')