ajax .show () не показывает скрытый div при регистрации?

Question

Я пытаюсь отобразить сообщение об успешном завершении или об ошибке и вернуть сообщение json, когда новый пользователь регистрируется (через форму).Я вижу вывод json в консоли (то есть сообщения заполняются в консоли), но я не вижу ни div, ни объект в виде текста, появляющегося на html-странице.

Ниже приведено то, что у меня есть:

HTML:

<script src="../static/js/jquery-3.3.1.min.js"></script>
<script src="../static/js/signUp.js"></script>
<div id="successAlert" class="alert alert-success" role="alert" style="display:none;"></div>
<div id="errorAlert" class="alert alert-danger" role="alert" style="display:none;" ></div>

Регистрация js:

$(document).ready(function(){
    $("#btnSignUp").click(function(){

        $.ajax({
            type: "POST",
            url: "/signUp",
            data: $("form").serialize(),
            success: function(response){
                $("#successAlert").html("response").show();

            },
            error: function(error){
                $("#errorAlert").html("error").show();
            }
        });
    });
});

Регистрация py:

@app.route("/signUp",methods=["POST", "GET"])
def signUp():
    try:
        _name = request.form["inputName"]
        _email = request.form["inputEmail"]
        _password = request.form["inputPassword"]

        # validate the received values
        if _name and _email and _password:
            conn = mysql.connect()
            cursor = conn.cursor()
            _hashed_password = generate_password_hash(_password)
            cursor.callproc("sp_createUser",(_name,_email,_hashed_password))
            data = cursor.fetchall()

            if len(data) is 0:
                conn.commit()
                return jsonify({"message":"User created successfully !"})
            else:
                return jsonify({"error":str(data[0])})

    except Exception as e:
        return jsonify({"error":str(e)})

    finally:
           cursor.close()
           conn.close()

Заранее спасибо!

Answer 1

$(document).ready(function(){
    $("#btnSignUp").click(function(){

        $.ajax({
            type: "POST",
            url: "/signUp",
            data: $("form").serialize(),
            success: function(response){
                $("#successAlert").html("response").show();

            },
            error: function(error){
                $("#errorAlert").html("error").show();
            }
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="successAlert" class="alert alert-success" role="alert" style="display:none;"></div>
<div id="errorAlert" class="alert alert-danger" role="alert" style="display:none;" ></div>
<input type="submit" id="btnSignUp">

Ошибка div работает

Answer 2

Не уверен, какое из этих исправлений, но я думаю, что я исправил свою проблему, добавив type = "text / javascript" в мой импорт js-скрипта на html-странице.Кроме того, при локальном запуске веб-приложения мои файлы css и js не обновляются, пока я не изменю имя файла (что очень странно).Я открою новый вопрос для этой проблемы.

HTML был скорректирован на:

<script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../static/js/signUp.js"></script>

Спасибо за помощь!

Answer 3

Вместо замены всего в #successAlert на .html() используйте .append() и добавьте dataType:'json' к ajax:

$.ajax({
    type: "POST",
    url: "/signUp",
    data: $("form").serialize(),
    dataType:'json', // <------add this to parse the response as json
    success: function(response){
        $("#successAlert").append(response.message).show();// put message then show.

    },
    error: function(error){
        $("#errorAlert").append(error.error).show();// put error then show.
    }
});