Coder Social home page Coder Social logo

django-ajax-blocks's Introduction

django-ajax-blocks

This Django app allows the user to render templates partially and serve the result via JSON. This enables faster template rendering and less bandwidth usage.

The app is an alpha currently and mainly to demonstrate the idea but it should work well enough.

Consider the following example using a single view:

from django.utils.text import mark_safe
from ajax_blocks import TemplateResponse

def page(request):
    p = int(request.GET.get('page', 1))
    if p == 1:
        title = 'Welcome to my site'
        content = mark_safe('Hi, <a href="/?page=2">Click me</a>')
    else:
        title = 'Loaded via AJAX'
        content = 'Impressive, now try forward and back buttons'
    c = {'title': title, 'content': content}
    return TemplateResponse(request, 'page.html', c, ajax_blocks=('title', 'content'))

and this template:

{% load static %}
<html>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="{% static 'ajax_blocks/helpers.js' %}"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $('a').click(function(ev) {
      render_ajax_blocks(ev.target.href);
      return false;
    });
  });
  </script>
<head>
  <title data-block="title">{% block title %}{{ title }}{% endblock title %}</title>
</head>
<body data-block="content">{% block content %}{{ content }}{% endblock content %}</body>
</html>

The first request is normally served as HTML. When the user clicks the link only the title and content blocks are rendered on the server and returned as JSON. The history updates via pushState on the client side and as such enables the forward and back buttons to work properly. While this example is somewhat minimal it already cuts bandwidth down to a third.

The included helpers.js only serves as a simple example, a realworld application might wanna use something better suited to their needs.

More complicated examples include template inheritance which also works, if not you found a bug. If that's the case please let me know!

Todo

  • Tests
  • Better JS integration

Installation

First, install the app with your favorite package manager, e.g.:

pip install django-ajax-blocks

Alternatively, use the repository on Github.

Then configure your Django site to use the app:

  1. Add 'ajax_blocks' to your INSTALLED_APPS setting.

django-ajax-blocks's People

Contributors

apollo13 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

aburan28

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.