How to stop page reload when button is clicked

Using Streamlit
, ,
1

this code displays a modal popup button when form is submitted.
i want to write or display the resultant name value inside the modal

here is my issue when i click on modal popup, the page got refreshed. please how do i stop the page from refreshing when modal is clicked. or what about caching the name values. can someone help me out. below is my code.


import streamlit as st
from streamlit_modal import Modal
import streamlit.components.v1 as components


st.write("# Welcome to Streamlit! ")

def process_data():

    st.info(name)
    if name:
        # This will never be executed.
        st.success(f'Data Successful.... {name}')
        modal = Modal(
            "Demo Modal", 
            key="demo-modal",
    
            # Optional
            padding=20,    # default value
            max_width=744  # default value
        )
        open_modal = st.button("Open")
        if open_modal:
            modal.open()

        if modal.is_open():
            with modal.container():
                # display name result
               st.success(f'Data Successful.... {name}')


name = st.text_input('Name')
st.button('Submit data', on_click=process_data)
2

What are you trying to accomplish with your modal? Streamlit’s model is to rerun when a user interacts with a widget. Streamlit now has st.popover and st.experimental_dialog that each run in a unique way, but it would help to know what workflow you are trying to achieve.

3

Thanks @mathcatsand forgetting back to me. I want when I opened modal to have the form submitted name values displayed inside the modal as per

`st.success(f'Data Successful.... {name}')`

How can I achieve that whether with st.popover or st.experimental_dialog

4

I’m not sure what process you want with the modal exactly, but as for name, you need to pass it into. Let’s try st.experimental_dialog:

import streamlit as st

@st.experimental_dialog("Submission")
def process_data (name):
    st.success(f'Data Successful.... {name}')

name = st.text_input("Name")
st.button("Submit data", on_click=process_data, args=[name])

Depending on what you’re doing, you may or may not want the dialog as a callback vs just nested inside the button. A dialog is a special kind of fragment. It’s an elaborate type of form which will rerun itself independently from the rest of the app and thus is a means of nesting interactive content inside a button.

5

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