2016-12-30 3 views
1

私は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) 
     }) 
     }) 

答えて

1

私はこれが何をしたいと思います。これはh3' element with the colorLabel`のinnerhtmlを編集します。また、対応する空の初期化要素をuiコードに追加して、編集するものがあるようにしました。

enter image description here

をそして、これは内部的に編集されているものです::

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) 

enter image description here

関連する問題