daattali / shinyjs

💡 Easily improve the user experience of your Shiny apps in seconds
https://deanattali.com/shinyjs
Other
728 stars 119 forks source link

Problem when adding authUI and mainUI with shinyjs #233

Closed namrouche993 closed 3 years ago

namrouche993 commented 3 years ago

Hello ,First thanks a lot for your work. i want to include authentification UI in my app, so i use authUI and when Authentification is true, it's changes to mainUI

the app is openning but shinyjs function dont work

so here is a simple example (Old Faithful Geyser Data) :

library(shiny)
library(shinyjs)
library(shinyWidgets)

autnUI <- function() {

    #.... there is no need to that in this example, beacuse below i set  isAuth() to TRUE directly 

    }

# Define UI for application that draws a histogram
mainUI <- function() {

    fluidPage(
    useShinyjs(),  # Set up shinyjs

    # Application title
    titlePanel("Old Faithful Geyser Data"),

tags$head(tags$style("

#div1 {
display:none;
} 
"
)),

    # Sidebar with a slider input for number of bins 
    sidebarLayout(
        sidebarPanel(
            sliderInput("bins",
                        "Number of bins:",
                        min = 1,
                        max = 50,
                        value = 30),

        actionBttn(inputId = "button1")
        ),

        # Show a plot of the generated distribution
        mainPanel(
           div(id="div1",
               plotOutput("distPlot")
            )
        )
    )
)
}

ui <- (htmlOutput("screen"))

# Define server logic required to draw a histogram
server <- function(input, output) {

    isAuth <- reactiveVal(value = TRUE)    

    output$screen <- renderUI({
        `if`(isAuth()==FALSE,       
             div(do.call(bootstrapPage, c("", authUI()))),
             div(do.call(bootstrapPage, c("", mainUI())))
        )

    })

    observe({
        onevent("mouseenter", "button1", show("div1"))    # when mouse is on button1, show div1
        onevent("mouseleave", "button1", hide("div1"))     # when mouse leave button1 ,hide div1
    })

    output$distPlot <- renderPlot({
        # generate bins based on input$bins from ui.R
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)

        # draw the histogram with the specified number of bins
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
    })

}

# Run the application 
shinyApp(ui = ui, server = server) 

and when you change shinyApp() to shinyApp(ui = mainUI(), server = server) that's work fine , but of course i need to use authUI

daattali commented 3 years ago

I'm not familiar with the approach you're doing, and I would personally discourage from using it as it's not secure or robust. But if you want shinyjs to work, you can include the call to useShinyjs() in the US object.

ui <- tagList(useShinyjs(), htmlOutput("screen"))

On Mon, Jan 18, 2021, 8:29 AM namrouche993 notifications@github.com wrote:

Hello ,First thanks a lot for your work. i want to include authentification UI in my app, so i use authUI and when Authentification is true, it's changes to mainUI

the app is openning but shinyjs function dont work

so here is a simple example (Old Faithful Geyser Data) :

library(shiny) library(shinyjs) library(shinyWidgets)

autnUI <- function() {

#.... there is no need to that in this example, beacuse below i set  isAuth() to TRUE directly

}

Define UI for application that draws a histogram

mainUI <- function() {

fluidPage(
useShinyjs(),  # Set up shinyjs

# Application title
titlePanel("Old Faithful Geyser Data"),

tags$head(tags$style("

div1 {

display:none; } " )),

# Sidebar with a slider input for number of bins
sidebarLayout(
    sidebarPanel(
        sliderInput("bins",
                    "Number of bins:",
                    min = 1,
                    max = 50,
                    value = 30),

    actionBttn(inputId = "button1")
    ),

    # Show a plot of the generated distribution
    mainPanel(
       div(id="div1",
           plotOutput("distPlot")
        )
    )
)

) }

ui <- (htmlOutput("screen"))

Define server logic required to draw a histogram

server <- function(input, output) {

isAuth <- reactiveVal(value = TRUE)

output$screen <- renderUI({
    `if`(isAuth()==FALSE,
         div(do.call(bootstrapPage, c("", authUI()))),
         div(do.call(bootstrapPage, c("", mainUI())))
    )

})

observe({
    onevent("mouseenter", "button1", show("div1"))    # when mouse is on button1, show div1
    onevent("mouseleave", "button1", hide("div1"))     # when mouse leave button1 ,hide div1
})

output$distPlot <- renderPlot({
    # generate bins based on input$bins from ui.R
    x    <- faithful[, 2]
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    # draw the histogram with the specified number of bins
    hist(x, breaks = bins, col = 'darkgray', border = 'white')
})

}

Run the application

shinyApp(ui = ui, server = server)

and when you change shinyApp() to shinyApp(ui = mainUI(), server = server) that's work fine , but of course i need to use authUI

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/daattali/shinyjs/issues/233, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHIQFCJPXF7QB6WHKGZNGDS2QZSLANCNFSM4WHJZNTA .

namrouche993 commented 3 years ago

thanks a lot , it works fine now