如何使用shinyjs获取可点击的
元素的ID?

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

Hot to use shinyjs to get the id of a clickable <div> element?

问题

以下是您要翻译的内容:

"I'm making a ShinyApp that uses plain HTML to order clickable <div> sub-elements inside another <div> element.

I want the click event on the sub-elements to trigger a reactiveVal() in my server logic. I could do so by using shinyjs::onclick("&lt;div&gt;.id", reactiveVal(id)), but I would appreciate a better way of using the .id attribute of my sub&lt;div&gt; to directly modify my reactiveVal(), hopefully saving my from writing 118 onclick()s...

Below is the MWE of what I tried so far:

  1. library(shiny)
  2. library(shinyjs)
  3. ui <- fluidPage(
  4. useShinyjs(),
  5. fluidRow(
  6. column(
  7. 2, offset = 1, h3('List of elements:'),
  8. HTML(
  9. '<div class = "periodic-table">
  10. <div class = "element" style = "cursor: pointer;" id = "Hydrogen"> Hydrogen </div>
  11. <div class = "element" style = "cursor: pointer;" id = "Helium"> Helium </div>
  12. <div class = "element" style = "cursor: pointer;" id = "Lithium"> Lithium </div>
  13. ... <br> (115 more chemical elements)
  14. </div>'
  15. )
  16. ),
  17. column(2, h3('Selected element:'), textOutput('SelectedElem'))
  18. )
  19. )
  20. server <- function(input, output, session, devMode = TRUE) {
  21. SelectedElem <- reactiveVal()
  22. onclick("Hydrogen", SelectedElem("Hydrogen"))
  23. onclick("Helium", SelectedElem("Helium"))
  24. onclick("Lithium", SelectedElem("Lithium"))
  25. output$SelectedElem <- renderText(SelectedElem())
  26. }
  27. shinyApp(ui = ui, server = server, enableBookmarking = "URL")

Desired behaviour:

如何使用shinyjs获取可点击的<div>元素的ID?

英文:

I'm making a ShinyApp that uses plain HTML to order clickable &lt;div&gt; sub-elements inside another &lt;div&gt; element.

I want the click event on the sub-elements to trigger a reactiveVal() in my server logic. I could do so by using shinyjs::onclick(&quot;&lt;div&gt;.id&quot;, reactiveVal(id)), but I would appreciate a better way of using the .id attribute of my sub&lt;div&gt; to directly modify my reactiveVal(), hopefully saving my from writting 118 onclick()s...

