Evgenij LegotskojJan. 8, 2018, 1:52 a.m.

Django - Tutorial 031. Change URL without reloading the page with partial content loading

The less information a site has to transmit to each request, the better. Because we get less load on the server and on the communication channel. The first such improvement on the site I did was loading the list of articles when navigating the page paginator.

The point is that when the user wants to go to the next page with a list of articles and clicks on the link in the paginator , the click event is intercepted, the event is canceled, but the AJAX request is sent to the server with the number of the requested page. When the server receives such a request, it only renders the list of articles and sends it back.


Replace the URL in the browser without reloading the page

For the main page of the site I created a JavaScript file index.js, which will contain the logic of the AJAX request, as well as the binding of the click handler to the links in the paginator. An important point is that I use django-bootstrap3 for the paginator. Accordingly, to connect the click handler, I use the '.paginator> li> a' selector.

The contents of the file will be as follows

class Index {

    static initPaginator() {
        document.body.querySelectorAll('.pagination > li > a')
                .forEach( link => link.addEventListener('click', Index.pagination_link_clickHandler) );
    }

    static pagination_link_clickHandler(event){
        event.preventDefault(); // prohibit an event

        let path = event.target.href; // we take the path
        let page = Global.getURLParameter(path, 'page');

        if (typeof page !== 'undefined') {
            jQuery.ajax({
                url: jQuery(this).attr('action'),
                type: 'POST',
                data: {'page': getURLParameter(path, 'page')}, // take the number of the page you want to display

                success : function (json) {
                    // If the request was successful and the site returned the result
                    if (json.result)
                    {
                        window.history.pushState({route: path}, "EVILEG", path); // set the URL in the browser string
                        jQuery("#articles-list").replaceWith(articles); // We replace the div with a list of articles for a new one 
                        Index.initPaginator(); // Reinitialize the paginator
                        jQuery(window).scrollTop(0); // Scroll the page to the top
                    }
                }
            });
        }
    }
}

Index.initPaginator();

I try to use the standard ecmascript 6. Therefore, for the index page, the Index class is used to generalize the methods used.

To get the page number in the URL, use the getURLParameter function.

Template structure

So we need to have a special template structure, namely, there must be a template for rendering the list of articles, in my case a template with a preview of one article, as well as a template for the main page of the site.

That is, it will be:

  • article_preview.html - This template will not be considered, since it is not of interest to us in this case
  • article_previews_list.html
  • index.html

index.html

index.html is inherited from the base template base.html in which there is a block for connecting javascript files.

{% extends 'base.html' %}
{% block page %}
    {% include 'article_previews_list.html' %}
{% endblock %}
{% block javascript_footer %}
    <script src="/static/js/index.js"></script>
{% endblock %}

article_previews_list.html

The list of articles is a div that will be replaced with each request.

<div id="articles-list">
    {% load bootstrap_pagination from bootstrap3 %}
    {% for article in object_list %}
        {% include 'knowledge/article_preview.html' %}
    {% endfor %}
    {% bootstrap_pagination object_list pages_to_show="10" %}
</div>

urls.py

The route for the main page will look like this

urlpatterns = [
    url(r'^$', views.IndexView.as_view(), name='index')
]

views.py

And now consider a view that will return a list of articles or just a whole page

class IndexView(View):
    template_name = 'index.html'

    def get(self, request):
        return render(request=request, template_name=self.template_name, context={'object_list': get_paginated_page(request, Article.objects.all())})

    def post(self, request):
        if request.is_ajax():
            return JsonResponse({
                "result": True,
                "articles": render_to_string(
                    request=request,
                    template_name='article_previews_list.html',
                    context={'object_list': get_paginated_page(request, Article.objects.all())}
                )
            })
        else:
            raise Http404()

An important point is that the site must correctly process both types of requests, both normal and AJAX requests. Since the user can go directly to one of the pages, and through the pagination on the site.

Perhaps in this code you will be interested in the get_paginated_page method, which uses the Paginator class to generate the page you want to display.

# -*- coding: utf-8 -*-

from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage


