jquery Archives - Tech Insights Unveiling Tomorrow's Tech Today, Where Innovation Meets Insight Fri, 05 Nov 2021 07:01:23 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.2 https://i0.wp.com/reactconf.org/wp-content/uploads/2023/11/cropped-reactconf.png?fit=32%2C32&ssl=1 jquery Archives - Tech Insights 32 32 230003556 How to Create Cascading/Dependent Dropdown List in Django Python https://reactconf.org/how-to-create-cascading-dependent-dropdown-list-in-django-python/ https://reactconf.org/how-to-create-cascading-dependent-dropdown-list-in-django-python/#comments Fri, 05 Nov 2021 07:01:23 +0000 https://labpys.com/?p=397 In this tutorial, we will learn How to Create a Cascading/Dependent Dropdown List in Django Python. In this small application, we are going to improve user experience by Creating a …

The post How to Create Cascading/Dependent Dropdown List in Django Python appeared first on Tech Insights.

]]>

In this tutorial, we will learn How to Create a Cascading/Dependent Dropdown List in Django Python. In this small application, we are going to improve user experience by Creating a dynamic Django dropdown list using jQuery.

Create a Django Dropdown project 

                We need to create a Django project  dropdownfill

               Django-admin startproject dropdownfill

Create Django App

                Now then need to create an app dropdown to perform the Cascading/Dependent Dropdown List in Django Python.

                 python  manage.py startapp dropdownfill

Configure  Application Settings

                Configure application settings by registering the App_name into the settings.py in a specific location at INSTALLED_APPS

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

Create the Model

Now we need to create models.py .

from django.db import models
from django.db.models.base import Model
from django.db.models.deletion import CASCADE

# Create your models here.


class department(models.Model):
    departmentname = models.CharField(max_length=100)


class employee(models.Model):
    deptid = models.ForeignKey(department,on_delete=CASCADE)
    empname = models.CharField(max_length=100)
    age = models.IntegerField()
    address = models.CharField(max_length=500, null=True)
    contactno = models.CharField(max_length=20)

Create the views functions

views.py

from django.http.response import HttpResponse, JsonResponse
from django.shortcuts import render 
from .models import department,employee 
from django.core import serializers
import json

# Create your views here.

def getdata(request):
    template_name = 'dropdown.html'
    deptcontext = department.objects.all()
    empcontext = employee.objects.all()    

    return render(request,template_name,{'department':deptcontext,                                   'employee':empcontext})

https://labpys.com/how-to-upload-files-images-in-django-python/

Provide Routing (URL patterns)

We need to add dropdown.urls  to main project urls.py

urls.py

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

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

Create urls.py file inside  dropdown  app to write the URL pattern or providing routing for the application.

urls.py

from django.urls.conf import path
from dropdown import  views 

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

Create Template

            Create a template folder inside  dropdown app and create html file in the directory.

dropdown.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.0">
    <title>DropDown</title>
   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

    <h1><center>How to Create Cascading/Dependent Dropdown List in Django python</center></h1>

  <div class="container">
  <div class="card body">
    <br/>
    <br/>
    <br/>
   
    <div class="row">
    <div class="col-md-4">
        
        <select name="dept" id="department" class="form-control">       
            <option value="0">--Select Department--</option>     
            {% for item in department  %}
            <option value="{{ item.id }}">{{ item.departmentname }}</option>
            {% endfor %}
        </select>
    </div>
  
    <br/>
    <div class="col-md-4">
        <select name="emp" id="Employee" class="form-control">
            <option value="0">--Select Staff--</option>  
            {% for item in employee  %}
            <option value="{{ item.deptid_id }}">{{ item.empname }}</option>
            {% endfor %}
        </select>
    </div>
 
   </div>
  </div>
</div>

 


<script>

$(document).ready(function(){

 var department = $("#department");
 var Employee = $("#Employee");
 var $options = Employee.find('option');
 department.on('change',function(){
    Employee.html($options.filter('[value="'+ this.value  +'"]'));
 }).trigger('change'); 


}); 
</script> 
</body>
</html>

Now make migrations

 Python manage.py makemigrations

Python manage.py migrate

Python manage.py runserver

Please leave your  comments and suggestion

The post How to Create Cascading/Dependent Dropdown List in Django Python appeared first on Tech Insights.

]]> https://reactconf.org/how-to-create-cascading-dependent-dropdown-list-in-django-python/feed/ 1 397