Обновите div в Django, используя JQuery и AJAX

Question

Я пытаюсь обновить определенную часть моей страницы с помощью AJAX и JQuery (в Django). Как я могу заставить его отображать только div, а не всю страницу?

    // In my template
    var tag_cloud_floor = function(floor) {
    $.ajax({ url: "/{{ user }}/{{ tag }}/",
                     data: {tag_cloud_floor: floor},
                     type: 'POST',
                     success: function(data) {
                         $('#tag_cloud).html(data);
                     },
    });

};

Вот мой взгляд.

@login_required
def tag_page(request, username, tag):
  if username == request.user.username:
    tags = request.user.userprofile.tag_set.all()

    if request.is_ajax() and request.POST:
      floored_tags = []
      for t in tags:
        if t.item_set.all().count() >= int(request.POST['tag_cloud_floor']):
          floored_tags.append(t)
      tags = floored_tags

    tag = Tag.objects.get(title=tag)
    items = tag.item_set.all()
    return render_to_response("tag_page.html", { 'user': request.user , 
                                              'tag': tag,
                                             'tags': tags,
                                            'items': items })
  else:
  return HttpResponseRedirect('/' + request.user.username + '/')

В настоящее время он помещает всю html-страницу в div #tag_page. Я хочу, чтобы он заменил старый div #tag_page на новый div #tag_page. Если я заменю $('#tag_cloud').html(data); с $('body').html(data); он обновляет всю страницу до того уровня, который должен быть, но я думаю, что обновление всей страницы - пустая трата времени.

Если есть лучший способ сделать это, дайте мне знать.

Answer 1

Во-первых, похоже, что ваш код не работает - это недопустимая инструкция Javascript/jQuery:

$('#tag_cloud).html(data);

Вам нужно добавить пропущенную цитату:

$('#tag_cloud').html(data);

Что касается обновления только одного divЯ хотел бы извлечь содержимое этого div в отдельный шаблон my_div.html, включите его в шаблон главной страницы, используя {% include "my_div.html" %}, Затем, в моем представлении AJAX, я рендерил бы и возвращал только то, что my_div.html,

Answer 2

Использовать нагрузку:

$('#tag_cloud').load(' #tag_cloud')

(Обратите внимание на пробел в load параметр; это определяет пустую строку [которая оценивает текущую страницу] как источник, и "#tag_cloud" как фрагмент для загрузки)

Это фактически загрузит #tag_cloud (включая его внешний html) в #tag_cloud, так что вы по сути получите следующую структуру в вашем DOM:

<div id="tag_cloud">
    <div id="tag_cloud">
        <span>tag</span> ...

Чтобы это исправить, просто unwrap ребенок:

$('#tag_cloud').load(' #tag_cloud', function(){$(this).children().unwrap()})

---

О, кстати... вы можете попробовать это здесь на ТАК! Просто вставьте следующее в консоль Firebug и наблюдайте за автоперезагрузкой боковой панели. Вы заметите, как пробивается код скриптинга; это HTML-фильтры безопасности JQ, отключающие <script> элементы для вас (что может раздражать время от времени).

$('#sidebar').load(' #sidebar', function(){$(this).children().unwrap()})

Answer 3

В нашем проекте у нас было слишком много отдельных представлений Ajax, поэтому имело смысл написать промежуточное ПО и повторно использовать те же представления. Недавно я создал приложение, которое позволяет клиенту запрашивать части любой страницы.

Допустим, страница /usual_page/ имеет этот шаблон:

{% extends "another_template.html" %}
{% block title %}Usual page{% endblock %}
{% block content %}...{% endblock %}
{% block my_widget %}widget code{% endblock %}

Если вы установите промежуточное программное обеспечение и сделаете запрос GET, как /usual_page/?partial=my_widget, он отправит клиенту эти данные:

{"blocks": {"my_widget": "widget code"}}

Или, если вы делаете /usual_page/?partial=title,content, он отправит следующее:

{"blocks": {"title": "Usual page", "content": "..."}}

Другие блоки, которые находятся в родительском шаблоне, также могут быть запрошены. Неважно, где находится блок в иерархии, важно только то, что он присутствует на нормальной странице ?partial параметр).

В репозитории BitBucket у меня есть демонстрационный проект, в котором есть модуль, который автоматизирует работу. Он позволяет использовать трюк History.pushState, загружать части страниц и вставлять их в документ.