Embedding javascript in Streamlit

Using Streamlit
1

Hi all. I am trying to run some javascript from within my streamlit app. The code is below:

st.markdown("""<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">""", unsafe_allow_html=True)
st.markdown("""<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>""", unsafe_allow_html=True)

            st.markdown('''<div class="card mb-3" style="max-width: 1500px;">
                <div class="row g-0">
                    <div class="col-md-4">
                    <div style="''' + image_block_style2 +'''">
                    <img src=''' + data2 + ''' style="width:10rem;height:10rem;">
                    </div>
                    <div class="col-md-8">
                    <div class="card-body">
                        <button id="graph_expln_button">Explain Graph</button>
                        <script>document.getElementById("graph_expln_button").addEventListener("click", function() {console.log("Hello world!");});</script>
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                    </div>
                    </div>
                </div>
                </div>''', unsafe_allow_html=True)

The problem is that the is not being run in the streamlit app. If I click the button that shows it doesn’t print anything to the console, but it doesn’t throw an error either. It just does nothing. Can anyone help me debug this?The problem is that the is not being run in the streamlit app. If I click the button that shows it doesn’t print anything to the console, but it doesn’t throw an error either. It just does nothing. Can anyone help me debug this?

2

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.