Elvis Miranda

Elvis Miranda

1586839012

Use Ajax simply with Django

1. General introduction

AJAX has now become an important part of web applications. AJAX also helps Django greatly in increasing efficiency and saving users time. All popular services use it one way or another. Apps like Facebook, Twitter, Instagram, Gmail, Google Maps, Spotify, etc. cannot work without AJAX.

You will have to use AJAX code at some point. Even Google’s search engine uses AJAX. You might have seen those search terms in the search bar while typing, which are results generated by AJAX.

2. AJAX in Django

We talked briefly about AJAX and how it is present on web pages. Now, let’s find out why we need AJAX in Django. AJAX is an acronym for Asynchronous JavaScript and XML (JavaScript and XML are asynchronous). It is a combination of technologies made to solve essential problems. It uses XMLHttpRequest objects to transmit and receive data.

Problems that AJAX solves

  • Request from your browser to reload the page.
  • The server receives and responds with the newly added messages.
  • The process continues every time you want to read a new mail.

This approach is time consuming and inefficient. The problem becomes more serious when the recipient requests an urgent response. Obviously, it was a real situation for websites before 2003.

In late 2003, all browsers solved the problem using XHR. XHR stands for XMLHttpRequest (XMLHttpRequest objects). Browsers use the XHR object to communicate with the server. Transfer occurred without reloading the entire page. The XMLHttpRequest API stands behind the processing of XHR requests.

Now, almost all browsers have XMLHttpRequest API. This makes applications like Gmail and Google Maps a reality.

How AJAX works in Django

AJAX is really just a combination of 2 JavaScript objects and XHR. The concept is simple:

  • JavaScript code on the client - The browser will make a request when an event occurs on the web page. The JavaScript will create an XHR object and send it as request object to the server. The XHR object contains some JavaScript data / objects. The XHR object also contains the URL or the name of the call-back function on the server.
  • Request is processed by the server with a function callback - The corresponding View function or callback function will process the request. It will send a respone success or failure. Because the request is asynchronous, the rest of the source code is executed without interruption. At that time, the server will process the request.
  • Response returned as a success or failure - A successful response may contain some server data in a variety of formats, such as:
        **first. Text format **
        Html Format (This section contains HTML elements).
        **2. JSON format **
        JSONP format (also JSON but only when the response comes from another domain).
        Script (This section contains some JavaScript that will be changed in the page).
        3. XML format
        Similarly, a failure response can also be formatted.
  • JavaScript will execute according to the response received - Normally, AJAX will execute based on data from server. We can change the HTML components or run some JavaScript. Many things can use it.

3. An example of using AJAX in practice

In this article, we will create a simple website application that manages friends list using AJAX in Django.

Initial setting

We will use the jQuery library to easily implement JavaScript; moreover, we will also use Bootstrap 4 to make the application work better.

Below is the base.html template, including the jQuery library and the bootstrap framework. Make sure you include these link and script correctly. Also, note the content and javascript blocks, which will be used later.

base.html

<! DOCTYPE html>
<html lang = "en">

<head>
    <meta charset = "utf-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
    <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
    <title> {% block title%} {% endblock title%} </title>
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    {% block style%}
    {% endblock style%}
</head>

<body>
    {% block content%}
    {% endblock content%}

    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"> </script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"> </script>
    {% block javascript%}
    {% endblock javascript%}
</body>

</html>

I assume that you already know how to set up Django. If not, or if you are new to Django, please follow the Django documentation to get the initial setup.

Embark on the Code

In this article, we will use a real-time example to represent POST and GET AJAX requests in Django.

We will use the ScrapBook script in which the user can create a friend and the application will display it flexibly. It will also check if the nickname is used or not by sending a GET request to the server.

Let’s start by creating a Django application called “my_app” with the command startapp. Make sure you run the following manage.py command where the manage.py file exists, that is, in your project directory.

$ python manage.py startapp my_app

After creating the Django application, make sure you add it in INSTALLED_APPS in the settings.py file.

INSTALLED_APPS + = [
    'my_app',
]

Create Models

Create an example model for a Friend with the minimum number of attributes in the models.py file

from django.db import models

