Как динамически отображать или скрывать html на основе ответа сервера

Question

Я пытаюсь скопировать веб-сайт AMP, чтобы получить знания.

Технический стек: статический размещенный веб-сайт AWS S3, AWS Cloudfront, AWS EC2, AWS Elastic Beanstalk, Google Accelerated Mobile Pages (AMP), Flask, JWT, CORS, MongoDb

На странице home.html есть кнопка для входа и кнопка для создания учетной записи. При нажатии любой кнопки открывается диалоговое окно и загружается страница login.html.

На странице login.html всегда отображаются поля ввода #create-container независимо от того, какая кнопка нажата.

Как мне динамически отображать или скрывать контейнеры на основе ответа сервера? Есть ли способ имитировать событие.click из ответа сервера? Могу ли я вызвать событие щелчка.showlogin из ответа сервера? Что должен вернуть ответ сервера, чтобы запустить.showlogin?

Я попытался вернуть следующее из конечной точки фляги, которая вызывается при загрузке страницы входа:

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 (стиль):

    #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 (скрипт)::

$(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 (тело):

<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

Используйте методы jQuery hide и show в блоке успеха. Чтобы скрыть div, просто используйте$("#divId").hide(); и показать использование $("#divId").show();