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アラート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

問題は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

ここで作成した 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 に答える