Unrespnsive UI of Shinyapp

taiba_199 · July 7, 2021, 9:22am

I am new to R language/Shiny. I have created a shiny app that goes back and forth between pages. The problem is that once I click the "Back" button, it takes me back to the previous, but the links or buttons on that page don't work. I am facing this problem for all the pages I have created. The buttons or links don't work a second time. I am sharing the code below for a better understanding of the problem. Assume all the required libraries are installed and loaded

**ui.R

devtools::install_github("nstrayer/shinyswipr")
library(shiny)
library(shinyWidgets)
library(shinyjs)
library(shinythemes)
library(aos)
library(shinyswipr)
library(shinyanimate)
library(stringr)
library(shinyvalidate)
library(shinycssloaders)

# source("navbar.R")
source("registerPortal.R")

# Define UI for application that draws a histogram
shinyUI(fluidPage(
    
    tags$style(
        
        type = "text/css",
        
        "#header {position: relative; margin-top: -2%; height: 19vh; width: 92%,}",
        "#title {font-family: calibri; font-size: 35px; margin-top: -6%; position: relative; left: 8%; color: #223300;}",
        "#user .bttn-success{position: relative; margin-left: 93.3%; margin-top: 2%; font-family: calibri; color: #fff; opacity: 0.35; font-size: 16px;}",
        "#capitals {display: inline}",
        "#founder {margin-left:0%; margin-top:-2%;}",
        "#sign {margin-top:1%;}",
        ".action_button_capitals {position: relative; margin-left: 80px}",
        ".btnborder {display: block; margin-left: auto; margin-right: auto; border: 1.7px solid #d6f39b;}",
        "a {color: #666;}", 
        "a:hover {color: #000;}", 
        "#navbar {font-size: 15px}",
        ".circle {background: #fff; border: 1.7px solid #d6f39b; border-radius: 50%; width: 222.7px; height: 220px; display: inline-block; margin: 70px;}",
        ".vpb1 .bttn-primary{background-color: #d6f39b; font-size: 17px; font-family: calibri; color: #232b2b; opacity: 0.8; left: 65px;}",
        ".vpb2 .bttn-primary{background-color: #d6f39b; font-size: 17px; font-family: calibri; color: #232b2b; opacity: 0.8; left: 69px;}",
        ".vpb3 .bttn-primary{background-color: #d6f39b; font-size: 17px; font-family: calibri; color: #232b2b; opacity: 0.8; left: 72px;}",
        ".vpb4 .bttn-primary{background-color: #d6f39b; font-size: 17px; font-family: calibri; color: #232b2b; opacity: 0.8; left: 75px;}",
        "#circletext1 {position: relative; left: 32px; font-size: 27px;}",  
        "#circletext2 {position: relative; left: 12px; font-size: 27px;}",
        "#circletext3 {position: relative; left: 25px; font-size: 27px;}",
        "#circletext4 {position: relative; left: 27px; font-size: 27px;}",
        "#aimg {position: relative; left: 75px; margin-top: 22%}",
        "#vimg {position: relative; left: 89px; margin-top: 22%}",
        "#mimg {position: relative; left: 89px; margin-top: 22%}",
        "#wimg {position: relative; left: 89px; margin-top: 22%}",
        "#alead {position: relative; left: -50px; margin-top: 5%}",
        "#vlead {position: relative; left: -50px; margin-top: 5%}",
        "#mlead {position: relative; left: -50px; margin-top: 5%}",
        "#wlead {position: relative; left: -50px; margin-top: 5%}",
        "#vdone {position: relative;  width: 27%; margin-top: -10%; margin-left: 177.1px;}",
        "#vdtwo {position: relative; margin-top: -38%; margin-left: 888.1px; width: 27%;}",
        "#vdthree {position: relative; margin-top: 5%; right: 120px; width: 30%; height: 50% color: green; text-align: center; color: white}",
        "#vdfour {position: relative; margin-top: -4.5%; left: 300px; width: 75%; height: 85vh; color: green; background-color: #E0F8AE; border: 7px solid  #E0F8AE;}",
        "#vdfive {position: relative; margin-top: -44.3%; left: 81.45%; width: 200px; height: 5vh; color: green; text-align: center; color: white;}",
        "#btn1 {background-color: #f1ffd4; margin-top: 5%; margin-left: 65px; border: none; color: #223300; text-size: 20px;}",
        "#btn2 {background-color: #f1ffd4; margin-top: 5%; margin-left: 87px; border: none; color: #223300; text-size: 20px;}",
        "#outer {position:relatice; margin-top:3%;}",
        ".button {background-color: #E0F8AE; border-color: #E0F8AE; color: #223300; width: 200px;}",
        "#about {position: relative; right: -40px; border-style: solid; border-color: #E0F8AE; color: #223300; width: 95%; padding: 30px; font-size: 16px;}",
        "#icons {margin-left: 61px; padding: 10px; padding-left: -2em; padding-right: -1em; margin-top:-1%;}",
        ".mydiv {width:100%; height:170px; background-color: #E0F8AE; opacity:0.9}",
        ".mytext {display: inline;  font-size: 13px;}",
        ".footertext {text-indent: 40%;}","#outer {position:relatice; margin-top:3%;}",
        "#user .bttn-primary{position: relative; margin-left: 94%; margin-top:1%; background-color: #d6f39b;  font-family: calibri; color: #232b2b; opacity: 0.8; font-size: 17px;}",
        
        
    ),  
    
    
    #Logo inserted
    div(id="header",
        
        
        
        #Main Title
        h1(id="title", "JAMIAAT: Data Analytics & Visualization for HEI's of Pakistan"),
    ),
    
    br(),
    br(),
    
    
    tags$div(id = "reg",
             shinyjs::useShinyjs(),
             register),
    
    uiOutput("display")
    
    
))

