2

我正在尝试使用 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);没有显示

在此处输入图像描述

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

4

5 回答 5

0

您不能覆盖具有类的跨度值，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..');
                    }

                });
            });
});
于 2013-11-11T09:01:17.907 回答
0

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

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

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

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

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

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

于 2013-11-08T23:36:30.540 回答
0

问题在于html：

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

代替：

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

希望它能解决问题

于 2013-11-11T09:09:49.103 回答
0

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

您将不得不在此跨度旁边添加另一个跨度，并将您的响应文本放入其中。

如果你想让它在它旁边，而不是在它下面，你必须float: left在你span的 s上使用

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

于 2013-11-08T11:44:49.090 回答
0

你缺少 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>
于 2013-11-08T12:03:40.713 回答