# Create your models here.
Class Friend (models.Model):
    # NICK NAME should be unique
    nick_name = models.CharField (max_length = 100, unique = True)
    first_name = models.CharField (max_length = 100)
    last_name = models.CharField (max_length = 100)
    likes = models.CharField (max_length = 250)
    dob = models.DateField (auto_now = False, auto_now_add = False)
    lives_in = models.CharField (max_length = 150, null = True, blank = True)

    def __str __ (self):
        return self.nick_name

After creating models, execute makemigations and migrate by running the following commands.

$ python manage.py makemigrations
$ python manage.py migrate

Then run Django server.

$ python manage.py runserver

POST Request

To submit the form, we need to make a POST request to the server with all the values of the form filled by the user.

1. Create Forms

Create the Django form by inheriting the ModelForm. In FriendForm, I changed the dob field and activated the DateField utility with some changes for the year. Also note that in the __init__ method, I’ve updated an HTML attribute with form-control for every form field so that Bootstrap is enabled on every field.

Finally, in the Meta subclass, I have included the method class and the fields that are likely to be displayed.

Note that I have created a new file named forms.py in my application directory, with the following content:

from .models import Friend
from django import forms
import datetime

FriendForm class (forms.ModelForm):
    ## change the widget of the date field.
    dob = forms.DateField (
        label = 'What is your birth date?',
        # change the range of the years from 1980 to currentYear - 5
        widget = forms.SelectDateWidget (years = range (1980, datetime.date.today (). year-5))
    )

    def __init __ (self, * args, ** kwargs):
        super (FriendForm, self) .__ init __ (* args, ** kwargs)
        ## add a "form-control" class to each form input
        ## for enabling bootstrap
        for name in self.fields.keys ():
            self.fields [name] .widget.attrs.update ({
                'class': 'form-control',
            })

    Meta class:
        model = Friend
        fields = ("__all__")

2. Create Views

After creating the form, import FriendForm into views. There are 2 views that should be considered in this section, and they are indexView and postFriend.

  • indexView creates a FriendForm object, takes all friends objects from the database and sends them to the index.html template, which we will discuss later.
  • postFriend is an AJAX POST view, processing POST requests. You will notice that it is similar to the normal view, but with some changes, such as JsonResponse and serialize. We use these methods because this is an AJAX view, so we only need to deal with JSON.

The content of the views.py file is as follows:

from django.http import JsonResponse
from django.core import serializers
from .forms import FriendForm
from .models import Friend

def indexView (request):
    form = FriendForm ()
    friends = Friend.objects.all ()
    return render (request, "index.html", {"form": form, "friends": friends})

def postFriend (request):
    # request should be ajax and method should be POST.
    if request.is_ajax and request.method == "POST":
        # get the form data
        form = FriendForm (request.POST)
        # save the data and after fetch the object in instance
        if form.is_valid ():
            instance = form.save ()
            # serialize in new friend object in json
            ser_instance = serializers.serialize ('json', [instance,])
            # send to client side.
            return JsonResponse ({"instance": ser_instance}, status = 200)
        else:
            # some form errors occured.
            return JsonResponse ({"error": form.errors}, status = 400)

    # some error occured
    return JsonResponse ({"error": ""}, status = 400)

3. Create URLs

For the views above, create a URL for each view. Note the name given to the postFriend path, which will be used in the template mentioned later in this article.

The content of the urls.py file is as follows:

from django.urls import path
from my_app.views import (
    indexView,
    postFriend,
)

urlpatterns = [
    # ... other urls
    path ('', indexView),
    path ('post / ajax / friend', postFriend, name = "post_friend"),
    # ...
]

4 Create Templates

Now that you have created the backend, let’s move on to the frontend of this article.

In index.html, we will first extend from base.html, which was mentioned earlier in this article. Moreover, we will write the content inside the blocks.

The template is divided into two parts. The first part renders the form, the second part displays the friends objects previously stored in the table.

index.html

{% extends "base.html"%}

{% block content%}

<div class = "container-fluid">
    <form id = "friend-form">
        <div class = "row">
            {% csrf_token%}
            {% for field in form%}
            <div class = "form-group col-4">
                <label class = "col-12"> {{field.label}} </label>
                {{field}}
            </div>
            {% endfor%}
            <input type = "submit" class = "btn btn-primary" value = "Create Friend" />
        </div>
    <form>