**registerPortal.R

register <-  fluidPage(
  
  tags$style(
    
    type = "text/CSS",
    
    " .has-error{color: #B31B1B;}"
  ),
  
  #User Registration
  div(id ="user", actionBttn("OPEN"," Register",
                             color = "success", style = "gradient", icon = icon("user"))),
  
  div(
    #Founder
    
    br(),
    
    
    div(id="founder",
    
    br(),
    
    
    h2(" There are two powers in the world; one is the sword and the other is the pen. There is a great competition and rivalry between the two. There is a third power stronger than both, that of the women." ,sep="<br/>")),
    
    
    
    
    br(),
    
  
  #Capitals Section
  
  br(),
  
  hr(),
  
  use_aos(disable = "mobile"), # add use_aos() in the UI
  aos(
    element =      div( id = "capitals",
                        
                        withAnim(),
                        actionButton(
                          inputId = "showISL", "ISL",
                          class = "action_button_capitals"
                        ),
                        
                        actionButton(
                          inputId = "showKARACHI", "Karachi",
                          class = "action_button_capitals"
                        ),
                        
                        actionButton(
                          inputId = "showLAHORE", "Lahore",
                          class = "action_button_capitals"
                        ),
                        
                        actionButton(
                          inputId = "showPESHAWAR", "Peshawar",
                          class = "action_button_capitals"
                        ),
                        
                        actionButton(
                          inputId = "showQUETTA", "Quetta",
                          class = "action_button_capitals"
                        )
    ),
    animation = "fade-up", 
    duration = "3000"),
  
  
  hr(),
  
  
  ) 
  
)

**islamabad.R

islamabad <- fluidPage(
  
  
  
  
  tags$style(
    
    type = "text/css",
    
    "#header {position: relative; margin-top: 1%; height: 19vh; width: 92%,}",
    "#title {font-family: calibri; font-size: 35px; margin-top: -6%; position: relative; left: 8%; color: #223300;}",
    "#heading {margin-top: 3%; position: relative; background-color: #E0F8AE; opacity: 0.9; font-family: calibri; height:30%; border: 1px solid #d6f39b; text-align:center;}",
    "#pointer {cursor: pointer;}",
    ".box {background: #fff; border: 1.7px solid #d6f39b; width:270px; height: 230px; display: inline-block; margin: 70px; margin-left:8.7%; cursor: pointer}",
    ".btnborder {display: block; margin-left: auto; margin-right: auto; border: 1.7px solid #d6f39b;}",
    
  ), 
  
  
  #Heading
  div(id="heading", h4("Islamabad Universities"), ),
  
  
  actionButton(
    inputId = "back", "Back",
    class = "action_button_back"
  ),
  
  
  
  
  #Islamabad Universities
  
  
  withAnim(),
  
  tags$div(id = 'nust', class = "box", div(br(), align = "center"), 
           br(),
           h5("National University of Sciences and Technology", align = "center"),
           actionButton("showNUST", "View Info", class="btnborder")),
  
  tags$div(id = 'fast', class = "box", div(br(), align = "center"), 
           br(),
           h5("National University of Computer and Emerging Sciences", align = "center"),
           actionButton("showFAST", "View Info", class="btnborder")),
  
  tags$div(id = 'qau', class = "box", div(br(),  align = "center"), 
           br(),
           h5("Quaid-i-Azam University", align = "center"),
           actionButton("showQAU", "View Info", class="btnborder")),
  
  
)

