R Shiny - 使用jQuery和onclick事件处理程序删除UI

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了R Shiny - 使用jQuery和onclick事件处理程序删除UI相关的知识,希望对你有一定的参考价值。

下面的应用程序包含一个actionButton Add box,它在单击时创建一个框。每个框都有一个AdminLTE data-widget = "remove"属性,因此每个框都有一个删除按钮,该按钮放在box-header中的box-tools div中。

目前,单击框的删除按钮仅隐藏框而不是从DOM中删除它。我试过下面的jQuery函数:

$('[data-widget = "remove"]').click(function() {
                function removeBox (obj) {
                $(obj).closest('.newbox').remove();

                })

从我在remove按钮标签中放置的onclick处理程序调用..(请参阅server.R),但这似乎不起作用。

这是可重现的代码:

长子。 R:

require(shinydashboard)
require(shinyjs)


# HEADER
header <- dashboardHeader()

# SIDEBAR
sidebar <- dashboardSidebar(

  tags$head(
    tags$script("

                $('[data-widget = "remove"]').click(function() {
                function removeBox (obj) {
                $(obj).closest('.newbox').remove();

                })


                ")
    ))

# BODY
body <- dashboardBody(shinyjs::useShinyjs(),

                      box(title = "Months", status = "primary", width = 12, solidHeader = T, background = "navy",
                          tags$div(id = 'add'),
                          tags$div(class = "pull-right",
                                   actionButton("addbox", "Add box")
                                   )
                          )
                      )


ui = dashboardPage(header, sidebar, body, shinyFeedback::useShinyFeedback())

server.R

server = function(input, output, session) {


  observeEvent(input$addbox, {
    id = paste0('box', input$addbox)
    insertUI(
      selector = '#add',
      ui = tags$div(class = "newbox",
                    id = id,
                    box(width = 12,
                        solidHeader = T,
                        title = div(h4(class = "box-title", paste("Month", input$addbox),
                                    div(class = "box-tools",
                                        tags$button(class = "btn btn-box-tool",
                                                    onclick = "removeBox(this)",
                                                    `data-widget` = "remove",
                                                    shiny::icon("remove")
                                                    )
                                        )
                                    ),

                                    selectizeInput(id, "Month name:", choices = month.name)

                                    )

                        ) #end tags$div
                    )
      )
    }) #end observeEvent


  } #end server

我哪里错了?我想我可能使用了一个不正确的选择器('[data-widget = "remove"]'),但我尝试了.btn.btn-box-tool无济于事。任何帮助将不胜感激。

答案

使用按钮的onclick属性添加onclick事件处理程序。所以你不需要添加另一个。只需使用此脚本:

  tags$head(
    tags$script("
function removeBox(obj) {
  $(obj).closest('.newbox').remove();
}")
    )
  )

就是这样。无需设置data-widget属性。

你想要使用的脚本很奇怪:

$('[data-widget = "remove"]').click(function() {
  function removeBox (obj) { ......

结构是

$('[data-widget = "remove"]').click(function() {
 ***action to perform when the user clicks***
})

在您的脚本中,您将函数定义为“要执行的操作”,这不会执行任何操作。

以上是关于R Shiny - 使用jQuery和onclick事件处理程序删除UI的主要内容,如果未能解决你的问题,请参考以下文章

使用 D3 和 Shiny 在 R 中实现 `identify()`

使用 R 和 Shiny 的带有子类别的下拉菜单

R: Shiny - 更新 dateRangeInput 开始和结束

R shiny教程-2:布局用户界面

R + Shiny 哪个锤子?直的 Shiny、flexdashboard 还是 shinydashboard? [关闭]

如何使用 DT、R 和 Shiny 在表格的单元格中嵌入图像