R Shiny - 使用 jQuery 和 onclick 事件处理程序删除 UI
R Shiny - Removing UI using jQuery and onclick event handler
下面的应用程序包含一个 actionButton Add box
,单击它会创建一个框。每个盒子都有一个 AdminLTE data-widget = "remove"
属性,所以每个盒子都有一个删除按钮,放在 box-tools div 中 box-header。
目前,单击框的删除按钮只会隐藏框,而不是将其从 DOM 中删除。我尝试了下面的 jQuery 函数:
$('[data-widget = \"remove\"]').click(function() {
function removeBox (obj) {
$(obj).closest('.newbox').remove();
})
..这是从我放置在删除按钮标记中的 onclick 处理程序调用的(参见 server.R),但这似乎不起作用。
这是可重现的代码:
ui.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***
})
在您的脚本中,您将一个函数定义为"action to perform",它不执行任何操作。
下面的应用程序包含一个 actionButton Add box
,单击它会创建一个框。每个盒子都有一个 AdminLTE data-widget = "remove"
属性,所以每个盒子都有一个删除按钮,放在 box-tools div 中 box-header。
目前,单击框的删除按钮只会隐藏框,而不是将其从 DOM 中删除。我尝试了下面的 jQuery 函数:
$('[data-widget = \"remove\"]').click(function() {
function removeBox (obj) {
$(obj).closest('.newbox').remove();
})
..这是从我放置在删除按钮标记中的 onclick 处理程序调用的(参见 server.R),但这似乎不起作用。
这是可重现的代码:
ui.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***
})
在您的脚本中,您将一个函数定义为"action to perform",它不执行任何操作。