Shiny uioutput elements (actionbuttons) cannot be observed by the observer.

shiny
,
1

The server function is:


server = function(input, output, session) {

  reactive_values = reactiveValues()

  #Initialize the UI with login page
  output$EweDeeUi = renderUI({
    ui_login
  })

  #This part should be more complicated due to sign in
  observeEvent(input$signin,{
    output$EweDeeUi = renderUI({
      ui_home
    })
  })

  #Link to forget password/password retreat
  observeEvent(input$forgot,{
    output$EweDeeUi = renderUI({
      ui_home
    })
  })

  #Link to register
  observeEvent(input$signup,{
    output$EweDeeUi = renderUI({
      ui_register
    })
  })

}

And the main UI is defined as:

ui = shinyUI(
  fluidPage(
    theme = "css/style.css",
    uiOutput("EweDeeUi")
  )
)

The sub ui element ui_login is defined using a HTML template:


ui_login = div(id = "ui_login",
               htmlTemplate("ui/ui_login/ui_login.html",
                            logo_image = img(src = "https://i.ibb.co/8BcNXGj/logo.png", 
                                             width = "200px", height = "200px"),
                            button_signin = actionBttn("signin", "Sign in",
                                                       block = TRUE, style = "fill"),
                            button_forgot = actionBttn("forgot", "Forgot Password", style = "fill"),
                            button_signup = actionBttn("signup", "Sign up", style = "fill"),
                            signin_message = textOutput("validation_message")
               ),
               includeCSS("ui/ui_login/css/main.css"),
               includeCSS("ui/ui_login/css/util.css"),
               includeScript("ui/ui_login/js/main.js")
)

And the HTML template is:


<!DOCTYPE html>
<html lang="en">
<head>
	{{ headContent() }}
</head>

<title>EweDee Login</title>	
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->

<body>
	
	<div class="limiter">
		<div class="container-login100">
			<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-50">
				<form class="login100-form validate-form">
					<span class="login100-form-title p-b-33">
						{{logo_image}}
					</span>

					<div class="wrap-input100 validate-input" data-validate = "Valid email is required: ex@abc.xyz">
						<input class="input100" type="text" name="email" placeholder="Email">
						<span class="focus-input100-1"></span>
						<span class="focus-input100-2"></span>
					</div>

					<div class="wrap-input100 rs1 validate-input" data-validate="Password is required">
						<input class="input100" type="password" name="pass" placeholder="Password">
						<span class="focus-input100-1"></span>
						<span class="focus-input100-2"></span>
					</div>

					<div class="container-login100-form-btn m-t-20">
						<!--
						<button class="login100-form-btn">
							Sign in
						</button>
					-->
						{{button_signin}}
					</div>

					<div class="text-center p-t-45 p-b-4">
						<!--
						<span class="txt1">
							Forgot
						</span>

						<a href="#" class="txt2 hov1">
							Username / Password?
						</a>
					-->
						{{button_forgot}}
					</div>

					<div class="text-center">
						<!--
						<span class="txt1">
							Create an account?
						</span>

						<a href="#" class="txt2 hov1">
							Sign up
						</a>
					-->
						{{button_signup}}
					</div>

					<div class="text-center">
						<br>
						{{signin_message}}
					</div>
				</form>
			</div>
		</div>
	</div>
	
	<script src="js/main.js"></script>

</body>
</html>

However, while this shinyApp is executed, none of the action buttons in the sub ui unit seem to be reactive to clicking. I am wondering what could have caused that problem.

2

Hi @Broccolito, if possible, it would be helpful to have access to your full project (i.e., your code is referencing external files that we don't have access to).

3

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