R Shiny - Удаление пользовательского интерфейса с помощью jQuery и обработчика события onclick - PullRequest
Новая
       31

R Shiny - Удаление пользовательского интерфейса с помощью jQuery и обработчика события onclick

0 голосов
/ 11 февраля 2019

Приложение ниже содержит actionButton Add box, который создает поле при нажатии.Каждый блок имеет атрибут AdminLTE data-widget = "remove", поэтому в каждом блоке есть кнопка удаления, которая помещается в div box-tools в заголовке блока.

В данный момент нажатие кнопки «Удалить» для блока только скрывает поле, а не удаляет его из 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 безрезультатно.Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 11 февраля 2019

Вы добавляете обработчик события 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***
})

В вашем сценарииВы определяете функцию как «действие для выполнения», это ничего не выполняет.

...