Как я могу вернуться на главную страницу без перезагрузки

Question

В моем проекте у меня есть 2 модели Article и Quote. Каждый раз, когда пользователь нажимает кнопку на домашней странице, он добавляет соответствующую цитату в статью пользователя.

Article.models выглядят так:

class Article(models.Model):
    user = models.OneToOneField(User, null=True)
    quote = models.ManyToManyField(Quote, blank=True, null=True)
    def __unicode__(self):
        return self.user.username

Вот view.py

def add_quote(request, id):
    u = User.objects.get(username=request.user)
        a = Article.objects.get(user=u)
    q = Quote.objects.get(id=id)
    a.quote.add(q)
    a.save()

    return HttpResponseRedirect(reverse("home"))

home.html:

{% for quote in quotes %}
<p>{{ quote.description }}</p> 
<p><a class="btn btn-primary" href="{{ quote.get_absolute_url }}"
role="button" data-container="body" data-toggle="popover" 
data-placement="top" data-content="added">collect &raquo;</a></p>

Это работает. Тем не менее, он также перезагрузит домашнюю страницу. Поэтому, когда я прокручиваю вниз и нажимаю кнопку, страница возвращается наверх и не остается там, где я нажимаю.

Я провел некоторое исследование, выяснив, что dajax может помочь, но просто не знаю, как решить мою проблему с ним или другим эффективным способом?

Answer 1

Есть два способа сделать это, и я рекомендую вам реализовать их оба.

1. Javascript-свободный метод.

Включите привязки для каждой цитаты, поэтому при перенаправлении вы можете перенаправить так:

HttpResponseRedirect(reverse("home")+"#quote_id_%s"%(q.id))

Который будет выглядеть так:

http:example.com#quote_id_123

И переходит к элементу с этим идентификатором, например:

<blockquote id="quote_id_123">Four score and seven years ago...</blockquote>

Это означает, что пользователи, у которых нет Javascript (что все еще удивительно), получают возможность переходить в нужное место.

Для этого вы можете изменить цикл for следующим образом:

{% for quote in quotes %}
    <p id="quote_id_{{quote.id}}">{{ quote.description }}</p> 
    <p><a class="btn btn-primary" href="{{ quote.get_absolute_url }}"
    <!-- etc ... -->
{% endfor %}

2. Используйте прогрессивное улучшение, чтобы добавить Javascript

Это не так просто и потребует написания намного большего количества кода, чем указано выше, но в основном потребует отправки формы с помощью некоторого метода ajax, правильного захвата ответа (или ошибки) и обновления страницы.

Dajax и jQuery, вероятно, помогут в этом отношении, но будут очень специфичны для вашего сайта.