0

すべてのページの上部にナビゲーションバーを追加したい（twitterブートストラップを使用）

ナビゲーションバーには、認証されたユーザーのフルネームが含まれている必要があります。

プレーンテキストで「JaneDoe」を返すGET用のRESTサービス/auth/ rest / user/fullnameがあります。

複数のページがあるので、各ページに最小限の定型コードを追加できるソリューションを探しています。ページの上部にある次のようなもの：

<div id="banner"></div>

そしてこれは下部にあります：

<script>
    addBanner();
</script>

提案/アイデア

以下を使用して、banner.htmlファイルからバナーをロードしました。

function addBanner() {
    $('body').css("padding-top", "50px");
    $("#banner").load("/banner.html");
    // how to replace the <span id="fullname">&nbsp;</span> with Jane Doe?
}

編集：banner.htmlファイルからバナーのHTMLをロードする必要があります。そのファイルにはID=fullnameのスパンがあり、ajax GETから更新する必要があり、htmlの「チャンク」全体がid=bannerでdivに挿入されます。両方のピースを機能させることができません。ajaxにフルネームを返してもらい、静的ファイルからロードできますが、ajaxを介してロードしたものをロード、変更してからDOMに挿入するにはどうすればよいですか？

4

2 に答える 2

3

jqueryhtml()またはtext()メソッドを使用できます。text()最小限の速度ですが、挿入するテキストを含むhtmlを追加する場合は、で期待どおりに機能しないため、使用すること.html()をお勧めしますtext()。

$('#fullname').html('Jane Doe');
// OR
$('#fullname').text('Jane Doe');

これは同じ結果になります：

<span id="fullname">Jane Doe</span>
// which displays as
Jane Doe

<h1>Jane Doe</h1>ただし、結果などのhtmlコンテンツを含める場合は、次のようになります。

<span id="fullname"><h1>Jane Doe</h1></span>
// but with html() it will display the text
Jane Doe
// whereas with text() it will display the text
<h1>Jane Doe</h1>

Difference-between-jquery-text-and-htmlは、これを非常によく説明している優れたブログ投稿です。

ライブデモ

編集に関しては、バナーをロードし、バナーが更新された後にユーザー情報を更新する必要があります。バナーの追加機能は次のようになります。

function addBanner() {
    $('body').css("padding-top", "50px");
    $("#banner").load("/banner.html", function() {
        $('#fullname').html('Jane Doe');
    });
}
于 2012-08-24T22:22:27.220 に答える
0

I went with this:

<script type="text/javascript">
    $(function() {
        $("#banner").load("banner.html");
        $('body').css("padding-top", "50px");
        $.ajax({
            url : "/auth/rest/user/fullname",
            cache : false
        }).done(function(html) {
            $('#fullname').html(html);
        });
    });
</script>
于 2012-08-29T18:32:41.657 に答える