更新模态框界面，然后打开模态框。

huangapple
go评论90阅读模式
英文:

update modal UI before opening the modal

问题

The Chinese translation of the provided text is as follows:

从第二次点击打开模态框的按钮开始，模态框首先显示旧数据，然后触发渲染函数的更新。

"Is there a smart way to first update the modal UI and only afterwards opening the modal? I am looking for a way that the modal does not show outdated data before it gets refreshed."

英文:

From the second time on when you click the button that opens the modal the modal opens showing the old data at first and then the update of the render-function is triggered.

  1. library(shiny)
  3. showMyModal <- function() {
  4.   showModal(
  5.     modalDialog(
  6.       verbatimTextOutput("mytext"),
  7.       footer = tagList(
  8.         modalButton("Dismiss"),
  9.       )
  10.     )
  11.   )
  12. }
  14. ui <- fluidPage(
  15.   actionButton("openDialog", "Open dialog")
  16. )
  18. server <- function(input, output, session) {
  19.   
  20.   observeEvent(input$openDialog, {
  21.     showMyModal()
  22.   })
  23.   
  24.   output$mytext <- renderPrint({
  25.     input$openDialog
  26.   })
  27.   
  28. }
  30. shinyApp(ui = ui, server = server)

Is there a smart way to first update the modal UI and only afterwards opening the modal? I am looking for a way that the modal does not show outdated data before it gets refreshed.

答案1

得分: 1

这是利用我之前的答案这里的方法。

以下部分阻止显示您的modalDialog，直到模态框已经（重新）渲染：

  1. library(shiny)
  3. showMyModal <- function() {
  4.   showModal(
  5.     conditionalPanel("input.modal_visible == true",
  6.                      modalDialog(
  7.                        verbatimTextOutput("mytext"),
  8.                        footer = tagList(
  9.                          modalButton("Dismiss"),
  10.                        )
  11.                      )
  12.     )
  13.   )
  14. }
  16. ui <- fluidPage(
  17.   tags$script(HTML(
  18.     "$(document).on('shown.bs.modal','#shiny-modal', function () {
  19.        Shiny.setInputValue(id = 'modal_visible', value = true);
  20.       });
  21.      $(document).on('hidden.bs.modal','#shiny-modal', function () {
  22.        Shiny.setInputValue(id = 'modal_visible', value = false);
  23.      });"
  24.   )),
  25.   actionButton("openDialog", "Open dialog")
  26. )
  28. server <- function(input, output, session) {
  29.   observeEvent(input$openDialog, {
  30.     showMyModal()
  31.   })
  32.   
  33.   output$mytext <- renderPrint({
  34.     input$openDialog
  35.   })
  36. }
  38. shinyApp(ui = ui, server = server)
英文:

This is an approach utilizing my earlier answer here.

The following is blocking the display of your modalDialog until the modal has been (re)rendered:

  1. library(shiny)
  3. showMyModal &lt;- function() {
  4.   showModal(
  5.     conditionalPanel(&quot;input.modal_visible == true&quot;,
  6.                      modalDialog(
  7.                        verbatimTextOutput(&quot;mytext&quot;),
  8.                        footer = tagList(
  9.                          modalButton(&quot;Dismiss&quot;),
  10.                        )
  11.                      )
  12.     )
  13.   )
  14. }
  16. ui &lt;- fluidPage(
  17.   tags$script(HTML(
  18.     &quot;$(document).on(&#39;shown.bs.modal&#39;,&#39;#shiny-modal&#39;, function () {
  19.        Shiny.setInputValue(id = &#39;modal_visible&#39;, value = true);
  20.       });
  21.      $(document).on(&#39;hidden.bs.modal&#39;,&#39;#shiny-modal&#39;, function () {
  22.        Shiny.setInputValue(id = &#39;modal_visible&#39;, value = false);
  23.      });&quot;
  24.   )),
  25.   actionButton(&quot;openDialog&quot;, &quot;Open dialog&quot;)
  26. )
  28. server &lt;- function(input, output, session) {
  29.   observeEvent(input$openDialog, {
  30.     showMyModal()
  31.   })
  32.   
  33.   output$mytext &lt;- renderPrint({
  34.     input$openDialog
  35.   })
  36. }
  38. shinyApp(ui = ui, server = server)

huangapple
  • 本文由 发表于 2023年4月19日 21:32:51
  • 转载请务必保留本文链接：https://go.coder-hub.com/76055175.html
  • r
  • shiny
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定