modalDialog 在单击相同行后不会打开 reactable

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

modalDialog not opening after clicking on the same row in reactable

问题

我目前正在构建一个Shiny应用程序，用户可以在reactable中点击一行，并显示一个modalDialog，其中包含基于该行的更多信息。我遵循了这篇帖子（https://stackoverflow.com/questions/69593193/how-to-trigger-a-modalbox-with-observeevent-from-a-cell-rendered-button-in-a-rea）中的方法来获取onclick JavaScript函数。

然而，当我使用这个逻辑点击同一行时，没有任何反应。我必须在再次点击相同的行之前先点击另一行。我相信这是因为如果点击的是同一行，input$foo的值不会改变。

我尝试过在打开modalDialog时将input$foo设置为不同的值，但这也没有起作用。有谁知道如何解决这个问题或在打开后重置input$foo的值？我在JavaScript方面经验有限。下面是一个基本的Shiny示例，在单击特定行后，modalDialog的标题显示汽车名称。

  1. library(shiny)
  2. library(tidyverse)
  3. library(reactable)
  5. ui <- fluidPage(
  6.   fluidRow(
  7.     column(12, align = 'center', reactableOutput("tbl"))
  8.   )
  9. )
  11. server <- function(input, output, session) {
  13.   data = reactive({
  14.     mtcars %>% add_rownames('car')
  15.   })
  17.   output$tbl = renderReactable(
  18.     reactable(
  19.       data(),
  20.       defaultPageSize = 10,
  21.       compact = T,
  22.       highlight = T,
  23.       defaultColDef = colDef(headerClass = "bar-sort-header",
  24.                              sortNALast = T, align = 'center',
  25.                              headerVAlign = 'center',
  26.                              vAlign = 'center',
  27.                              minWidth = 60
  28.       ),
  29.       onClick = JS("function(rowInfo, colInfo) {
  30.                               Shiny.setInputValue('foo', rowInfo.id)
  31.                             }"),
  32.       rowStyle = list(cursor = "pointer")
  33.     )
  34.   )
  36.   observeEvent(input$foo, {
  37.     print(input$foo)
  38.     showModal(
  39.       modalDialog(
  40.         size = 'l',
  41.         easyClose = T,
  42.         title = data()$car[as.numeric(input$foo)+1],
  43.       )
  44.     )
  45.   })
  47. }
  49. shinyApp(ui = ui, server = server)
英文:

I am currently building a Shiny app where I'd allow a user to click on a row in a reactable and show a modalDialog with more info based on that row. I followed this post (https://stackoverflow.com/questions/69593193/how-to-trigger-a-modalbox-with-observeevent-from-a-cell-rendered-button-in-a-rea) to get the onclick JavaScript function.

However, when I click on the same row using this logic, nothing happens. I have to click on another row before I click back to that same row. I believe it's because input$foo does not change its value if the same row is being clicked.