Below is the MWE of what I tried so far:

  1. library(shiny)
  2. library(shinyjs)
  3. ui &lt;- fluidPage(
  4. useShinyjs(),
  5. fluidRow(
  6. column(
  7. 2, offset = 1, h3(&#39;List of elements:&#39;),
  8. HTML(
  9. &#39;&lt;div class = &quot;periodic-table&quot;&gt;
  10. &lt;div class = &quot;element&quot; style = &quot;cursor: pointer;&quot; id = &quot;Hydrogen&quot;&gt; Hydrogen &lt;/div&gt;
  11. &lt;div class = &quot;element&quot; style = &quot;cursor: pointer;&quot; id = &quot;Helium&quot;&gt; Helium &lt;/div&gt;
  12. &lt;div class = &quot;element&quot; style = &quot;cursor: pointer;&quot; id = &quot;Lithium&quot;&gt; Lithium &lt;/div&gt;
  13. ... &lt;br&gt; (115 more chemical elements)
  14. &lt;/div&gt;&#39;
  15. )
  16. ),
  17. column(2, h3(&#39;Selected element:&#39;), textOutput(&#39;SelectedElem&#39;))
  18. )
  19. )
  20. server &lt;- function(input, output, session, devMode = TRUE) {
  21. SelectedElem &lt;- reactiveVal()
  22. onclick(&quot;Hydrogen&quot;, SelectedElem(&quot;Hydrogen&quot;))
  23. onclick(&quot;Helium&quot;, SelectedElem(&quot;Helium&quot;))
  24. onclick(&quot;Lithium&quot;, SelectedElem(&quot;Lithium&quot;))
  25. output$SelectedElem &lt;- renderText(SelectedElem())
  26. }
  27. shinyApp(ui = ui, server = server, enableBookmarking = &quot;URL&quot;)

Desired behaviour:
> 如何使用shinyjs获取可点击的<div>元素的ID?

答案1

得分: 1

Essentially, what you want to do is add an event listener to each of these divs that will update a common input. This can be accomplished with the javascript function Shiny.onInputChange (documentation).

There are multiple ways to add the event listener but this is one approach. In a separate file (in this case I'll use "www/sendID.js"):

  1. $(document).ready(function() {
  2. const elements = document.querySelectorAll('.element')
  3. elements.forEach(element => {
  4. element.addEventListener('click', () => Shiny.onInputChange("selected", element.id))
  5. })
  6. })

Then update your UI to include this script:

  1. ui <- fluidPage(
  2. useShinyjs(),
  3. fluidRow(
  4. column(
  5. 2, offset = 1, h3('List of elements:'),
  6. HTML(
  7. '<div class="periodic-table">
  8. <div class="element" style="cursor: pointer;" id="Hydrogen"> Hydrogen </div>
  9. <div class="element" style="cursor: pointer;" id="Helium"> Helium </div>
  10. <div class="element" style="cursor: pointer;" id="Lithium"> Lithium </div>
  11. ... <br> (115 more chemical elements)
  12. </div>'
  13. )
  14. ),
  15. column(2, h3('Selected element:'), textOutput('SelectedElem'))
  16. ),
  17. includeScript("www/sendID.js")
  18. )

Then in the server, you will only need to listen for a single input:

  1. server <- function(input, output, session, devMode = TRUE) {
  2. output$SelectedElem <- renderText(input$selected)
  3. }
英文:

Essentially, what you want to do is add an event listener to each of these divs that will update a common input. This can be accomplished with the javascrip function Shiny.onInputChange(documentation).

There are multiple ways to add the event listener but this is one approach. In a separate file (in this case I'll use "www/sendID.js"):

  1. $(document).ready(function() {
  2. const elements = document.querySelectorAll(&#39;.element&#39;)
  3. elements.forEach(element =&gt; {
  4. element.addEventListener(&#39;click&#39;, () =&gt; Shiny.onInputChange(&quot;selected&quot;, element.id))
  5. })
  6. })

Then update your UI to include this script:

  1. ui &lt;- fluidPage(
  2. useShinyjs(),
  3. fluidRow(
  4. column(
  5. 2, offset = 1, h3(&#39;List of elements:&#39;),
  6. HTML(
  7. &#39;&lt;div class = &quot;periodic-table&quot;&gt;
  8. &lt;div class = &quot;element&quot; style = &quot;cursor: pointer;&quot; id = &quot;Hydrogen&quot;&gt; Hydrogen &lt;/div&gt;
  9. &lt;div class = &quot;element&quot; style = &quot;cursor: pointer;&quot; id = &quot;Helium&quot;&gt; Helium &lt;/div&gt;
  10. &lt;div class = &quot;element&quot; style = &quot;cursor: pointer;&quot; id = &quot;Lithium&quot;&gt; Lithium &lt;/div&gt;
  11. ... &lt;br&gt; (115 more chemical elements)
  12. &lt;/div&gt;&#39;
  13. )
  14. ),
  15. column(2, h3(&#39;Selected element:&#39;), textOutput(&#39;SelectedElem&#39;))
  16. ),
  17. includeScript(&quot;www/sendID.js&quot;)
  18. )

Then in the server you will only need to listen for a single input

  1. server &lt;- function(input, output, session, devMode = TRUE) {
  2. output$SelectedElem &lt;- renderText(input$selected)
  3. }

huangapple
  • 本文由 发表于 2023年2月18日 01:13:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/75487336.html
匿名

发表评论

匿名网友

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

确定