Переключение формы горизонтального ввода и его метки с использованием brightjs - PullRequest
Новая
       36

Переключение формы горизонтального ввода и его метки с использованием brightjs

0 голосов
/ 26 июня 2019

Приложение ниже имеет два selectInputs (month_abbr и month_full) и checkboxInput (abbr). Я хотел бы скрыть month_abbr и его метку , когда abbr равно FALSE, и скрыть month_full и его метку , когда abbr равно TRUE. Я использую аргумент selector в shinyjs::toggle, чтобы выбрать каждый элемент формы, но селектор, который я использую $('#element').parent('.form-group'), не работает.

Я думал, что это может быть потому, что сами selectInputs имеют класс form-group (form-group shiny-input-container), поэтому, возможно, селектор выбирает только вход, а не тег метки, который я создал вручную в форме. Но, похоже, это не так, поскольку селектор не работает и для selectInputs.

Снимок экрана ниже показывает, что оба selectInputs видимы независимо от значения checkboxInput:

enter image description here

Приложение: 

library(shiny)
library(shinyjs)

ui<-shinyUI(
  fluidPage(
    useShinyjs(),
    tags$form(
      class = "form-horizontal", action="/action_page.php",

      div(
        class = 'form-group', 
        tags$label(class = 'control-label col-sm-2', `for` = 'month_abb', 'Month (abbr.)'),
        div(
          class = 'col-sm-4', 
          selectInput('month_abb', '', month.abb)
        )
      ), 

      div(
        class = 'form-group', 
        tags$label(class = 'control-label col-sm-2', `for` = 'month_full', 'Month (full)'),
        div(
          class = 'col-sm-4', 
          selectInput('month_full', '', month.name)
        )
      ), 

      checkboxInput('abbr', 'Abbreviated')

    )
  )
)

server<-function(input, output) {

  observe({

    toggle(selector = "$('#month_full').parent('.form-group')", condition = !input$abbr)

    toggle(selector = "$('#month_abbr').parent('.form-group')", condition = input$abbr)

  })

}


shinyApp(ui,server)

Другие селекторы, которые я пробовал:

  • $('#month_full').parentsUntil('form.form-horizontal') - Я не знаю, почему это не сработало?
  • $('#month_full input label') (пытается выбрать и вход, и метку).

Выбор только входа через его идентификатор (selector = "#month_full") скрывает selectInput, но не метку:

enter image description here

1 Ответ

0 голосов
/ 26 июня 2019

Если у вас есть только ограниченное количество элементов пользовательского интерфейса, которые вы хотите показать / скрыть, может быть проще просто присвоить div-элементам атрибут id и вызвать shinyjs::toggle с id вместо selector. Например, 

library(shiny)
library(shinyjs)

ui<- fluidPage(
    useShinyjs(),
    tags$form(
        class = "form-horizontal", action="/action_page.php",

        div(id = "div_month_abb",
            class = 'form-group', 
            tags$label(class = 'control-label col-sm-2', `for` = 'month_abb', 'Month (abbr.)'),
            div(
                class = 'col-sm-4', 
                selectInput('month_abb', '', month.abb)
            )
        ), 

        div(id = "div_month_full",
            class = 'form-group', 
            tags$label(class = 'control-label col-sm-2', `for` = 'month_full', 'Month (full)'),
            div(
                class = 'col-sm-4', 
                selectInput('month_full', '', month.name)
            )
        ), 

        checkboxInput('abbr', 'Abbreviated')

    )
)

server<-function(input, output) {

  observe({

       toggle(id = "div_month_abb", condition = input$abbr)

       toggle(id = "div_month_full", condition = !input$abbr)

      })
}


shinyApp(ui,server)
...