Question

我正在尝试使用jquery ui进行错误提醒，下面的代码

$(function() {
    $("button").click(
            function() {
                $.ajax({
                    url : "signin.html",
                    type : "post",
                    cache : false,
                    data : "userName=" + $("#userName").val()
                            + '&password=' +                  $("#password").val(),
                    success : function(response) {
                        $('#errorbox').show();
                        $('#message').text(response);

                    },
                    error : function() {
                        alert('Error while response..');
                    }

                });
            });
});

<div class="ui-widget"
        style="font-size: 10px; margin-left: 10%; text-align: center;">
        <div id="errorbox" style="display: none; width: 30%"
            class="ui-state-error ui-corner-all">
            <p>
                <span id="message" name="message" class="ui-icon ui-icon-alert"/>

            </p>
        </div>
    </div>

$('#message').text(response);中的文字未显示

enter image description here

我看过这个http://jsfiddle.net/774wH/，但这是静态错误消息。如何使用ui alert css样式实现动态文本。

Answer 1

您的ui-alert-icon类正在将范围设置为警告图标的大小。所以你看不到你放在那里的文字。

您将不得不在此旁边添加另一个范围，并将您的响应文本放在里面。

如果您希望它位于旁边，而不是它下面，则必须在float: left上使用span

（出于某种原因，我现在无法访问jsFiddle，但只要它再次工作，我就会发布一个。）

Answer 2

你缺少dataType：“html”，

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
     <style type="text/css">         
     </style>
</head>
<body>

<input type="text" id="userName" value="" />
<input type="text" id="password" value="" />
<button>Submit</button>

<div class="ui-widget"
    style="font-size: 10px; margin-left: 10%; text-align: center;">
    <div id="errorbox" style="display: none; width: 30%"
        class="ui-state-error ui-corner-all">
        <p>
            <span id="message" name="message" class="ui-icon ui-icon-alert"/>

        </p>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $("button").click(
                function () {
                    $.ajax({
                        url: "signin.html",
                        type: "post",
                        dataType: "html",
                        cache: false,
                        data: "userName=" + $("#userName").val()
                                + '&password=' + $("#password").val(),
                        success: function (response) {
                            $('#errorbox').show();
                            $('#message').text(response);
                        },
                        error: function () {
                            alert('Error while response..');
                        }

                    });
                });
    });
</script>


</body>
</html>

Answer 3

请参阅我在这里创建的JSFiddle：

http://jsfiddle.net/Fresh/B7MHy/

此示例的关键是以下应用于ui-icon-alert类的样式：

.ui-icon.ui-icon-alert { 
    float: left;
    position: relative;
    left: 45px;
    bottom: 1px;
}

“float：left”样式会导致“错误”范围围绕警报图标流动，从而导致图标和错误消息并排呈现，而不是彼此重叠。

请注意，我还调整了错误图标的位置，使其不会从文本中看起来孤立。

Answer 4

您无法覆盖具有类ui-icon ui-icon-alert的范围值，因为它是图标（背景图像），所以只需用id创建另一个元素，然后将你的值附加到它运行良好的id

HTML

<div class="ui-widget">
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
<strong id="test"></strong>
</p>
</div>
</div>

脚本

$(function() {
    $("button").click(
            function() {
                $.ajax({
                    url : "signin.html",
                    type : "post",
                    cache : false,
                    data : "userName=" + $("#userName").val()
                            + '&password=' +                  $("#password").val(),
                    success : function(response) {
                        $('#errorbox').show();
                        $('#test').text(response);

                    },
                    error : function() {
                        alert('Error while response..');
                    }

                });
            });
});

Answer 5

问题在于html：

<span id="message" name="message" class="ui-icon ui-icon-alert"/>

取代：

<span id="message" name="message" class="ui-icon ui-icon-alert"></span>

希望它能解决问题

jquery中的动态错误文本ui错误文本未显示

5 个答案: