1

メニューのリンクをクリックすると、ページ全体をリロードせずに (ヘッダーとメニューをリロードせずに)、Web サイトの各ページのコンテンツを読み込もうとしています。これが私のコードです：

base.html

<div id="container-fluid">
    <!-- header -->
    <div class="row_fluid">
        <header >
            blablabla
        </header>
    </div>

    <div class="row-fluid">
        <!-- left menu -->
        <div class="span3">
            <div id="menu">
                <a id="login">Login</a>
            </div>
        </div>

        <!-- content -->
        <div class="span9">
            <!-- title of the page -->
            <div class="row-fluid">
                <h3>{% block contentTitle %}{% endblock %}</h3>
            </div>

            <!-- right-side content -->
            <div class="row-fluid">
                <div id="content">
                    {% block content %}{% endblock %}
                </div>
            </div>
        </div>
    </div>
</div>

index.html

{% extends "base.html" %}

{% block contentTitle %}Login{% endblock %}

{% block content %}
    blablabla
{% endblock %}

[ログイン] をクリックすると、index.html のコンテンツを取得し、ブロック contentTitle とコンテンツの両方をdiv コンテンツにロードしたいと考えています。

これまでのところ、JSで持っているものは次のとおりです。

jquey.js

$(document).ready(function ()
{
    $("#login").click(function()
    {
        $("#content").load("/website/login/");
    });

});

このコードはページ全体をロードします。つまり、base.html をロードするので、ページに 2 つのヘッダーとメニューが表示されるようになりました。また、ブロック contentTitle は処理されませんが、その方法がわかりません。問題を解決するには？

4

2 に答える 2

1

これが役立つと思います（ jQueryのドキュメントの「ページフラグメントの読み込み」セクションから.load()）：

この.load()メソッドは、 とは異なり$.get()、挿入するリモート ドキュメントの一部を指定できます。これは、パラメーターの特別な構文で実現されurlます。文字列に 1 つ以上のスペース文字が含まれている場合、最初のスペースに続く文字列の部分は、読み込まれるコンテンツを決定する jQuery セレクターと見なされます。

上記の例を変更して、取得したドキュメントの一部のみを使用することができます。

$('#result').load('ajax/test.html #container');

このメソッドを実行すると、 のコンテンツが取得されますajax/test.htmlが、jQuery は返されたドキュメントを解析して、ID が の要素を見つけますcontainer。この要素は、そのコンテンツとともに ID の要素に挿入されresult、取得されたドキュメントの残りの部分は破棄されます。

jQuery はブラウザの.innerHTMLプロパティを使用して、取得したドキュメントを解析し、現在のドキュメントに挿入します。このプロセス中に、ブラウザーは<html>、 、<title>、または<head>要素などの要素をドキュメントからフィルター処理することがよくあります。その結果、 によって取得された要素は.load()、ドキュメントがブラウザによって直接取得された場合とまったく同じではない場合があります。

この部分を繰り返したい：

この要素は、そのコンテンツとともに要素に挿入されます

于 2013-08-30T06:19:31.153 に答える
1

@Adam、コードを複数の要素に適応させる方法がわかりません。だから私は別の方法を使用し、それは動作します:) ...しかし、cssがめちゃくちゃです:(。これが私のコードです:

base.html

...
<!-- menu -->
<a id="login" href="{% url login %}">
...
<!-- Body content -->
<div class="row-fluid">
    <div class="span12 first_row">
        <!-- title of the page -->
        <h3 id="title_base">{% block contentTitle %}{% endblock %}</h3>
    </div>
</div>

<div class="row-fluid">
    <div class="span12">
        <!-- right-side content -->
        <div id="content_base">{% block content %}{% endblock %}</div>
    </div>
</div>

index.html

{% extends "base.html" %}

{% block contentTitle %}<div id="title">Login</div>{% endblock %}

{% block content %}
    <div id="content">
        blablabla
    </div>
{% endblock %}

jquery.js

$(document).ready(function ()
{
    $('#login').click(function(event)
    {
        event.preventDefault();
        $.get("/website/login/", function(data)
        {
            var title=$(data).find("#title");
            var content=$(data).find("#content");
            $("#title_base").html(title);
            $("#content_base").html(content);
        });
    });
});

CSS はほぼ問題ありませんが、小さな問題があります。

jQueryなし JQuery なし

jQueryで JQuery を使用

何が問題なのかを検出するために私の CSS が必要ですか? 凡例のcss「ログインしてください」を確認すると、2つのページに違いはありません（Chromeの開発者ツールを使用しています）。

これが私の伝説のcssです：

/* override bootstrap */
legend
{
    font-size: 1.2em;
    font-weight: bold;
    text-align: left;
    width:auto;
    padding:0 1%;
    margin-bottom: 0;
    border-bottom:none;
}

Chrome の Web 開発者ツール: 幅を無効にすると、テキストは 1 行だけに含まれますが、上部の境界線はありません。幅を再度アクティブにすると、テキストと境界線の両方が通常どおり表示されます (最初の図のように)。バグですか？ブートストラップのデフォルト css (幅: 100%) をオーバーライドしていることに注意してください。

于 2013-08-30T09:49:13.117 に答える