</div>
<hr />

<div class = "container-fluid">
    <table class = "table table-striped table-sm" id = "my_friends">
        <thead>
            <tr>
                <th> Nick name </th>
                <th> First name </th>
                <th> Last name </th>
                <th> Likes </th>
                <th> DOB </th>
                <th> lives in </th>
            </tr>
        </thead>
        <tbody>
        {% for friend in friends%}
        <tr>
            <td> {{friend.nick_name}} </td>
            <td> {{friend.first_name}} </td>
            <td> {{friend.last_name}} </td>
            <td> {{friend.likes}} </td>
            <td> {{friend.dob | date: "Y-m-d"}} </td>
            <td> {{friend.lives_in}} </td>
        </tr>
        {% endfor%}
        </tbody>
    </table>

</div>
{% endblock content%}

Now move on to the JavaScript section of this article.

When submitting the form, we will serialize the form’s data and make an AJAX POST request, then send it to the server.

With the request successful, add a new row to the table.

Note that we used reversed URL, mentioned in the urls.py section. This helps you not to write hard URLs.

You can put this reversed URL tag into the HTML property and then fetch the following property. Put this JavaScript code into the js file.

index.html

{% block javascript%}
<script>
    / *
        On submiting the form, send the POST ajax
        request to server and after successfull submission
        display the object.
    * /
    $ ("# friend-form"). submit (function (e) {
        // preventing from page reload and default actions
        e.preventDefault ();
        // serialize the data for sending the form data.
        var serializedData = $ (this) .serialize ();
        // make POST ajax call
        $ .ajax ({
            type: 'POST',
            url: "{% url 'post_friend'%}",
            data: serializedData,
            success: function (response) {
                // on successfull creating object
                // first\. clear the form.
                $ ("# friend-form"). trigger ('reset');
                // 2\. focus to nickname input
                $ ("# id_nick_name"). focus ();

                // display the newly friend to table.
                var instance = JSON.parse (response ["instance"]);
                var fields = instance [0] ["fields"];
                $ ("# my_friends tbody"). prepend (
                    `<tr>
                    <td> $ {fields ["nick_name"] || ""}} </td>
                    <td> $ {fields ["first_name"] || ""}} </td>
                    <td> $ {fields ["last_name"] || ""}} </td>
                    <td> $ {fields ["likes"] || ""}} </td>
                    <td> $ {fields ["dob"] || ""}} </td>
                    <td> $ {fields ["lives_in"] || ""}} </td>
                    </tr> `
                )
            },
            error: function (response) {
                // alert the error if any error occured
                alert (response ["responseJSON"] ["error"]);
            }
        })
    })
</script>
{% endblock javascript%}

GET Request

Now switch to GET Request. In our current scenario, before submitting the form, we can check if a nickname already exists in the database by sending the entered nickname back to the server.

The following is a screenshot of what we will build in this section.

1. Create Views

Let’s create a view for this scenario. In the checkNickName view, we first take the nickname that was sent by the AJAX request and then check to see if any of our friends have this nickname in the database. If it already exists, then we return it with a value of False, otherwise it is True.

from django.http import JsonResponse
from .models import Friend

def checkNickName (request):
    # request should be ajax and method should be GET.
    if request.is_ajax and request.method == "GET":
        # get the nick name from the client side.
        nick_name = request.GET.get ("nick_name", None)
        # check for the nick name in the database.
        if Friend.objects.filter (nick_name = nick_name) .exists ():
            # if nick_name found return not valid new friend
            return JsonResponse ({"valid": False}, status = 200)
        else:
            # if nick_name not found, then user can create a new friend.
            return JsonResponse ({"valid": True}, status = 200)

    return JsonResponse ({}, status = 400)

2. Generate URLs

For the above view, create a URL called validate_nickname.

from django.urls import path
from my_app.views import (
    checkNickName
)

urlpatterns = [
    # ... other urls
    path ('get / ajax / validate / nickname', checkNickName, name = "validate_nickname")
    # ...
]

3. Create Templates