def get_paginated_page(request, objects, number=10):
    current_page = Paginator(objects, number)
    page = request.GET.get('page') if request.method == 'GET' else request.POST.get('page')
    try:
        return current_page.page(page)
    except PageNotAnInteger:
        return current_page.page(1)
    except EmptyPage:
        return current_page.page(current_page.num_pages)

For Django I recommend VDS-server of Timeweb hoster .

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
Support the author Donate
B

Евгений Здравствуйте! Не могу понять вот эту часть кода: url: jQuery(this).attr('action')
наверное здесь должен быть путь к url, тогда 'action' на какой url указывает?

Добрый день. Там будет url, на который указывает ссылка тега a в пагинаторе, если правильно помню )) Написал этот код и забыл.

Comments

Only authorized users can post comments.
Please, Log in or Sign up
Fornex

Let me recommend you a great European Fornex hosting.

Fornex has proven itself to be a stable host over the years.

For Django projects I recommend VPS hosting

Following the link you will receive a 5% discount on shared hosting services, dedicated servers, VPS and VPN

View Hosting
YL

C++ - Test 001. The first program and data types

  • Result:66points,
  • Rating points-1
k
  • korsar
  • Nov. 23, 2022, 8:57 a.m.

C++ - Test 005. Structures and Classes

  • Result:50points,
  • Rating points-4
TM

C++ - Тест 003. Условия и циклы

  • Result:78points,
  • Rating points2
Last comments
b

GameDev on Qt - Tutorial 5. The explosion of bullets using sprite images

Если вдруг кто-то прочитает.... Скачал проект, скомпилил, запустил. Всё красиво и объектно ориентировано, но вот FPS дико страдает, когда появляется 10+ врагов. Может есть какие-то надстрой…
  • juvf
  • Nov. 25, 2022, 12:14 a.m.

Qt/C++ - Lesson 051. QMediaPlayer – simple audio player

Добрый день. Подскажите, как можно перехватить в Qt или Qml уровень воспроизводимого звука? Т.е. требуется сделать виртуальный винтажный индикатор (стрелочный или светодиодный), который бы …
  • juvf
  • Nov. 3, 2022, 3:20 a.m.

QML - Lesson 007. ListView. Dynamic creation and deletion of elements

Добрый день. Очень полезная статья. Спасибо. Вопрос такой: 1) нужно "взять" кнопку 2 пальцем (прикаснулись пальцем к кнопке 2, держим, через 2-3 кнопка оторвалась от ListView) и пере…

PyQt5 - Lesson 007. Works with QML QtQuick (Signals and slots)

А можно ли из QML сделать привязку свойства к свойству пайтоновского объекта? Ну, т.е. , например, у нашего объекта Calculator обхвялем свойства sumresult и subresult c с декоратором @pyqtProp…
MA

Python Image Recognition with TensorFlow and Keras

А что собственно выводит программа, как вывести то что она смогла распознать?
Now discuss on the forum
AB

Sorting the added QML elements in the ListModel

I am writing an alarm clock in QML, I am required to sort the alarms in ascending order (depending on the date or time (if there are several alarms on the same day). I've done the sorting …
AM

Как добавить в скрипт размер каждого файла в Мб ?

IDLE (Python 3.10 64-bit) Win 10 Есть такой скрипт: Поиск перечня файлов в папке и запись списка: import ospath = 'E:\Мой Python\__Видеокурсы Python'rez = sorted(os.listdir(pa…
n
  • nkly
  • Oct. 18, 2022, 9:14 a.m.

Как сохранить данные древовидной модели на основе QStandardItemModel в файл

Вы меня неправильно поняли. Допустим я собираю кулинарные рецепты и один из них - рецепт супа Харчо. Структура файла данных такова: { node:Рецепт супа Харчо parent:Вкусные блюда, …

Вопрос по Qt Creator

Добрый день. Не знаю, подобную проблему я не решал.

Задать другой класс div-у

Добрый день. Попробуйте использовать Selenium. Это библиотека есть в виде Python модуля и она позволяет загружать страницу и манипулировать html элементами. Как я понимаю, в ней можно…
About
Services
© EVILEG 2015-2022
Recommend hosting TIMEWEB