How to run a javascript code in streamlit

🎈 Using Streamlit
1

As u would have understood by the title itself , i need to run a javascript code in streamlit, this javascript code is used to refresh the webpage even when the application is inactive .

Code snippet:

function  initTimer(periodInSeconds) {
            var end = Date.now() + periodInSeconds * 1000;


            var x = window.setInterval(function() {
                var timeLeft = Math.floor((end - Date.now()) / 1000);

                if(timeLeft < 0) { clearInterval(x); return; }

                $('#div').html('00:' + (timeLeft < 10 ? '0' + timeLeft : timeLeft));
            },200);
        }

initTimer(10);

Expected behavior:

I need to run the above code in streamlit

Debug info

  • Streamlit version: 1.25.0
  • Python version: 3.8
  • Using Pip env
  • OS version:
  • Browser version:

Requirements file

Using Conda? PipEnv? PyEnv? Pex? Share the contents of your requirements file here.
Not sure what a requirements file is? Check out this doc and add a requirements file to your app.

Please provide with a reply as soon as possible
Thanks

2

Hi @saitharun_gunasekar,

Thanks for posting!

To run JavaScript code in Streamlit, you can use st.markdown function with the unsafe_allow_html=True argument to inject the code into the app.

st.markdown(
    """
    <div id="div"></div>
    <script>
        function  initTimer(periodInSeconds) {
            var end = Date.now() + periodInSeconds * 1000;


            var x = window.setInterval(function() {
                var timeLeft = Math.floor((end - Date.now()) / 1000);

                if(timeLeft < 0) { clearInterval(x); return; }

                $('#div').html('00:' + (timeLeft < 10 ? '0' + timeLeft : timeLeft));
            },200);
        }

       initTimer(10);
    </script>
    """,
    unsafe_allow_html=True,
)

You can also consider using st.experimental_rerun to rerun the app.

Here’s an example app code that refreshes the page every 5 seconds using the experimental rerun:

import streamlit as st
import time
from datetime import datetime

st.title('Dynamic Time Display')

# Display the current time
current_time = datetime.now().strftime("%H:%M:%S")
st.write(f"Current Time: {current_time}")

# Add a hint about the rerun
st.write("This app will rerun in 5 seconds...")

# Sleep for 5 seconds before rerunning
time.sleep(5)
st.experimental_rerun()
3

Hi @tonykip ,
Thanks for the reply , in my case i cannot use st.experimental_rerun because when there is statement like “time.sleep(5)” the whole webpage will be inactive for that time, but in my webpage iam using filter option so that the user can filter the data which he cannot do if the webpage is in sleep

And coming to my use case i want the app to refresh itself even when it is in inactive mode so thats why iam using javascript here , i would be wonderfull if u guys can add this functionality to streamlit since we are developing multipage websites it should be independent on which page the user is and the autorefresh happens on the other page regardless.
This would be a great component for webapplications that have dynamic data in it

4

Absolutely, I get where you’re coming from. The only issue currently is that if the user is interacting with the filter option and the page refreshes then they lose all the filters. Also, there’s no separation currently on which pages get refreshed independently as the app gets rerun from top to bottom upon each interaction. I’d encourage you to propose this feature request in our GitHub repository for consideration.

5

Hi,

This component should solve your refresh problem.

Arvindra