Now, write the AJAX GET request for the focusout event of the nick_name input field by retrieving the current nick_name value and sending it to the server.

After a successful GET request, please inform whether nick_name is accepted or not.

{% block javascript%}
<script>
    / *
    On focus out on input nickname,
    call AJAX get request to check if the nickName
    already exists or not.
    * /
    $ ("# id_nick_name"). focusout (function (e) {
        e.preventDefault ();
        // get the nickname
        var nick_name = $ (this) .val ();
        // GET AJAX request
        $ .ajax ({
            type: 'GET',
            url: "{% url 'validate_nickname'%}",
            data: {"nick_name": nick_name},
            success: function (response) {
                // if not valid user, alert the user
                if (! response ["valid"]) {
                    alert ("You cannot create a friend with same nick name");
                    var nickName = $ ("# id_nick_name");
                    nickName.val ("")
                    nickName.focus ()
                }
            },
            error: function (response) {
                console.log (response)
            }
        })
    })
</script>
{% endblock javascript%}

BONUS: Using Class-based Views

If you have some experience with Django, then you probably know that you can create views by function and by Class. Most developers are confused about how to use them and when to use them. So, in this short article, convert the above FBV (function based view) code to the CBV (class based view) code.

In this section, I will combine the indexView and postFriend functions into a single Class called FriendView, inherit the View class and have two methods, get and post, respectively.

The content of the views.py file is as follows:

from django.shortcuts import render
from django.http import JsonResponse
from django.core import serializers
from .forms import FriendForm
from .models import Friend

from django.views import View

FriendView (View) class:
    form_class = FriendForm
    template_name = "index.html"

    def get (self, * args, ** kwargs):
        form = self.form_class ()
        friends = Friend.objects.all ()
        return render (self.request, self.template_name,
            {"form": form, "friends": friends})

    def post (self, * args, ** kwargs):
        if self.request.is_ajax and self.request.method == "POST":
            form = self.form_class (self.request.POST)
            if form.is_valid ():
                instance = form.save ()
                ser_instance = serializers.serialize ('json', [instance,])
                # send to client side.
                return JsonResponse ({"instance": ser_instance}, status = 200)
            else:
                return JsonResponse ({"error": form.errors}, status = 400)

        return JsonResponse ({"error": ""}, status = 400)

Please write urlpattern for CBV discussed above. The content of the urls.py file is as follows:

from django.urls import path
from my_app.views import (
    FriendView
)

urlpatterns = [
    # ... other urls
    path ("", FriendView.as_view (), name = "friend_cbv"),
    # ...
]

To convert from FBV to CBV, you need to change the reverse URL pattern as well.

index.js

