How to dynamically show or hide html based on a server's response

Question

I am trying to replicate an AMP website to gain knowledge.

Technical Stack: AWS S3 static hosted website, AWS Cloudfront, AWS EC2, AWS Elastic Beanstalk, Google Accelerated Mobile Pages (AMP), Flask, JWT, CORS, MongoDb

There is a home.html page that contains a button to sign-in and a button to create account. When either button is clicked, a dialog box is opened and a login.html page is loaded.

The login.html page always displays the #create-container input fields regardless of which button is clicked.

How do I dynamically show or hide the containers based on a server response? Is there a way to emulate a .click event from a server response? Could I trigger the .showlogin click event from a server response? What would the server response need to return in order to trigger .showlogin?

I have tried returning the following from a flask endpoint that is called when the login page is loaded:

return jsonify(
    {'.showlogin': 'click'}
), 200

home.html

<script id="amp-access" type="application/json">
  {
      "authorization": "https://example.com/auth?rid=READER_ID&url=CANONICAL_URL&clientId=CLIENT_ID(cart)&ref=DOCUMENT_REFERRER&_=RANDOM",
      "pingback": "https://example.com/auth?rid=READER_ID&url=CANONICAL_URL&clientId=CLIENT_ID(cart)&ref=DOCUMENT_REFERRER&_=RANDOM",
      "login": {
        "sign-in": "/login?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
        "sign-up": "/sign-up?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM"
      },
      "authorizationFallbackResponse": {
          "error": true,
          "auth": true,           
          "loggedIn": false
      }
  }
</script>

<button class="menu_button atsackers pt9" on="tap:amp-access.login-sign-in">sign in</button>
<button class="menu_button atsackers pt9" on="tap:amp-access.login-sign-up">create account</button>

login.html (style):

    #username-container {
      display: none;    
    }
    #password-container {
      display: none;
    }
    #login-container {
      display: none;
    }
    #create-container {
      width: 100vw;

    }
    #contactResponse {
      width: 250px;
      margin: 10px auto;
    }
    #create-form {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        width: 100vw;
        margin: 0 auto;
        max-width: 550px;
    }
    .login_form {
      width: 250px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      margin: 0 auto 10px auto;
    }

login.html (script)::

$(document).ready(function(){   
  $("#create").click(function(){
    console.log("create clicked");  
    $("#login-container").hide();
    $("#create-container").show();
  });
  $("#login").click(function(){
    console.log("login clicked");    
    $("#create-container").hide();
    $("#login-container").show();
  });   
  $("#reset_username").click(function(){
    console.log("reset username clicked");      
    $("#login-container").hide();
    $("#username-container").show();
  });
  $("#reset_password").click(function(){
    console.log("reset password clicked");        
    $("#login-container").hide();
    $("#password-container").show();
  });
  $(".showlogin").click(function(){
    console.log(".showlogin clicked");  
    $("#create-container").hide();
    $("#username-container").hide();
    $("#password-container").hide();
    $("#login-container").show();

  });
});


<script>
    //When the page has loaded.
    $( document ).ready(function(){
        //Perform Ajax request.
        $.ajax({
            url: 'https://example.api.com/get_create_info?clientId=' + getQueryStringValue("clientId"),
            type: 'get',
            success: function(data){
                $('#create_email_field').val(data.email);
                $('#create_firstname_field').val(data.firstName);
                $('#create_lastname_field').val(data.lastName);
                //If the success function is execute,
                //then the Ajax request was successful.
                //Add the data we received in our Ajax
                //request to the "content" div.
            }
        });
    });
</script>

login.html (body):

<div id="contactResponse" class="avenir pt8"></div>

<div id="username-container" class="login_form">
<form id="username-form">
   ...inputs...
</form>
</div>

<div id="password-container" class="login_form">
<form id="password-form">
   ...inputs...
</form>
</div>

<div id="login-container" class="login_form">
<form id="login-form">
   ...inputs...        
</form>
</div>

<div id="create-container" class="login_form">
<form id="create-form">
   ...inputs...
</form>
</div>

Answer 1

use jQuery hide and show methods in your success block. To hide div just use $("#divId").hide(); and to show use $("#divId").show();