Shiny semantic Ui elements in renderUI

问题

This question is based on my previous about adding ui semantic elements in shiny apps. Here the links, to recent questions:

Rating Stars in R shiny app, How to flip up shapes in shiny by clicking a button?

I am able to display rating stars and shapes if they are constructed directly in UI.R. However, I need them within a renderUi, since I have a login page and use observe for the UI.

Here example code:

Ui.R:

shinyUI(semanticPage(
  shinyjs::useShinyjs()
  ,uiOutput("test")))

Server.R:

library(shiny)
library(shinyjs)
library(shiny.semantic)
library(highlighter)
jsCode <- "
$('.shape').shape();
$('.ui.rating') .rating({});
"


shinyServer(function(input, output) {
    runjs(jsCode)
    output$test <- renderUI({
      tagList(
      div(class="ui shape",
          div(class="sides",
              div(class="ui header side active","This side starts visible."),
              div(class="ui header side","This is yet another side"),
              div(class="ui header side","This is the last side"),
              div(class="ui header side",div(class="ui star rating"))
          )
      ),
      tags$button(id="test", class="ui button", "Flip", onclick="$('.shape').shape('flip up');")
      )
    })

})

Problem is, that rating stars are not displayed in the app, if I put them inside a render UI. How can I fix this?

回答1:

You can do:

  output$test <- renderUI({
    tagList(
      div(class="ui shape",
          div(class="sides",
              div(class="ui header side active","This side starts visible."),
              div(class="ui header side","This is yet another side"),
              div(class="ui header side","This is the last side"),
              div(class="ui header side",div(class="ui star rating"))
          )
      ),
      tags$button(id="test", class="ui button", "Flip", onclick="$('.shape').shape('flip up');"), 
      tags$script(HTML("$('.ui.rating').rating({});"))
    )
  })

来源：https://stackoverflow.com/questions/45057621/shiny-semantic-ui-elements-in-renderui

标签

jquery

Shiny

semantic-ui