jQuery html() is not rendering the content in a div more than once

Question

I am having a div to show the error-popup-message .

<div id="popup-msg"></div>

And, I am making an AJAX POST call to submit login-form and if the server returns success then I am redirecting to other page, otherwise I am showing the error-popup-message . Currently, the html() is rendering the content only once when I am getting error-message from server. But when I again test it (Without reloading the page), the html() is not rendering the content, even though I am getting the error-message from server.

var getErrorPopUpHTML = function (response) {
  var html_content = "";
  // It returns the html string after processing the response object.
  return html_content;
};

var submitSignInForm = async function () {
  $("#sign-in-btnn").off("click");
  $("form").submit(function (evt) {
    var SIGNIN_ROUTE = getSignInEndpoint(); // This fetch the login-endpoint
    evt.preventDefault();
    var payload = {
      email: $("#sign-in-email").val(),
      password: $("#sign-in-password").val(),
    };
    $.ajax({
      url: SERVER + SIGNIN_ROUTE, // Endpoint to make the POST call
      method: "POST",
      data: payload,
      async: false,
      dataType: "json",
      success: function (response) {
        resetSignInFormProperties();
        if (response.statusCode === 200) {
          window.location = response.values[0].link; // Redirecting to other page upon getting success from server
        }
      },
      error: function (response) {
        resetSignInFormProperties();
        response = $.parseJSON(response.responseText);
        var html_file = getErrorPopUpHTML(response);
        $("#popup-msg").html(html_file).fadeOut(8000); // Rendering html content on the div: popup-msg
      },
    });
    return false;
  });
};

$(document).ready(function () {
  $("#sign-in-btnn").on("click", submitSignInForm);
}

Could anyone please point the mistake here?

Thank you!

Answer 1

You fade out the div after showing the error message but never fade it in again. So only the first message is shown.

Fade div in before showing message

$("#popup-msg").fadeIn(0).html(html_file).fadeOut(8000)