// other previous stuff
$ .ajax ({
    type: 'POST',
    url: "{% url 'friend_cbv'%}", // CHANGE the POST url
    // ... continues
// ...

4. Conclusion

AJAX is the best way to perform asynchronous tasks in Django, at least on a small scale. If you want to perform an asynchronous task on a larger scale, you can do socket programming in Django or use front-end JavaScript libraries like Angular, Vue or React.

#python #django

What is GEEK

Buddha Community

Use Ajax simply with Django
Ahebwe  Oscar

Ahebwe Oscar

1620177818

Django admin full Customization step by step

Welcome to my blog , hey everyone in this article you learn how to customize the Django app and view in the article you will know how to register  and unregister  models from the admin view how to add filtering how to add a custom input field, and a button that triggers an action on all objects and even how to change the look of your app and page using the Django suit package let’s get started.

Database

Custom Titles of Django Admin

Exclude in Django Admin

Fields in Django Admin

#django #create super user django #customize django admin dashboard #django admin #django admin custom field display #django admin customization #django admin full customization #django admin interface #django admin register all models #django customization

Ahebwe  Oscar

Ahebwe Oscar

1620185280

How model queries work in Django

How model queries work in Django

Welcome to my blog, hey everyone in this article we are going to be working with queries in Django so for any web app that you build your going to want to write a query so you can retrieve information from your database so in this article I’ll be showing you all the different ways that you can write queries and it should cover about 90% of the cases that you’ll have when you’re writing your code the other 10% depend on your specific use case you may have to get more complicated but for the most part what I cover in this article should be able to help you so let’s start with the model that I have I’ve already created it.

**Read More : **How to make Chatbot in Python.

Read More : Django Admin Full Customization step by step

let’s just get into this diagram that I made so in here:

django queries aboutDescribe each parameter in Django querset

we’re making a simple query for the myModel table so we want to pull out all the information in the database so we have this variable which is gonna hold a return value and we have our myModel models so this is simply the myModel model name so whatever you named your model just make sure you specify that and we’re gonna access the objects attribute once we get that object’s attribute we can simply use the all method and this will return all the information in the database so we’re gonna start with all and then we will go into getting single items filtering that data and go to our command prompt.

Here and we’ll actually start making our queries from here to do this let’s just go ahead and run** Python manage.py shell** and I am in my project file so make sure you’re in there when you start and what this does is it gives us an interactive shell to actually start working with our data so this is a lot like the Python shell but because we did manage.py it allows us to do things a Django way and actually query our database now open up the command prompt and let’s go ahead and start making our first queries.

#django #django model queries #django orm #django queries #django query #model django query #model query #query with django

I am Developer

1615040237

PHP jQuery Ajax Post Form Data Example

PHP jquery ajax POST request with MySQL. In this tutorial, you will learn how to create and submit a simple form in PHP using jQuery ajax post request. And how to submit a form data into MySQL database without the whole page refresh or reload. And also you will learn how to show an error message to the user if the user does not fill any form field.

And this tutorial also guide on how to send data to MySQL database using AJAX + jQuery + PHP without reloading the whole page and show a client-side validation error message if it has an error in the form.

PHP jQuery AJAX POST Form Data In Into MySQL DB Example

Just follow the few below steps and easily create and submit ajax form in PHP and MySQL with client-side validation.

  • Create Database And Table
  • Create a Database Connection File
  • Create An Ajax POST Form in PHP
  • Create An Ajax Data Store File

https://www.tutsmake.com/php-jquery-ajax-post-tutorial-example/

#jquery ajax serialize form data example #submit form using ajax in php example #save form data using ajax in php #how to insert form data using ajax in php #php jquery ajax form submit example #jquery ajax and jquery post form submit example with php

Kacey  Hudson

Kacey Hudson

1615513653

What is Django Used For? The Six Most Common Applications | Hacker Noon

Django is a web app framework based upon Python, but is not a part of Python. Python being open-source language, easy to learn and adapt, has become the programming language of choice for beginners as well as seasoned developers in recent years. Django was created to support web application development, web APIs, web services. Thanks to rising popularity of Python, Django too became a framework of choice for python developers.

But, why Django specifically? Why are popular social networking sites, online magazines and e-commerce sites using Django? Why is it so popularly used by developers? Let’s find out what Django is used for.

6 Ways Developers are Using Django

  • For scalable web applications
  • Django is used for applications with multiple user roles
  • For building speedy SaaS applications
  • Secure E-commerce and Enterprise applications
  • Django is Used for a building low cost MVP
  • For building Cross-platform applications

#django #django-in-mvp #django-in-saas #resize-image-in-django #django-tips

I am Developer

1611112146

Codeigniter 4 Autocomplete Textbox From Database using Typeahead JS - Tuts Make

Autocomplete textbox search from database in codeigniter 4 using jQuery Typeahead js. In this tutorial, you will learn how to implement an autocomplete search or textbox search with database using jquery typehead js example.

This tutorial will show you step by step how to implement autocomplete search from database in codeigniter 4 app using typeahead js.

Autocomplete Textbox Search using jQuery typeahead Js From Database in Codeigniter

  • Download Codeigniter Latest
  • Basic Configurations
  • Create Table in Database
  • Setup Database Credentials
  • Create Controller
  • Create View
  • Create Route
  • Start Development Server

https://www.tutsmake.com/codeigniter-4-autocomplete-textbox-from-database-using-typeahead-js/

#codeigniter 4 ajax autocomplete search #codeigniter 4 ajax autocomplete search from database #autocomplete textbox in jquery example using database in codeigniter #search data from database in codeigniter 4 using ajax #how to search and display data from database in codeigniter 4 using ajax #autocomplete in codeigniter 4 using typeahead js