Django Ajax Request using X-editable bootstrap Plugin Example

Published On: 28/07/2022 | Category: Django Python

Hi Dev,

In this post, we will learn django ajax request using X-editable bootstrap plugin tutorial. This article will give you simple example of ajax request using x-editable bootstrap plugin in django. This post will give you simple example of ajax request using x-editable bootstrap plugin. This tutorial will give you simple example of django x-editable bootstrap plugin. follow bellow step for django ajax request.

So, sometimes we need to require our project inline edit record using ajax so x-editable bootstrap plugin in our django project.

Here,i will give you a simple and easy example how to use X-editable in laravel simply follow my all steps.

Step 1 : Create a Project

In this step, we’ll create a new django project using the django-admin. Head back to your command-line interface and run the following command:

django-admin startproject example
Step 2 : Create a App
python3 startapp editable
Step 3 : Update

In this step we require to our installed app are register in INSTALLED_APPS file, Add the below lines to your file:

Next, you need to add it in the file as follows:

Step 4 : Database Setup

Next step, we will modify the file and update the database settings to configure the mydb database:
    'default': {  
        'ENGINE': 'django.db.backends.mysql',  
        'NAME': 'example',  
Step 5 : Creating the Views

In this step, we need to create the views for performing fetch record to the database.Open the editable/ file and add:

from django.shortcuts import render, redirect
from django.contrib.auth.models import User
from django.http import JsonResponse
from django.contrib.auth import get_user_model
from django.http import HttpResponse

# Create your views here.
def index(request):
    User = get_user_model()
    users = User.objects.all()
    return render(request, 'index.html',{'users':users})

# Update Logic
def editableStore(request):
    if request.is_ajax and request.method == "POST":
        obj = User.objects.filter(pk=request.POST['pk']).first()
        obj.username = request.POST['value']
    return JsonResponse({"message": 'Username Updated Successfully!!'}, status=200)
Step 6 : Creating the Templates

Here, in this step we need to create a new folder named editables in the templates folder of editables.

Next, open the editable/templates/index.html file and the add:

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Django Ajax Request using X-editable bootstrap Plugin Example -</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <link href="//" rel="stylesheet" />
    <script src="[email protected]/dist/jquery.min.js"></script>
    <script src="[email protected]/dist/umd/popper.min.js"></script>
    <script src=""></script>
    <script src="//"></script>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12 text-center">
                <h4>Django X-editable Bootstrap Plugin Example Tutorial -</h4>
        <div class="row d-flex justify-content-center mt-4">
            <div class="col-md-5">
                <div class="card">
                    <div class="card-body">
                        <table class="table table-bordered table-striped">
                            <tr class="text-center">
                            {% for user in users %}
                                    <a href="#" class="xedit" data-pk="{{}}" data-type="text" data-title="Enter Username" data-name="username"> {{user.username}}</a>
                            {% endfor %}

    $(document).ready(function () {
        $.fn.editableform.buttons =
        '<button type="submit" class="btn btn-primary btn-sm editable-submit p-2">' +
        '<i class="fa fa-fw fa-check"></i>' +
        '</button>' +
        '<button type="button" class="btn btn-warning btn-sm editable-cancel p-2">' +
        '<i class="fa fa-fw fa-times"></i>' +
            url: '{% url 'editableStore' %}',
            mode: 'inline',
            params: {
            success: function (response, newValue) {
                console.log('Updated Successfully', newValue);
Step 7 : Creating URLs

In this section, we’ll create the urls to access our views.Go to the editable/ file and update it as follows:

from django.urls import path
from .views import index, editableStore

urlpatterns = [
    path('editable/', index, name="index"),
    path('editable-store/', editableStore, name="editableStore"),

Next, we will require the modify the your root preoject folder lets update the file.

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

urlpatterns = [
    path('', include('editable.urls')),
Run the Server

In this step, we’ll run the local development server for playing with our app without deploying it to the web.

python runserver

Next, go to the address with a web browser.


I Hope It will help you....