DEV Community: tochimclaren

Django ajax form submission with fetch api

tochimclaren — Sat, 14 Aug 2021 00:14:31 +0000

Following my previous post Django infinite scrolling with javascript fetch api and function based view

I will be covering how to do hassle free django ajax form submission with fetch api and django form.
the code is available over here. link

Setting templates.

Moving on from the previous tutorial, add the following code in template directory of the app;

blog/templates/post/partials/navigation.html

Create a directory named partials; inside it, paste this bootstrap navbar html component, we going to include this in the base html template which we will create in a minute. We don't want to clutter the base template.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">Posts</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="{% url 'create' %}">Create</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

after that create a base.html inside the blog template directory

blog/templates/post/base.html

Add the following html template

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'blog/css/bootstrap.min.css' %}">
    <title>My Blog</title>
    <style>
    #content {
        margin: 0 auto;
        width: 40vw;
    }
    </style>
</head>

<body>
    {% block navigation %}
        {# include the navigatio #}
    {% include 'post/partials/navigation.html' %}
    {% endblock %}
    <div id="notify">

    </div>
    {% block content %}
    {% endblock %}

    <script src="{% static 'blog/js/bootstrap.bundle.min.js' %}"></script>
    {% block script %}
    {% endblock %}
</body>

</html>

open blog and create a new python file forms.py
blog/forms.py
inside blog/forms.py add the below code

from django import forms
from .models import Post


class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ['title', 'content']

in views.py import the PostForm

from .forms import PostForm
from django.forms import model_to_dict
from django.http import JsonResponse
from django.shortcuts import render

add the following code to views.py

def post_create(request):
    form = PostForm()
    if request.method == "POST":
        form = PostForm(request.POST or None)
        if form.is_valid():
            instance = form.save(commit=False)
            instance.save()
            # converts Post instance to dictionary so JsonResponse can serialize it to Json
            return JsonResponse(
                model_to_dict(instance, fields=['title']), status=201)
        else:
            return JsonResponse(form.errors, safe=False, status=200)

    ctx = {
        'form': form
    }
    return render(request, 'post/post_create.html', ctx)

in blog/urls.py add the post_create view function

from django.urls import path
from . import views

urlpatterns = [
    path('', views.posts, name="posts"),
    path('create/', views.post_create, name="create") # new
]

before we create a new template install django-widget-tweaks
pipenv install django-widget-tweaks

widget-tweaks allows you to add html attributes in the templates using it's render template tags django-widget-tweaks

add it to your INSTALLED_APPS like this widget_tweaks

in blog/templates/post create new html template post_create.html
blog/templates/post/post_create.html

{% extends "post/base.html" %}
{% load static %}
{% load widget_tweaks %}
{% block content %}
    <form action="" method='post' class="mx-auto w-75" id="PostCreateForm">
        <h1 class="h1 ms-auto">Create Post</h1>
        {% csrf_token %}
            {% for field in form %}
                <label for="{{field.id_for_label}}" class="my-2">{{field.label_tag}}</label>
                {{ field.errors }}
                {% render_field field class="form-control" %}
            {% endfor %}
        <input type="submit" value="submit" class="btn btn-outline-dark mt-2">
    </form>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="{% static 'blog/js/create.js' %}"></script>
{% endblock %}

in your blog/static/blog/js create a new js file with name create.js

blog/static/blog/js/create.js

const postForm = document.querySelector("#PostCreateForm");


function handleSubmit(postForm) {
    postForm.addEventListener("submit", e => {
        e.preventDefault();
        formData = new FormData(postForm);
        fetch('/create/', {
                method: 'POST',
                body: formData,
            })
            .then(response => response.json())
            .then(data => {
                postForm.reset();
                document.querySelector("#notify").innerHTML = `<div class="alert alert-info alert-dismissible fade show" role="alert">
                                                                  <strong>Success!</strong> ${data.title} <strong>saved</strong>.
                                                                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                                                </div> `
            })
            .catch((error) => {
                console.error('Error:', error);
            });
    })
}

handleSubmit(postForm)

And we are done! upcoming tutorial we will add image field in Post model and do some validation with ajax... stay tuned.

Django Infinite scrolling with javascript fetch api and function based view.

tochimclaren — Thu, 12 Aug 2021 23:35:43 +0000

Hello, I will take you straight through the process of adding inifinte pagination in your django application like it's abc complete code is down below

Note: this is for absolute beginner

django-infinite-scroll

First thing first, we create our django project.

mkdir django-infinite-scroll

cd django-infinite-scroll

pipenv shell #this initializes with Pipfile and creates the environment

We install our django application

pipenv install django

We create a new django project

django-admin startproject core .

We create our app blog and add it to INSTALLED_APPS.

python manage.py startapp blog

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # our blog app
    'blog.apps.BlogConfig',
]

Run the development server and make sure everything is working properly.

python manage.py runserver

Migrate the database and createsuperuser in my case the credentials were username: admin password: admin run the server and let the fun begin!

python manage.py migrate

python manage.py createsuperuser

python manage.py runserver

Creating a simple model for a blog to hold

# models.py
from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=255)
    content = models.TextField()
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)
    published = models.BooleanField(default=False)

    def __str__(self):
        return self.title

# views.py
from django.core.paginator import Paginator
from django.http import JsonResponse
from django.shortcuts import render
from .models import Post


def posts(request):
    # it's not a bug if it's intentional ;)
    post_list = Post.objects.filter(published=False)
    # we get page 1 returns 10 post objects
    paginator = Paginator(post_list, 10)

    # page_number is initialized to `1` see main.js
    page_number = request.GET.get('page')

    # we are applying page number which defaults to `1`
    page_obj = paginator.get_page(page_number)

    if page_number:
        # We are checking if `page_number` < or == 
        paginator.num_pages total amount of pages returned by the `Paginator` this only runs if the above conditions are met
        if int(page_number) <= paginator.num_pages:

            obj_list = paginator.get_page(page_number)

            obj_list = obj_list.object_list.values()

            return JsonResponse(list(obj_list), status=200, safe=False)

    ctx = {'page_obj': page_obj}
    return render(request, 'post/posts.html', ctx)

Add your app url to project url config

#core/urls.py

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blog.urls'))
]

Define your app urls.py

# blog/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('', views.posts, name="posts")
]

We create a simple example template

# template
# 'blog/templates/post/posts.html'
{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #content{
            margin: 0 auto;
            width: 40vw;
        }
    </style>
</head>

<body>
    <div id="content">
        {% for post in page_obj %}
            <div>
                <h1>{{post.title}}</h1>
                <p>{{post.content}}</p>
            </div>
        {% endfor %}
    </div>
</body>
<script type="text/javascript" src="{% static 'blog/js/main.js' %}"></script>

</html>

On the js side of things, we are listening to scroll event, when we scroll to the bottom of the page, we trigger a function that calls our view which in turn returns a Json objects that we can inject to our template.

# main.js
# 'blog/static/blog/js/main.js'

content = document.querySelector("#content");
let page = 1

window.onscroll = function() {
    url = `/?page=${page}`
    if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
        fetch(url).then(res => {
            if (res.ok) {
                return res.json();
            }
        }).then(data => {
            console.dir(data)
            page += 1
            content.innerHTML += data.map(
                obj=>`<div>
                <h1>${obj.title}</h1> 
                <p>${obj.content}</p> 
                </div>`
                ).join("\n")
        }).catch(err => {

        })
    }
}

I hope this helps shed some weight on your web application, because things like these are not worth intsalling an external library (waypointjs i'm looking at you), please help your app shed some weight! Happy coding!