**server.R

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

useShinyjs()  
source("islamabad.R")

# Define server logic required to draw a histogram
shinyServer(function(input, output, session) {
    
    #User-Registration Button
    observeEvent(input$OPEN, {
        showModal(modalDialog( id = "form",
                               h3(strong("User Sign-Up Portal"), align = "center"),
                               
                               
                               br(),
                               
                               textInput("Username", "Enter Username:", value = "", placeholder = "Username"),
                               textInput("Email", "Enter Email:", value = "", placeholder = "Email"),
                               passwordInput("Password", "Enter Password:", value = "", placeholder = "Password"),
                               passwordInput("rePassword", "Retype Password:", value = "", placeholder = "Retype Password"),
                               
                               easyClose = TRUE,
                               footer=tagList(
                                   p("Already have an account ? Click to Sign In"),actionButton('signin', 'Sign-In'),
                                   
                                   div(style = "margin-right: 300px", actionButton('submit', 'Submit'), actionButton("refresh", "Refresh"),
                                       modalButton('cancel'))
                               )
        )
        )
        uiOutput("successReg")
    }
    )
    
    observeEvent(input$showNUST, {
        showModal(modalDialog(
            h4("National University of Sciences & Technology", align = "center"),
            hr(),
            h5("Motto   :"),
            h6("Defining Futures"),
            h5("Type :"),
            h6("Public"),
            h5("Established :"),
            h6("1991; 29 years ago"),
            h5("Academic Staff :"),
            h6("817"),
            h5("Students :"),
            h6("6,259"),
            h5("Undergraduates :"),
            h6("938"),
            h5("Postgraduates :"),
            h6("3,859"),
            h5("Website:"),
            a("http://nust.edu.pk/", href = "http://nust.edu.pk/"),
            h5("Location :"),
            h6("Islamabad, Pakistan"),
            h5("Affiliations :"),
            tags$ul(
                tags$li(h6("Higher Education Commission of Pakistan")),
                tags$li(h6("Pakistan Engineering Council")),
                tags$li(h6("Washington Accord"))
            ),
            hr(),
            p("Click your cursor anywhere outside Pop-Up-Modal screen to close it", style="color: #8A9A5B; font-size: 12.7px"),
            easyClose = TRUE,
            footer = NULL
        ))
    })
    
    observeEvent(input$showFAST, {
        showModal(modalDialog(
            h4("National University of Computer and Emerging Sciences", align = "center"),
            hr(),
            h5("Former Names    :"),
            h6("FAST Institute of Computer Science"),
            h5("Motto :"),
            h6("Ø§ÙØ°Û Ø¹ÙÙ Ø¨Ø§ÙÙÙÙÛ Ø¹ÙÙ Ø§ÙØ§ÙØ³Ø§Ù ÙØ§ ÙÙ ÙØ¹ÙÙÛ"),
            h5("Motto in English    :"),
            h6("Who has taught by the pen, has taught man that which he knew not. ~ Al-Quran (A verse from Holy Book of Muslims)."),
            h5("Type :"),
            h6("Non-Profite Private"),
            h5("Established :"),
            h6("2000"),
            h5("Parent Institutuion :"),
            h6("Foundation for Advancement of Science and Technology (Established in 1980)"),
            h5("Students :"),
            h6("11,000"),
            h5("Campus :"),
            h6("Faisalabad, Karachi, Lahore, Peshawar, Islamabad"),
            h5("Website:"),
            a("http://nu.edu.pk/", href = "http://nu.edu.pk/"),
            h5("Location :"),
            h6("Islamabad, Pakistan"),
            h5("Affiliations :"),
            tags$ul(
                tags$li(h6("Higher Education Commission of Pakistan")),
                tags$li(h6("Pakistan Engineering Council"))
            ),
            hr(),
            p("Click your cursor anywhere outside Pop-Up-Modal screen to close it", style="color: #8A9A5B; font-size: 12.7px"),
            easyClose = TRUE,
            footer = NULL
        ))
    })
    
    observeEvent(input$showQAU, {
        showModal(modalDialog(
            h4("Quaid-i-Azam University", align = "center"),
            hr(),
            h5("Former Names    :"),
            h6("University of Islamabad"),
            h5("Motto :"),
            h6("ÙÙÙÙÙ ÙÙØ¤ÙØªÙ Ø§ÙÙØÙÙÙÙÙØ©Ù ÙÙÙÙØ¯Ù Ø£ÙÙØªÙÙÙ Ø®ÙÙÙØ±ÙØ§ ÙÙØ«ÙÙØ±ÙØ§"),
            h5("Motto in English    :"),
            h6("And he to whom wisdom is granted receiveth indeed a benefit overflowing"),
            h5("Type :"),
            h6("Public"),
            h5("Established :"),
            h6("July 22, 1967; 53 years ago"),
            h5("Students :"),
            h6("13,000"),
            h5("Campus :"),
            h6("Urban"),
            h5("Website:"),
            a("http://qau.edu.pk/", href = "http://qau.edu.pk/"),
            h5("Location :"),
            h6("Islamabad, Pakistan"),
            h5("Affiliations :"),
            tags$ul(
                tags$li(h6("Higher Education Commission of Pakistan"))
            ),
            hr(),
            p("Click your cursor anywhere outside Pop-Up-Modal screen to close it", style="color: #8A9A5B; font-size: 12.7px"),
            easyClose = TRUE,
            footer = NULL
        ))
    })
    
    
    #Hover Animation Observe Event for Islamabad Universities
    observe(addHoverAnim(session, 'nust', 'pulse'))
    observe(addHoverAnim(session, 'fast', 'pulse'))
    observe(addHoverAnim(session, 'qau', 'pulse'))
    
    
   
    
    
    
    
    
    
    observeEvent(input$showISL, {
        
        output$display <- renderUI({
            shinyjs::hide("reg")
            islamabad
        })
        
    })
    observeEvent(input$showKARACHI, {
        
        output$display <- renderUI({
            shinyjs::hide("reg")
            islamabad
        })
        
    })
    observeEvent(input$showLAHORE, {
        
        output$display <- renderUI({
            shinyjs::hide("reg")
            islamabad
        })
        
    })
    observeEvent(input$showPESHAWAR, {
        
        output$display <- renderUI({
            shinyjs::hide("reg")
            islamabad
        })
        
    })
    observeEvent(input$showQUETTA, {
        
        output$display <- renderUI({
            shinyjs::hide("reg")
            islamabad
        })
        
    })
    
    observeEvent(input$back, {
        
        output$display <- renderUI({
            shinyjs::hide("display")
            shinyjs::show("reg")
        })
        
    })
    
    
    
})

