Обновите 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

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

$('#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 2

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

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

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

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

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

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, загружать части страниц и вставлять их в документ.