[Answered ]-Jquery load multiple blocks in Django

by

1đź‘Ť

âś…

@Adam, I don’t know how to adapt your code to more than one element. So I used a different method and it works :)… But the css is messed up :(. Here is my code:

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);
        });
    });
});

The css is almost ok but there is a small problem:

Without jQuery
Without JQuery

With jQuery
With JQuery

Do you need my css to detect what’s wrong? When I check the css of my legend “Please login below”, I see no difference between the 2 pages (I use the Developer tools of Chrome).

Here is the css of my legend:

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

In the web developer tool of Chrome: if I deactivate the width, the text is contained in one line only but there is no upper border. If I active the width again, then both the text and border are normally displayed (as in the first picture)! Is it a bug? Notice that I override the default css of bootstrap (width: 100%).

👤rom

1đź‘Ť

I think this could help (from the "Loading Page Fragments" section of jQuery’s .load() documentation):

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

We could modify the example above to use only part of the document that is fetched:

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

When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.

jQuery uses the browser’s .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

I’d like to reiterate this part:

This element, along with its contents, is inserted into the element

👤Adam Taylor

Leave a comment