How to Call a Function by clicking a Button in the Django Template File from a Django Application

By Posted on

Introduction

This is an article where the main function is just to show how to call a certain function exist in the Django application. Normally, the function exist in the ‘views.py’ file which is part of the Django application. The following is the structure of the normal Django application exist in a Django project : 

(env) C:\project\apps>dir
Volume in drive C is Windows-SSD
Volume Serial Number is CA30-19A4

Directory of C:\project\apps

09/06/2022 08:19 PM <DIR>       .
09/06/2022 07:13 AM <DIR>       ..
08/24/2022 10:02 AM         215 admin.py
08/24/2022 08:43 AM         146 apps.py
08/26/2022 02:19 PM <DIR>       migrations
08/26/2022 02:05 PM       1,548 models.py
09/06/2022 07:01 PM <DIR>       templates
08/24/2022 08:43 AM          63 tests.py
09/06/2022 08:03 AM         118 urls.py
09/08/2022 06:43 AM         871 views.py
08/24/2022 08:43 AM           0 __init__.py
09/08/2022 06:43 AM <DIR>       __pycache__
7 File(s) 2,961 bytes
6 Dir(s) 66,276,225,024 bytes free

(env) C:\project\apps>

The content of the original ‘views.py’ file exist as follows :

from django.shortcuts import render

# Create your views here.

So, the main target for this article is to just describe how to click in a page which is represented by a Django template file. After clicking the button exist in that page, it will directly call a function exist in the Django application.

How to Call a Function by clicking a Button in the Django Template File

Actually, in order to achieve the purpose for calling a function in a Django application by clicking a button in the page represented by a Django template file, below are the sequences of the actions :

  1. First of all, Just define the function in the ‘views.py’ file as follows for an example : 

    def my_function(request):
    print("This is a click request from a Django template file")

    So, the following is the complete version after the modification above : 

    from django.shortcuts import render

# Create your views here.

def my_function(request):
    print("This is a click request from a Django template file")

  2. Continue on, just define the URL for calling the function. In this case, it is the function with the name of ‘my_function’. In order to do that, just edit the ‘urls.py’ which is part of the Django application. Actually, it exist in the ‘apps’ folder as it is already shown above. Below is the content of the ‘urls.py’ file : 

    from django.urls import path
from apps import views
urlpatterns = [
    path('', views.index, name="index"),
    path('my_function', views.my_function, name="my_function"),
]

  3. Next, just add lines for calling the function from the Django template file. Below is the content of the original of ‘index.html’ as an example of the Django template file : 

    <a href="{% url 'my_function' %}"><button class="btn btn-primary" type="button">Call Function</button></a>

    In the above line, it wraps the button inside a hyperlink tag. So, if there is a click on the button which in turns will also click the hyperlink, it will process the URL exist in the ‘href’ attribute’. In this case, it is processing the URL of ‘my_function’. So, where is the exact URL of ‘my_function’ ?. Actually it is already exist in the previous step. It is defining the URL of ‘my_function’. So, the final revision of the ‘index.html’ file will exist as follows : 

    <!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="{% url 'my_function' %}"><button class="btn btn-primary" type="button">Call Function</button></a>
</body>
</html>

  4. After all of the above steps for the preparation, just execute the Django application as in the following output : 

    (env) C:\project\project>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
September 08, 2022 - 06:28:36
Django version 4.1.1, using settings 'model.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

  5. After that, just click the button. Soon after the button is clicked, it will print a string defined in the function ‘my_function’ as in the following output which will appear as follows : 

    This is a click request from a Django template file
[08/Sep/2022 09:49:29] "GET /my_function HTTP/1.1" 200 1477

Leave a Reply