How to create dependent dropdown lists with django, javascript + ajax & semantic ui framework

hi guys in this video we are going to create dependent drop-down lists with the use of javascript in order to improve user experience so let's take a look at a traditional approach first it's just django with some semantic ui elements let me select the car let it be mercedes and then once i press choose a modal we see models not only for mercedes which are c and s but we also see models for audi and tesla so this is a problem because we can easily make a mistake and this list simply will be very very long so let's change this into this where we can select a car and we will see only the models for the particular car and then if we decide to change to mercedes we will see only the models for mercedes and once we select the car and the model we will also have a submission button visible and that means we can actually submit this form and once we press save we will have a confirmation that our order has been placed so without further ado let's get started right guys so before we begin let's take a look at what have i done so far so i started a brand new project called select brush and i'm currently in the settings py file of this select broach directory and if we scroll just a little bit down to the installed apps list we will notice that we have cars models orders added to this list and that means that we will be using those three applications to complete our project and then if we scroll down again to the templates here we are telling django where to look for additional ones and to be more precise precise this is the place where we will keep our base html file for template inheritance purposes so according to those settings i created a templates directory and i placed over here base html so we will take a look at it shortly and then if we scroll to the very bottom we have some settings for the static files and here we are telling django where we will keep our static files so we we will keep them in the static directory and here we have main.js semantic.js and style css so those three files we will be using as our static files in this project then let's take a look at the urls py file over here we have included the static files in the url patterns and we have one path for the orders url so we are including the orders urls to the main url patterns and we will take a look at orders urls very soon as well and then let's take a look at base html over here we have some sections as required meta tax jquery semantic ui and this is the cdn for the css as well as js and then below we have custom css and js and this is the place where we are linking up our static files so those three files in the static directory are being linked up over here and then if we go to the body section we have um one block content for template inheritance so this is the place where we will define our unique code once we inherit from base html and then if we go to style css over here we just have one custom class mt5 that means margin top 5 which is margin top 5 pixels set as important and next we have semantic js for now this file is empty we have main.js over here we have only console hello world and we have views py we are already in the orders application so this is just an ordinary function view that refers to a template placed in the orders application and the template name is main html and right now we have just an empty dictionary and that means that we are not passing anything to this template so if we go forward we have this main view registered in the url patterns of this url's py file inside of orders application so this is it and then we have main html here we are inheriting from base html and in the blog content we are just placing hello world and then we have some models beginning from the cars over here we have a class car with two fields the name of the car and the country so for example we will have an object audi and the country is germany okay we will have also mercedes the country will be um germany as well and then we will have tesla and the country will be usa so this is for the cars and then we will have the model of the car so we we are linking it up with a foreign key over here and then we need to place the model name so in case of audi we will have audi a3 a4 and in in case of mercedes we will have c class s-class and then in case of tesla we will have tesla 3 and s so this is in terms of models and then we have orders so here we are linking up the car and the model by the foreign key and we are going to place an order and as the string representation we are just going to return the primary key and we've registered all these classes in the admin py so we can actually see it in the admin and this is basically it so we can right now start working a little bit more on our main html but before we actually do that let's take a look at the end result so here in the browser we have hello world and in the console hello world and we are in the main path and then if we take a look at the admin so here we are in the models we have created six objects and then we have cars here we have three objects tesla mercedes and audi and then in the orders we have none objects we don't have any object over here so right now we can return to our code editor and let's jump directly into main html let's delete hello world and let's create inside the block content our main form so this is going to be form let's give it a class of margin top five and i'm also going to set an id and i'm going to set it to simply car form or yeah let's just keep it like a car for car form all right so i'm going to close up the form and inside i'm going to put in the csrf token and then below the csrf token we are going to grab some code from semantic ui so let's jump to semantic ui the link is in the description let's go to um modules drop down and then we need to simply select a drop down that is interesting for us so i'm going to grab one of the first ones and yeah this is the code that i want i'm going to copy it and i'm going to place it over here okay so we need to indent this a little bit and there it is so let's save this and let's see how this looks right now so i'm going to hit enter refresh and here is our form however it doesn't actually work so in order to have this working we need to provide some javascript to be more precise jquery in the semantic js so we can actually jump to the documentation and search for this particular code so i'm going to press command f and i'm going to put in a dollar sign um so this is it however this won't actually work the way we want it to so let me just copy and paste it over here let's save this and then let's go back hit refresh and there it is but the problem is that it basically opens up every time we reload the page and we want to have it working on a click so once we decide to click on this particular drop down we want to see all the options and in order to change this we need to get rid of show and here we need to set force selection to false false and right now if i save this hit refresh it works the way we want it to so we have this problem figured out and this is uh this problem has been solved so let's uh continue working on our main html because we actually don't want to refer to gender and to male or female we want to have the cars over here so we want to have audi mercedes and tesla so what i'm going to do over here is to first of all provide an id and this is going to be cars the name i'm going to change for this input type hidden to car and then the default text will be choose a car and here let's just get rid of this or i'm going to delete one of the divs and this one will be used for the for loop so let's do the traditional approach first i'm going to go to views py over here what i'm going to do next is to create a query set and in order to do that i need to go to cars.models and from there we need to import the car and this qs will be car objects car objects all okay and we can pass to the template this qs so as the qqs we are assigning the value of qs let's save this let's go back to our main html and over here let's put in a for loop for item in the qs let's take this over here maybe let's change item to car and the class will remain item however the data value let's just put in over here car and here we will put in the car name so we want to see the car name in the browser okay so i'm going to save this and i'm going to hit refresh so we have choose a car and then we have audi mercedes and tesla so this is working however this is the traditional approach so um we want to actually use javascript in order to get this data and simply reference this menu div and put in some options so what we can do is to provide an id over here as well and this is going to be cars data box and then i'm going to get rid of this for loop or i'm going to comment it out so now if i save this hit refresh we actually can't click on it we don't see any options and as the next step we are going to create a view where we are going to simply return a json response with the car data and then we are going to bring it into this car's data box with the use of javascript so we are going to simply recreate this particular div over here with the use of javascript so uh yeah i hope it will be obvious once we do it so in order to begin let's jump into the views py file and over here as mentioned before we need to have an additional view so let's create a function view and let's call this get json card data something like this and this will take in a request and over here what we are going to do is to define a variable i'm going to call it q as json or let's just let's just put in qs val and this is going to be car objects and we want to grab the values and we want to put them into the list so right now we are able to actually return a json response which we need to import so from not dot but django http we want to import the json response and here we can return json response and let's create a key data and to this key data let's assign this queue as well okay so as the next step we need to register this get json car data so i'm going to save the views py file jump into the urls and here let's import this gate json car data and in the urls um let's create a new path that i'm going to yeah let's just put inside cars json something like this and then we need to bring in the view itself so get json card data and also let's set the name to be equal let's say car json so the most interesting part over here is this one cars json from the path because we are going to copy it and in the main js we are going to use it so i'm just going to put it like this as a comment and here we are going to apply ajax and this is going to be type get we want to get the data from url that is going to be this one cars json so i'm going to cut it over here from here and put it in this place so this is it and then let's define what will happen on success so we will have a function that takes in a response and we want to console log the response so here we should have the data that we have in our views so we are returning a json response with the key data and to this data we are assigning q as well and over here we should actually see those data and if something goes wrong we will have an error and this is also going to be a function that takes in an error and we are going to console log the error all right so let's save this and let's try this out i'm going to refresh and something didn't go the way it should so we have not found um let's go to urls urls of orders it hasn't been saved this is the reason so i did i forgot to save this file and i'm going to save it right now and i'm going to hit refresh and as you can see here is the data so to be for this to be more visible i'm going to jump back to our main.js and i'm going to console.log the response.data so um as as you remember in the views py we are having this key data and this is the queue as well so i'm going to access the scheme to see directly the data that is returned in this variable so let's hit refresh and this is it so we have three objects um country germany id1 name audi then we have mercedes and tesla so the challenge right now will be to grab the name and then those names put into this drop down okay so let's do this right now and in order to do that we need to head to main.js go to the success section and here we are going to create a variable called cars data and we are going to this variable assign response data and as the next step we are going to loop through this car's data so cars data and we are going to use a map method for this and we are going to grab a single item and yeah we need to create a div as the first step because in the main html over here we have a div so as mentioned before we need to recreate this we need to have a div with a class item data value and the car name so this is something that we need to do in javascript so as the first step let's create a variable option and this is going to be our div so let's put in document create element div okay so let's right now refer to this option and set the text content so here we want to display in the drop down the name so i'm just going to put in item and access the name field as the next step we need to set some attributes for the class and the data values so i'm going to put an option set attribute and first let's do the class and this is going to be item item and then option set attribute and here we are going to put in data value and this is going to be the item name and finally we need to take this option and put it inside the cars data box so first of all let's grab the scars data box and let's create a const cars data box and let's grab this by document get element by id and we need to put in cars data box so right now we can reference this cars data box over here and to cars data box we need to put in append child and pass in this option okay so let me save this and let's see if this will work or we did something wrong so let's hit let's click on this and as you can see we have all the three options so as the next step what we need to do is to execute some function once we change the value of this drop down so in order to do this we need to actually go back to main html and grab this ui selection drop down by its id so here we have cars so let's let's call this maybe const car input and this is going to be document get element by id and let's put in cars okay so once we have this we can actually go all the way down and here put in car input car input and then we want to add an event listener and we want to listen on the change event and if this is the case we will execute some function and for now what we can do is to simply console log changed to see if this is actually working so i'm going to save this hit refresh and as you can see we have changed over here our cds changed tesla changed but then if we select tesla again nothing happens so this works once we change the value of the drop down okay so um if we go a little bit further and if we instead of changed display the e target value let's see what we will have audi mercedes and tesla so we can create a const which is selected car that will be equal to the e target value okay and once we have this we could actually um yeah start working with ajax again but again we will need a proper view for this so in order to set the proper view we need to head over to views py and then i'm just going to go below and here put in another function view which is going to be get json model data and this will take and not only the request but also arcs and keyword arcs so i'm going to put in a variable called selected car and we are going to get it from the keyword arguments so stay with me for a few seconds i'm going to put in quarks get and then i'm going to set it as car and um to explain this we need to go to the urls py file and let's bring in this um function so we want to go to get json model data and let's register it and i'm going to explain what is going to happen over here i'm going to copy this and paste it below so first of all we want to change get json card data to get json model data and here instead of cars json we want to have models json and models json in the name but also over here we will put in str car and this is what we want to get okay so this is what we will need because this will be actually the selected car so based on the url we will get the car from over here so let me save this and we are going to set it in the javascript in just a second but right now what's important is that we are getting the selected car and storing it in the selected car variable so as the next step we can actually create obj models variable and this is going to be also a list where we will have models so we need to import models from models models we want to import modal and over here it is going to be model and objects filter and we want to reference the car name which is going to be set to the selected car okay and in order to pass it as a json response we want to grab the values okay so this is ready and below we can actually return a json response so let's do this return json response and here also as the data let's assign to this data key this obj model's value all right so this is registered because we have it set in the views py as well in the urls py and now we can we have to actually use it in the javascript so i'm going to grab this model json because this is going to be the part of our url our new url in our new ajax so over here let's actually begin working with this ajax so s ajax dollar sign ajax and this is going to be also a type get and here in the url we are going to set it as models json and then slash and actually we need to use backticks for this because we want to inject this selected card so dollar sign curly bracelets and selected car and let's close it so here we are passing this selected car so later we can actually get it in the viewspy from the keyword arguments over here okay because in the urls py we are expecting this car so this is what we are doing over here and then what we need to do is to define a success so over here for now we are going just to have a function with a response and let's console log the response response and i forgot about the comma over here and then on error we are going to have a function which takes in an error and let's also cancel log error error okay so let's check this out i'm going to save this hit refresh choose a car audi and we have something over here so what is it we have a3 and a4 so this is working if we let me just uh console.log response data it will be more readable this way and let's do this one more time audi and here we have a3 and a4 as the name let's jump into mercedes so here we have c and s and then if we choose tesla we have a name as model 3 and model s so this is working and to bring in those models model names we actually need to have another drop down so what we need to do is to jump back into main html and i'm just going to copy this i'm going to paste it below and yeah we are going to do some adjustments so first of all over here we are going to have modals as the id and the name is going to be model then we will choose not a car but a model and this is not going to be cars data box but it's going to be models data box is going to be models data box and i'm going to get rid of this comment and we are going to load the data into the models data box okay so now we can return to our main.js actually we can check how this looks like so now we have choose a car and choose a model which doesn't work just yet okay so let's jump back to main.js and we will not only have right now cars data box but we are also going to have a models data box and a model android so i'm going to copy those two and over here i'm going to do some adjustments this is going to be models data box and here it's going to be models data box this is going to be a model input and here it's going to be models all right so having this we can actually continue working on the success so again what i'm going to do is to create a const that is going to be models data and i'm going to assign to this variable response data and again we are going to run a map method on this model's data where we are going to grab a single item and the first thing is to again create the div so actually i can copy all of this and paste it over here but instead of cars data box we want to reference the models data box models data box and we want to use append child on the option okay so let's save this and let's see how this works so i'm going to select audi and then we have audi a3 if i go to mercedes the problem right now is that although we selected mercedes we still see a3 and this might lead to some errors because there is no a3 model in the mercedes cars so if we now unroll this drop down we will see that we not only have the models for audi so we not only have the models for our previous choice but now that we selected mercedes we also see the models for uh the mercedes cars so this is something that we need to change and in order to do that let's jump back into our main.js file below what i'm going to do is to access the model's data box in our html and i'm just going to reset it so once we have a change in the car input we are going to reset this model's data box and as the next step we need to go to main html and this is the place where we have this default text and yeah we want to also access this so i'm going to give it an id and this is going to be a model text and then i'm going to save this and jump back to our main js and at the top i'm going to uh maybe somewhere over here i'm going to create a const model text and this is going to be document get element by id and let's put in this model text all right so now we can go up here and access this model model text and what we are going to do is to refer to text content and set it to choose a model okay so let's see how this works so i'm going to save this hit refresh i'm going to select audi a3 and then change it to mercedes and here we have only c and s however this choose a model is yeah it's not grayish it's black so it's missing a class and it's missing a default class so to fix this we need to add this default class okay so in order to do that let's just put in below model text class list add and we want to add default so now if we save this refresh let's try it one more time audi a3 and then let's select mercedes and here it is choose a model c and s so this is working perfectly and before we actually proceed to creating another ajax this time with the type posts so we can actually create orders in the database let's create two additional divs for the alerts and for the button that will submit this form so in order to do that what we are going to do is to simply go to our main html file and then above the form i'm going to create a div for the alert so this is going to be a div with the id set to alert box and let's close it off and then below what we are going to do below the ui selection drop down for the models we are going to create a div for the button box so let's do this div with the class equal to actually not the class but the id set to btn box and the class will be margin top five and then inside of this div we are going to put in the button so let's make it a blue button so this is going to be a button of course with the type submit with the class set to ui primary button button okay and let's put in save and let's close up the button okay so let's see how this looks right now and here we have a choose cartridge model and this save button so maybe we can actually make this button to not be visible and we want to show it once we have the selection completed so once we select a car and we select a model we should actually see the save button so in order to do that i'm going to access style css and here i'm going to create another class not visible and this is going to be display and not block but display none and right now i'm going to copy this not visible class to of course we need to save the style css and we are going to copy this not visible class to our main html and we are going to apply it in the btn box so right now if we save this hit refresh let's clear the cage and there it is so we have two drop downs but without the button okay and now we need to add some logic to actually show this button um once we have the selection completed so we need to refer to this choose a model because once we change the value of this drop down we should see the button box so to be more precise we should remove the not visible class from our button box and in order to do that let's actually grab the button box and by the way the alert box so i'm going to create two variables the btn box and the alert box and first of all let's do the button box this is going to be document get element by id btn box and here below we will have the alert box set to document get element by id alert box so we will work on the btn box first because um we need to go to our car input add event listener and we need to access success and over here we are going to continue working on the logic so to be more precise we are going to add an event listener on the model input so let's put in model input add event listener and it's going to be again change and over here what we are going to do is simply btn box and then access the class list and as mentioned before we need to remove the knot visible so let's see if this is actually working i'm going to save this hit refresh let's choose a car a3 and there is the save button so this is uh this is working perfectly so right now we can actually focus on submitting this form once we select a car with a particular model we press save the form should be submitted and an order should be created in the database and once we succeed and this actually happens we should see a green alert box with a confirmation that a new order object has been created if something goes wrong we should see a red alert box with a notification that something went wrong and in order to begin we need to go to our main html and we need to access this car form so in the main.js file let's go to almost the top let's put in here a new const car form and this is going to be document kit element by id car form and we want to listen on a submission on this car form so at the bottom of the page let's put in car form and let's add an event listener the event that we are listening to is to submit and if this is the case if this form is submitted let's put in prevent default event prevent default and for now let's just console log um let's console.log for example submit it okay so we're not doing anything over here we're not creating any objects are just we just want to see this submitted without the page to be reloaded so i'm going to save this let's hit refresh let's select the car let's press save and there it is it's submitted okay so as the next step we actually need to create a view so we can apply this logic so again we need to jump into orders to the views py file and below we are going to create another function view that is going to be called create order and this will take in a request so here we are going to ask if the request is ajax and if this is the case we are going to grab the car which is going to be request post get car and then having this car we can actually grab the car obj so what i'm going to do over here is to define another variable called car obj and this is going to be car objects get and we are going to get it by the name and to the name we are going to assign this car and then we need to do the same thing for the model so the model is going to be request post get and over here we are just going to put in the model and we are going to send those data very soon in the js file so we don't have this model and card just yet but we are going to add it to our ajax but for now let's focus on the logic and i'm going to return to this view in in a few seconds and let's grab the model obj the same way we grabbed the car so this is going to be model and then objects get and we want to get it by the name so over here the name is going to be set to the model and finally we can write down order we need to bring in the order we already have the car the model but we also need to grab the order so from dot models we want to import the order and over here let's just write order and then objects create where the car is going to be the car obj and where the model is going to be the model obj and then we can return a json response that will contain a key create and we are going to assign to it true and then in other case we are going to return a json response and here we are going to put in create or maybe create it it will be better created to false and here we can also put in save is equal to false okay so by accident if we access this path that we are going to register in just a second in the urls we will see created false so i'm going to save this and now i'm going to focus on registering this create order so we need to jump into our urls py we are going to bring in this create order let me reorganize this a little bit so just give me a second please okay okay and let's close this so here are our views and we are going to create another path and i'm just going to call it create to this create we are going to put in the create order function view and the name is going to be create order okay so right now we can focus on uh finishing this logic over here and yeah let's put in dollar sign ajax and as mentioned before this time is going to be type post and the url is going to be the one that we registered in just a second so let's put in create and then we will have the data but in order to fill this out we actually need to have some additional elements so if we go to main html here we have the model text and we will need to have a car text as well so i'm going to copy this id and i'm going to place it over here and this is not going to be a model text but a car text and then in the main.js where we have the model text let's also provide the car text so this is going to be car text and car text okay we also have a csrf token so we need to grab this as well so i'm going to create const csrf and this is going to be document and then we are going to get elements by name and over here we need to focus not to make any mistake csrf middle where token so i explained how this works in previous tutorials as previous tutorials in this series so i'm not going to go deep into into this and we are going to simply focus on sending the data right now so first of all we are going to put in the csrf middleware token so here let's put in again csrf middle where token and to this key we are going to assign csrf value all right then we will have the car we are expecting in our views the car and the model okay so we need to include it in this data dictionary so as the car we will have the car text and text content and as the model we are going to have model text and text content okay so this is for the data and right now we need to define the success again we will have a function with a response and i'm just going to put in as always console log response for now and on error we are going to also have a function with an error and again we are going to console log the error all right so what we are going to do next is to access the alert box so alert box in our html i'm going to use backticks and we are going to do it in both cases for the success and for the error so we need to jump into semantic ui and find alerts so where are alerts alert or sorry in the semantic ui it's called message and it's in the collections and i'm going to go with uh maybe with this one so i'm just going to grab the code from over here and i'll begin with the success i'm going to get rid of the close icon and i'm going to do some indentation and there it is so right now i'm just going to copy this and apply it also for the error and yeah over here we will not have positive but negative so the alert box will be not green but red okay so in the header in the success we will have maybe simply success and let's put in in the paragraph your order has been placed and then over here in the header let's put in oops and in the paragraph let's put in something went wrong okay so i'm going to save this and let's refresh audi a3 save and here is success your order has been placed and we have confirmation that it has been created so let's jump into the orders and there it is we have audi model audi a3 so uh let's select another one mercedes but then we still see this success so maybe once this is changed this value has been changed we should actually reset this alert box and in order to do that we just need to go to the car input where we have the ad event listener on change and we are just going to place colored box in our html and let's just reset it set it to blank so let's try this one more time i'm going to refresh i'm going to choose a car audi choose a model a4 this time i'm going to press save and then i'm going to select mercedes as you can see the alert is gone i'm going to select an s-plus press save and then we have oops something went wrong so we need to investigate what is the issue over here so i'm back in the administration and the problem is that we have mercedes and tesla that have the same model s and s okay so let's actually see what this means i'm going to print out the car and i'm also going to print out the model all right so right now if i save this go back i'm going to select mercedes and s and then i'm going to save we have this error and here we have get returned more than one model so it returned two and here we have mercedes as the car and below we have s as the model so instead of doing it this way what we need to do the problem is over here okay we have this um model and we are grabbing it by name and this is not the right case so we can't actually grab it like this we need to actually not only put in the name but also the car so let's let's make this a little bit more precise i'm going to put in the car and name and we are going to set it to the car obj dot name and let's see if this will help us out so i'm going to save this and i'm going to hit refresh mercedes s save and this time it has been successfully saved so let's go to the orders and there it is so we have mercedes mercedes s and then if i go to tesla and choose the s model i'm going to save it and there we have it again so we have saved tesla s and to to prove this let's check it out and there it is tesla tesla s alright guys so i think we can finish off over here i hope you guys enjoyed this tutorial and hopefully we will see each other soon take care have a great day and bye bye

Channel: Pyplane

Views: 14,094

Keywords: django dependent dropdown, django dependent drop down list, django dependent select, django dependent dropdown form, django dependent drop down list from database, django json ajax, django javascript integration, django javascript integration ajax and jquery, django javascript project, django javascript tutorial, django javascript ajax, django javascript dropdown, django with ajax tutorial, django with ajax example, how to use ajax with django, Submit django form with ajax

Id: hF0vz_NK4oc

Length: 55min 0sec (3300 seconds)

Published: Mon Nov 16 2020