Django Ajax Request using X-editable bootstrap Plugin Example
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 ProjectIn 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 exampleStep 2 : Create a App
python3 manage.py startapp editableStep 3 : Update setting.py
In this step we require to our installed app are register in INSTALLED_APPS setting.py file, Add the below lines to your settings.py file:
Next, you need to add it in the settings.py file as follows:
....
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'editable',
]
Step 4 : Database Setup
Next step, we will modify the settings.py file and update the database settings to configure the mydb database:
settings.pyDATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'example',
'USER':'root',
'PASSWORD':'root',
'HOST':'localhost',
'PORT':'3306'
}
}
Step 5 : Creating the Views
In this step, we need to create the views for performing fetch record to the database.Open the editable/views.py file and add:
editable/views.pyfrom 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']
obj.save()
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:
editable/templates/index.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Django Ajax Request using X-editable bootstrap Plugin Example - Tuts-Station.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-12 text-center">
<h4>Django X-editable Bootstrap Plugin Example Tutorial - Tuts-Station.com</h4>
</div>
</div>
<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">
<td>UserName</td>
</tr>
{% for user in users %}
<tr>
<td>
<a href="#" class="xedit" data-pk="{{user.id}}" data-type="text" data-title="Enter Username" data-name="username"> {{user.username}}</a>
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
</div>
</div>
</div>
<script>
/*------------------------------------------
--------------------------------------------
About
--------------------------------------------
--------------------------------------------*/
$(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>' +
'</button>';
$('.xedit').editable({
url: '{% url 'editableStore' %}',
mode: 'inline',
params: {
csrfmiddlewaretoken:'{{csrf_token}}',
model:'User'
},
success: function (response, newValue) {
console.log('Updated Successfully', newValue);
}
});
});
</script>
</body>
</html>
Step 7 : Creating URLs
In this section, we’ll create the urls to access our views.Go to the urls.py editable/urls.py file and update it as follows:
editable/urls.pyfrom 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 urls.py your root preoject folder lets update the file.
example/urls.pyfrom django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
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 manage.py runserver
Next, go to the address with a web browser.
http://localhost:8000/editable/
I Hope It will help you....