nirgrahamuk · July 7, 2021, 11:50am

taiba_199:

  observeEvent(input$showQUETTA, {
        
        output$display <- renderUI({
            shinyjs::hide("reg")
            islamabad
        })
        
    })
    
    observeEvent(input$back, {
        
        output$display <- renderUI({
            shinyjs::hide("display")
            shinyjs::show("reg")
        })

generally speaking you wouldnt want to construct apps like this, with outputs whose formulas that describe how they are constructed can be changed dynamically . It will necessarily be difficult for you to reason on the state of your app. It would be cleaner to have a single output$display <- renderUI, that can contain conditional logic as you might wish.
I should also note that your back related renderUI doesnt contain any UI to render, it does contain shinyjs to manipulate the DOM. if you only want to manipulate the Dom you can have observe events that do such things, they dont need to be in render functions per se.

taiba_199 · July 7, 2021, 12:46pm

I'm sorry I don't understand what I need to do to resolve this issue. I updated my code as you suggested. It still doesn't work.

As you said "your back related renderUI doesnt contain any UI to render", I did render the "register" UI, and no luck.

nirgrahamuk · July 7, 2021, 1:15pm

Its difficult to discuss very long code, with multiple libraries.
Here is a suggested starting point, maybe begin here, and add in just whatever minim additional complexity you wish to have help with.

library(shiny)
library(shinyjs)
ui <- fluidPage(useShinyjs(),
  div(id="some_ui",
      p("This is some UI"),
      actionButton("go_forth",
                   "Forward")),
  shinyjs::hidden(div(id="other_ui",
                      p("This is other UI"),
                      actionButton("go_back",
                                   "Backwards")))
  
)

server <- function(input, output, session) {
  observeEvent(input$go_forth,{
    hide("some_ui")
    show("other_ui")
  })
  observeEvent(input$go_back,{
    show("some_ui")
    hide("other_ui")
  })
}

shinyApp(ui, server)

taiba_199 · July 7, 2021, 1:53pm

It works! Thank you for your time. Much appreciated

system · July 28, 2021, 1:54pm

This topic was automatically closed 21 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.