Update st.markdown on a button click

Using Streamlit
1

Hi,
In my Streamlit app, I have initialized st.markdown with the following code:

    f_src = "./data/SamplePDF.pdf"
    with open(f_src, "rb") as f:
        base64_pdf = base64.b64encode(f.read()).decode("utf-8")
    pdf_display = f"""
    <iframe
        src="data:application/pdf;base64,{base64_pdf}"
        width="100%" height="500"
        type="application/pdf"
        style="min-width: 400px;"
    > </iframe>
    """
    st.markdown(pdf_display, unsafe_allow_html=True)

Now, the app is asking user to enter the path of a PDF file in a st.text_input field and there is a st.button which will show this PDF file in the aforementioned st.markdown.
I am trying to update st.markdown in the button’s on_click function but it is not updating. Below is the code of button:

    # preview answer pdf button
    st.button(label="Preview Answer PDF", type="secondary", on_click=button_preview_answer_pdf, args=(st_markdown,), use_container_width=True)

And below is the button_preview_answer_pdf() function:

# function to preview answer PDF
def button_preview_answer_pdf(st_markdown):
    global pdf_display
    # get the path of answer PDF
    answer_pdf_path = st.session_state['save_text_input_answer_pdf_path']
    # check if file exists or not
    if(os.path.exists(answer_pdf_path) == True):
        # convert the pdf to base64
        with open(answer_pdf_path, "rb") as f:
            base64_pdf = base64.b64encode(f.read()).decode("utf-8")
        pdf_display = f"""
        <iframe
            src="data:application/pdf;base64,{base64_pdf}"
            width="100%" height="500"
            type="application/pdf"
            style="min-width: 400px;"
        > </iframe>
        """
        # display the pdf
        #st_markdown.markdown(pdf_display, unsafe_allow_html=True)
    else: # notify user that the file doesn't exists
        st.toast("Entered PDF file doesn't exist", icon="🟠")

Since st.markdown doesn’t have key attribute, thus I am finding it very hard. I tried with st.empty, global variable approach, passing an object of st.markdown as an argument to the on_click function, but nothing worked so far.

Any help regarding this would be extremely appricated.

Thanks!

2

Hello something like this will work ?

        sample_pdf = SAMPLE/PATH/PDF
        user_pdf = USER/PATH/PDF
        
        if "path_pdf" not in st.session_state:
            st.session_state['path_pdf'] = sample_pdf

        # function to preview answer PDF
        def button_preview_answer_pdf():

            # get the path of answer PDF
            answer_pdf_path = st.session_state['path_pdf']
            # check if file exists or not
            if (os.path.exists(answer_pdf_path) == True):
                # convert the pdf to base64
                with open(answer_pdf_path, "rb") as f:
                    base64_pdf = base64.b64encode(f.read()).decode("utf-8")
                pdf_display = f"""
                <iframe
                    src="data:application/pdf;base64,{base64_pdf}"
                    width="100%" height="500"
                    type="application/pdf"
                    style="min-width: 400px;"
                > </iframe>
                """
                # display the pdf
                st.markdown(pdf_display, unsafe_allow_html=True)
            else:  # notify user that the file doesn't exists
                st.toast("Entered PDF file doesn't exist", icon="🟠")

        # display the button
        if st.button(label="Preview Answer PDF", type="secondary", use_container_width=True):
            st.session_state['path_pdf'] = user_pdf
            st.rerun()

        button_preview_answer_pdf()
3

Thanks @Faltawer for your quick response.
Your code worked but it reloaded the entire application. This is not the intended solution. As per your code, I am trying to find out a way of using st.rerun() with fragment containing only st.markdown so that only that part of app gets loaded.
Thanks a lot!