【问题标题】:How to dynamically append a string text to the body of a shiny app?如何动态地将字符串文本附加到闪亮应用程序的正文中?
【发布时间】:2017-05-14 23:35:54
【问题描述】:

我正在尝试在tags$h3 之后将反应文本(来自selectInput 的颜色名称)附加到闪亮应用程序的主体。我想这更像是一个 jquery 问题,但现在它一直在添加选定的颜色,而不是“反应地”显示字符串。

我想要的是替换 h3.colorLabel 中的字符串。

ui.R

library(shiny)
jsCode <- "shinyjs.pageCol = function(params){
$('body').css('background', params);
/*$('.colorName').after('<h3></h3>').addClass('colorLabel');
$('h3.colorLabel').replaceWith('<h3>'+params+'</h3>').addClass('colorLabel');
*/
$('h3.colorName').after('<h3>'+params+'</h3>').addClass('colorLabel');
};
"

shinyUI( fluidPage(
  useShinyjs(),
  extendShinyjs(text = jsCode),
  selectInput("col", "Colour:",
              c("white", "yellow", "red", "blue", "purple")),
  tags$h3('Just in case you are color-blind, the background color is:', class='colorName')
))

server.R

library(shiny)
library(shinyjs)

shinyServer(


    function(input,output,session) {

      observeEvent(input$col, {
         js$pageCol(input$col)
       })
      })

【问题讨论】:

    标签: javascript jquery r shiny shinyjs


    【解决方案1】:

    我想这就是你想要的。它编辑 h3' element with thecolorLabel` 类的 innerhtml。我还在 ui 代码中添加了一个对应的空初始化元素,以便可以编辑一些内容。

    library(shiny)
    library(shinyjs)
    
    jsCode <- "shinyjs.pageCol = function(params){
    $('body').css('background', params);
    $('h3.colorLabel').text(params); 
    };
    "
    
    u <- shinyUI(fluidPage(
      useShinyjs(),
      extendShinyjs(text = jsCode),
      selectInput("col","Colour:",
                  c("white","yellow","red","blue","purple")),
      tags$h3('Just in case you are color-blind, the background color is:',class ='colorName'),
      tags$h3('',class = 'colorLabel')
    ))
    
    
    s <- shinyServer(
    
    
      function(input,output,session) {
    
        observeEvent(input$col, {
          js$pageCol(input$col)
        })
      })
    shinyApp(ui = u,server = s)
    

    屈服:

    这是内部正在编辑的内容:

    【讨论】:

      猜你喜欢
      • 2016-08-03
      • 2018-06-16
      • 1970-01-01
      • 2014-02-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-09-09
      • 2017-12-22
      相关资源
      最近更新 更多