I've tried setting input$foo to a different value when the modalDialog opens, but that has not been working either. Does anyone know how to work around this or reset that input$foo value after opening? I don't have a ton of experience in JavaScript. A basic Shiny example is shown below where the title of modalDialog displays the car name after clicking on the specific row.

  1. library(shiny)
  2. library(tidyverse)
  3. library(reactable)
  5. ui &lt;- fluidPage(
  6.   fluidRow(
  7.     column(12, align = &#39;center&#39;,reactableOutput(&quot;tbl&quot;))
  8.     )
  9. )
  12. server &lt;- function(input, output, session) {
  13.   
  14.   data = reactive({
  15.     mtcars %&gt;% add_rownames(&#39;car&#39;)
  16.   })
  17.   
  18.   output$tbl = renderReactable(
  19.     reactable(
  20.       data(),
  21.       defaultPageSize = 10,
  22.       compact = T,
  23.       highlight = T,
  24.       defaultColDef = colDef(headerClass = &quot;bar-sort-header&quot;,
  25.                              sortNALast = T, align = &#39;center&#39;,
  26.                              headerVAlign = &#39;center&#39;,
  27.                              vAlign = &#39;center&#39;,
  28.                              minWidth = 60
  29.       ),
  30.       onClick = JS(&quot;function(rowInfo, colInfo) {
  31.                               Shiny.setInputValue(&#39;foo&#39;, rowInfo.id)
  32.                             }&quot;),
  33.       rowStyle = list(cursor = &quot;pointer&quot;)
  34.     )
  35.   )
  36.   
  37.   observeEvent(input$foo, {
  38.     print(input$foo)
  39.     showModal(
  40.       modalDialog(
  41.         size = &#39;l&#39;,
  42.         easyClose = T,
  43.         title = data()$car[as.numeric(input$foo)+1],
  44.       )
  45.     )
  46.   })
  47.   
  48. }
  50. shinyApp(ui = ui, server = server)

答案1

得分: 3

以下是代码部分的翻译：

  1. library(shiny)
  2. library(tidyverse)
  3. library(reactable)
  5. ui &lt;- fluidPage(
  6.   
  7.   tags$head(
  8.     tags$script(
  9.     &quot;Shiny.addCustomMessageHandler(&#39;update_input_foo&#39;, function(value) {
  10.       Shiny.setInputValue(&#39;foo&#39;, null)
  11.     });
  12.     &quot;)
  13.   ),
  14.   
  15.   fluidRow(
  16.     column(12, align = &#39;center&#39;,reactableOutput(&quot;tbl&quot;))
  17.   )
  18. )
  21. server &lt;- function(input, output, session) {
  22.   
  23.   data = reactive({
  24.     mtcars %&gt;% add_rownames(&#39;car&#39;)
  25.   })
  26.   
  27.   output$tbl = renderReactable(
  28.     reactable(
  29.       data(),
  30.       defaultPageSize = 10,
  31.       compact = T,
  32.       highlight = T,
  33.       defaultColDef = colDef(headerClass = &quot;bar-sort-header&quot;,
  34.                              sortNALast = T, align = &#39;center&#39;,
  35.                              headerVAlign = &#39;center&#39;,
  36.                              vAlign = &#39;center&#39;,
  37.                              minWidth = 60
  38.       ),
  39.       onClick = JS(&quot;function(rowInfo, colInfo) {
  40.                               Shiny.setInputValue(&#39;foo&#39;, rowInfo.id)
  41.                             }&quot;),
  42.       rowStyle = list(cursor = &quot;pointer&quot;)
  43.     )
  44.   )
  45.   
  46.   r &lt;- reactiveVal(NULL)
  47.   
  48.   observeEvent(input$foo, {
  49.     
  50.     if (!is.null(input$foo)) {
  51.     showModal(
  52.       modalDialog(
  53.         size = &#39;l&#39;,
  54.         easyClose = T,
  55.         title = data()$car[as.numeric(input$foo)+1],
  56.       )
  57.     )
  58.     
  59.     session$sendCustomMessage(&quot;update_input_foo&quot;, 1)
  61.     }
  62.   })
  64. }
  66. shinyApp(ui = ui, server = server)
英文:

I also run into this problem a lot and my approach is to set the input$foo to null after calling showModal so we can click again on the same row:

  1. library(shiny)
  2. library(tidyverse)
  3. library(reactable)
  5. ui &lt;- fluidPage(
  6.   
  7.   tags$head(
  8.     tags$script(
  9.     &quot;Shiny.addCustomMessageHandler(&#39;update_input_foo&#39;, function(value) {
  10.       Shiny.setInputValue(&#39;foo&#39;, null)
  11.     });
  12.     &quot;)
  13.   ),
  14.   
  15.   fluidRow(
  16.     column(12, align = &#39;center&#39;,reactableOutput(&quot;tbl&quot;))
  17.   )
  18. )
  21. server &lt;- function(input, output, session) {
  22.   
  23.   data = reactive({
  24.     mtcars %&gt;% add_rownames(&#39;car&#39;)
  25.   })
  26.   
  27.   output$tbl = renderReactable(
  28.     reactable(
  29.       data(),
  30.       defaultPageSize = 10,
  31.       compact = T,
  32.       highlight = T,
  33.       defaultColDef = colDef(headerClass = &quot;bar-sort-header&quot;,
  34.                              sortNALast = T, align = &#39;center&#39;,
  35.                              headerVAlign = &#39;center&#39;,
  36.                              vAlign = &#39;center&#39;,
  37.                              minWidth = 60
  38.       ),
  39.       onClick = JS(&quot;function(rowInfo, colInfo) {
  40.                               Shiny.setInputValue(&#39;foo&#39;, rowInfo.id)
  41.                             }&quot;),
  42.       rowStyle = list(cursor = &quot;pointer&quot;)
  43.     )
  44.   )
  45.   
  46.   r &lt;- reactiveVal(NULL)
  47.   
  48.   observeEvent(input$foo, {
  49.     
  50.     if (!is.null(input$foo)) {
  51.     showModal(
  52.       modalDialog(
  53.         size = &#39;l&#39;,
  54.         easyClose = T,
  55.         title = data()$car[as.numeric(input$foo)+1],
  56.       )
  57.     )
  58.     
  59.     session$sendCustomMessage(&quot;update_input_foo&quot;, 1)
  61.     }
  62.   })
  64. }
  66. shinyApp(ui = ui, server = server)

答案2

得分: 2

以下是您要翻译的代码部分：

  1. library(shiny)
  2. library(tidyverse)
  3. library(reactable)
  5. ui <- fluidPage(
  6.   fluidRow(
  7.     column(12, align = 'center', reactableOutput("tbl"))
  8.   )
  9. )
  11. server <- function(input, output, session) {
  13.   data = reactive({
  14.     mtcars %>% tibble::rownames_to_column('car')
  15.   })
  17.   output$tbl = renderReactable(
  18.     reactable(
  19.       data(),
  20.       defaultPageSize = 10,
  21.       compact = T,
  22.       highlight = T,
  23.       defaultColDef = colDef(headerClass = "bar-sort-header",
  24.                              sortNALast = T, align = 'center',
  25.                              headerVAlign = 'center',
  26.                              vAlign = 'center',
  27.                              minWidth = 60
  28.       ),
  29.       onClick = JS("function(rowInfo, colInfo) {
  30.                               Shiny.setInputValue('foo', {id:rowInfo.id, nonce:Math.random()})
  31.                              }"),
  32.       rowStyle = list(cursor = "pointer")
  33.     )
  34.   )
  36.   observeEvent(input$foo, {
  37.     print(input$foo)
  39.     id <- input$foo$id
  40.     row_nr <- as.numeric(id) + 1
  42.     showModal(
  43.       modalDialog(
  44.         size = 'l',
  45.         easyClose = T,
  46.         title = data()$car[row_nr]
  47.       )
  48.     )
  49.   })
  51. }
  53. shinyApp(ui = ui, server = server)
英文:

I run into this problem a lot as well, here is a simpler approach with a random value sent each time when the row is clicked.

  1. library(shiny)
  2. library(tidyverse)
  3. library(reactable)
  4. ui &lt;- fluidPage(
  5. fluidRow(
  6. column(12, align = &#39;center&#39;,reactableOutput(&quot;tbl&quot;))
  7. )
  8. )
  9. server &lt;- function(input, output, session) {
  10. data = reactive({
  11. mtcars %&gt;% tibble::rownames_to_column(&#39;car&#39;)
  12. })
  13. output$tbl = renderReactable(
  14. reactable(
  15. data(),
  16. defaultPageSize = 10,
  17. compact = T,
  18. highlight = T,
  19. defaultColDef = colDef(headerClass = &quot;bar-sort-header&quot;,
  20. sortNALast = T, align = &#39;center&#39;,
  21. headerVAlign = &#39;center&#39;,
  22. vAlign = &#39;center&#39;,
  23. minWidth = 60
  24. ),
  25. onClick = JS(&quot;function(rowInfo, colInfo) {
  26. Shiny.setInputValue(&#39;foo&#39;, {id:rowInfo.id, nonce:Math.random()})
  27. }&quot;),
  28. rowStyle = list(cursor = &quot;pointer&quot;)
  29. )
  30. )
  31. observeEvent(input$foo, {
  32. print(input$foo)
  33. id &lt;- input$foo$id
  34. row_nr &lt;- as.numeric(id)+1
  35. showModal(
  36. modalDialog(
  37. size = &#39;l&#39;,
  38. easyClose = T,
  39. title = data()$car[row_nr],
  40. )
  41. )
  42. })
  43. }
  44. shinyApp(ui = ui, server = server)

huangapple
  • 本文由 发表于 2023年2月23日 21:31:29
  • 转载请务必保留本文链接：https://go.coder-hub.com/75545530.html
  • modal-dialog
  • r
  • reactable
  • shiny
匿名

发表评论

匿名网友

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

确定