How to use bootstrap modals with django and javascript | bootstrap modal image

hi guys in the 14th part of the django and javascript tutorial series we are going to work with modals from bootstrap in order to get a picture preview from this table so once i click on a particular picture i can see it in the preview model okay so this is what we are going to create and there will be a few challenges in this project among others how to display the correct picture how to serialize a query set not using django s framework and how to customize our model so yeah without further ado let's get started alright guys so before we begin as usual let's take a look at what have i done so far so i started a brand new project called model approach and currently i'm in the settings py file of this directory and if we scroll down to the installed apps list we will notice that it has been extended by pictures so pictures is an application that i started for this project purposes and we'll jump into this directory very soon and then if we scroll down again to the templates over here i have some settings for django to know where to look for additional ones and here we are going to keep our base html so if we take a look at our project structure we are currently in our base directory and over here we have templates and inside we have base html and then if we scroll down to the very bottom we will notice that we have some settings for the static and the media files so our static files will be kept in the base directory in the static folder and our media files will be also stored in the base directory and the media folder and if we take a look at the project structure again over here we have static folder and here we keep main.js and style css and then our media folder is at the top and currently it is empty and then we have urls py file where we basically included the settings for the static and media files in the url patterns so now we can proceed and jump into base html so this is a basic starter template from gitbootstrap.com and here it is if we go to gitbootstrap.com you will need to jump into documentation and simply copy and paste the starter template but i did one modification though i deleted the slim version and the integrity and cross origin and i also moved the jquery script to the head and why i deleted the slim because we are going to use modals and the models won't work with the slim version okay so this is very important to get rid of the slim version all right so if we have this covered let's go back and here in this template we have simply one block where we will provide our unique code for a particular template so other templates will inherit from base html and here in this place we will define our unique code for a particular template so knowing this let's proceed and jump into main.js here we have a console.log hello world to see if everything is working because in the base html we have a blog for the custom js and css so over here we have a script which is linked up to our main js where we have it over here in our static directory so this is the file and then below we have our style css which is related to the style css in our static folder so now we can see our style css over here i just have one class not visible and you are probably familiar with it as if you did some other tutorials in this javascript and django series all right so now let's jump into our pictures application let's open up models py file and let's create our class so we will have a class which is named is going to be named picture and it inherits from models.model and then we will have two fields the first one is going to be an item and this is going to be a models image field where we will define the upload too and let's set it as images okay and then the second field will be info and this is going to be a char field with the max length let's say 150 and let's also not forget about the string representation method which takes itself and let's return sdr self pk okay so now let's save this let's jump into the admin so over here we need to import our class from models py so from dot models we want to import our picture class and let's register it in the admin so admin site register and let's pass in picture okay as the next step let's go to the terminal and here we have an error some notification that we need to install pillow so i'm going to quit the server from running pip install hello because we are using an image field and then let's also do the migration so python manage py make my creations and python manage py migrate all right and then python manage py run server i already created a super user so now i can simply go to the admin and i can log in and we should see our picture in the menu okay so here is pictures and we will add some pictures in just a second all right guys so i went to pixabay.com and i found five images which i downloaded and i also went to our django administration to the pictures and created five objects so let's take a look at them so the first one is zebras and over here i added information i've added a description happy very happy zebras okay and then in the second one we have christmas and i just added it's christmas time and then we have the third one which is related to virtual reality and here i just added virtually virtual reality is the future and by the way what do you think about a theory about living in a simulation do you have your opinion on this i think it's quite possible let's go to the fourth one here we have a laptop so i just added it's time to do some coding and then the fifth one is beach where we see a family so i added a description happy family on the beach and this way we have five objects and right now we can actually work with them so we can go back to our code editor and open up our views py file of our pictures application and over here we will need two views so the first one is going to be a simple view where we are going to use basically only our template we are not going to pass anything to this template because we will use another view for that and we will use ajax to load the data and yeah simply we don't need anything besides defining the template so in this case it's useful to use a class based view which is simply called a template view so let's import it from django views views generic let's import template view and let's create a class i'm going to call it home view and this will inherit from the template view and here as mentioned before we just need to provide the template name which is going to be stored in the pictures application so i'm going to put in pictures slash main html so let's create this pictures directory but first we need to create a templates folder and then inside let's place pictures pictures and inside let's place main html okay and we are going to register it in just a second but first let's create the picture view that we are going to load the data to our home view so in order to do that i'm going to use a class picture view which will inherit from view and i'm going to inherit from you and here i'm just going to define the get method which takes in self and a request and i'm going to define a query set so in order to define a query set we need to import our model so from dot models we want to import picture and here we can put in picture objects all and in order for this to be working we actually need to serialize it and we are not going to use django rest framework in order to do that we are going to use built-in serializers so we can import serializers from django core import serializers and here i'm going to define a variable called data and this is going to be simply serializers serialize and we are going to pass in the format as json and then the qs perfect and finally we need to return a json response so we actually need to import it from django http we want to import json response json response and we are simply going to pass in as the data the data variable over here and we can also mark save as equal to false so once we register we are going to see how this actually looks like so i'm going to save this right now and i'm going to create in the pictures directory another file called urls py and over here we are going to begin from the imports so from django we want to from django urls we want to import the path and from dot views we want to import our home view and the picture view and then we are going to set the app name to pictures pictures like this let's open up the url patterns come on okay and then we are going to register uh those views so the first home view is going to be the main path home view as view and let's set the name as home and then below we will have another path and here let's put in data json and this is going to be picture view as view and the name is going to be data json all right let's save this and now we need to include those url patterns in the main url patterns um which is in the modal project so we need to jump into urls py file and we need to simply include import include in order to include those url patterns in the main urls py file so i'm going to do it right now include we want to jump into pictures urls and let's provide the namespace which should match the app name so we need to put in pictures like this all right so let's save this and let's work on our main html but before we actually do that let's take a look at the data json let's go to data json and let's see what do we have over here and here we have our data they're not looking uh very nicely and very friendly but this is working so as the next step we are going to load those data into our home view and we will see them in the console in a little bit more friendly way okay but for now our the most important thing is that this is actually working so we can proceed and start working on our main html the first thing that we want to do is to inherit from base html so extends base html and then below i'm going to open up the block content block content okay and over here what we are going to do is to maybe first place hello world okay so let's go to the main path we have hello world let's right click inspect let's go to the console and over here we have hello world which is coming from our main.js so everything is linked up correctly so we can actually proceed and let's delete the hello world and let's create a div with a class equal to text center and inside of this div we are going to create a spinner with the use of bootstrap so i'm going to write if class is equal to spinner border and i'm going to place the row to status and the id i'm going to set to spinner and then i'm going to simply close up this div so let's save this let's take a look at it right now and we have a spinner all right okay as the next step we need to create a table and in order to do this i'm going to jump into getbootstrap.com in the search i'm going to type table and we are going to use this one so i'm going to copy everything from here and i'm going to simply place it below this div class center and yeah what we need to do is to do some of course adjustments so the first thing is to keep the body table body empty so i'm just going to get rid of those table rows and i'm going to give a id for this table body because here we are going to simply add the data which we are going to load so i'm going to set an id of table body box and then we need to think what we want to have as our columns so the id can remain the same let's also put in the picture and we need to put in some information or description so we don't need the handle we will have three columns id picture and the information so the picture will be related to our item and then the information will be related to the info okay so let's save this let's take a look at this right now and there it is all right so as the next step we can load the data with the use of ajax so we need to go to our main.js and start working with ajax the type is going to be of course get the url is going to be data json and then what will happen on success we will have a function with a response and for now what we are going to do is to console log the response and then what we will have as the second scenario is an error so what will happen on error we will have a function with an error and then we want to console log the error all right so i'm going to save this refresh and here is the data so the problem over here is that this is as text this is string we need to have javascript objects so what i'm going to do is to create a variable below called data and this is going to be json parse and we are going to pass in response data because we want to access the data and then i'm going to console log the data so over here we are converting the text to a javascript object and we are going to console.log and compare the difference sorry this is in the wrong place i'm placing it in the error it should be of course on success i apologize for this mistake let's save this let's hit refresh and there it is we have five objects as you can see which we can simply use and work with so as the next step we are going to do a for loop so let's write down data and apply the for each method and let's take one element and simply console log the element fields all right so i'm going to save this hit refresh and here are the fields because if we will take a look at this particular object let's say the first one we have the fields the model and the primary key so if we open up the fields over here we have fields defined in our picture class so we have info and item but a part of that we have also a model and a primary key so right now we are looping through to get the fields and if we take a look at this particular part we will have an item and an info so here we have only the fields that are interesting for us which are defined in our picture class okay so this is how uh the serialize built into django works we have fields we have model and we have a primary key okay so yeah let's continue and below this data for each we are going to get rid of the spinner so at the top let's create a const spinner and this is going to be document git element by id spinner so this is the id that we've set in our main html so over here we can write down spinner and we want to add to the class list not visible and this is the class which is defined in our um style css and it's it should be visible all right so i'm going to save this refresh and the spinner is gone gone so once the data is loaded the spinner is gone all right perfect so now what we can do is to simply add to our table body uh some records and in order to do this we need to grab the table body so i'm going to define the cons as table body and this is going to be document get element by id and here we want to pass in what was the idea let's take a look at it table body box so i'm going to copy this and simply paste it over here all right so right now we can grab this table body and use it inside this for each method so table body inner html and here we are going to add some records so i'm going to use backticks and i'm going to open a table row and here i'm going to simply access not the fields right now but we want to access the primary key first because the first column is in fact the primary key so table data and here we are going to inject element pk all right and then the next column will have table data where we are going to refer to the element fields and we are going to simply uh put in the item so this is going to be the picture of course we need to use image src but for now let's just do it like this and let's close up the table data and then we will have table data and here we should have fields so i'm going to copy this change this to info and of course we need to close up the table data and we need to close off the table row so let's save this let's hit refresh and there it is so the problem over here is that we have images and we don't have in front the media all right so this is not the path which will allow us to show the images so in order to do this we actually need to put in front media like this and this should do the trick however we can also put in the full path so if i'm going to put in a const called url and this is going to be simply window location and i'm going to simply console log url i'm going to save this hit refresh at the top we have location and here we can have for example we can use crap so here is the main path and to prove it we can set url to window location pref let's save this let's refresh and there it is okay so if i just make it bigger for a second here is our path all right so we can use this and place it over here as well okay so let's save this let's hit refresh and there it is so if we go to the admin i'm going to copy this and i'm going to open a new window admin if we open up pictures here is the full path to an image and right now in our picture we have the same path okay we have the same absolute path um defined over here in the picture column so we can actually go back and over here we can open up emg src and set this to source but then we are also going to set the height to for example 40 pixels all right so let's save this and let's hit refresh and there it is so here are our pictures this is working and then if we would delete the url let's save this refresh and we still see the pictures so both ways work however if we would get rid of the media refresh and as you can see this is no longer working all right so i'm just going to oh come on set it like this let's hit refresh one more time and okay so from now we can actually focus on creating the model so once we click on a particular picture we want to see the preview and in order to do this we need to jump into getbootstrap.com in the search let's type model and we are going to apply this type of model with some modifications which we will do later on so what i'm going to do is to simply grab this code and i'm going to paste it in our main html at the very top okay so this is the first thing that we want to do and over here i'm going to get rid of those dots and right now what we need to do is also to maybe change this id because it's example model so let's place in for example preview preview pick model okay and also let's set this div to have an id as well and i'm going to set it as model body all right okay so this is the first thing that we needed to do in order for having this to work and then what we need to do is to focus on this particular part so actually i'm going to copy this and i'm going to place it inside of our main js and i'm going to wrap this emg src with this um code but i'm going to change the button to a div i'm going to delete the type button and then the class btn primary as well we will have data toggle model and here we need to put in the proper id which we've said second ago so i'm just going to copy it preview pick model and let's place it in our main.js copy paste all right and over here let's close off the div okay so i'm going to save this and refresh and as you can see right now we have a model which is working however it doesn't show us anything so as the next step what i'm going to do before we actually take this next step i'm just going to set the title to not model title but maybe picture preview and right now we need to focus on finding a way how to provide a picture on a click so this picture appears over here in this particular section modal body all right so as the next step we need to grab this modal body so um let's go back to main.js i'm going to simply copy this and in the main.js i'm going to create another const model body and this is going to be equal document hit element by id and i'm going to place model body all right i'm also going to set a class for example my emg so we need to actually define this class and i'm going to go to style css and below i'm just going to put in my emg and put in cursor pointer so right now we will see after we refresh we will see a pointer once we hover on the particular image and right now okay we still see a modal title and this is probably because i didn't save the main html so let me do it and let's refresh one more time and there is picture preview okay so right now we've added this coarser pointer so this is a little bit better so once we hover we can actually see that this is this particular picture is clickable okay also let's get rid of this save changes we actually don't need it so in order to do this we need to find in the model footer save changes spot button let's delete it and there it is okay as the next step we need to add a custom attribute to our main.js to our div that consists of this model so over here i'm going to set a data pick attribute and this is going to be simply this the the same as the source so i'm just going to copy this and place it over here and i'm going to explain this in in just a few seconds but right now we also need to provide a class to our image so over here i'm going to add a class for example emg photo because we actually need to grab our photos by something so we won't grab it by an id because an id should be unique for a particular item let's set for all the pictures a class in emg photo so what we can do right now is to simply create a create another variable maybe we can do it below the spinner let's write down class not class sorry const and let's put an emg photo and this is going to be document get elements by class name and we need to pass in the emg photo all right so once i console log emg photo we will see how this looks like and what we can do from there so i'm going to save this hit refresh and as you can see we have a html collection what we actually need is to have an array so we can perform and for each method on this array we can't perform a for each method on the html collection so we can convert this emg photo with to an array which is for now html collection with the use of spread operator so we can do something like this let's save this let's hit refresh and as you can see right now we have an array so uh right now as the next step we can perform the for each method so emg photo for each and then we are going to grab a single item and add to it an event listener and we are going to listen on a click event so [Music] as the next step we can simply console log clicked and let's try it out so i'm going to save this refresh and as you can see we have clicked all right so click it okay instead of console logging clicked let's actually console.log event target and let's see what we will have over here i'm going to save this refresh and here is our image source so here we have amg src and this is the laptop then if we click on the virtual reality we have the virtual reality and then we have uh the beach with the family so as the next step we need to simply grab our data pick attribute and put it inside of this particular model so we already know which picture we are clicking we now need to put this over here and in order to do this we actually need to refer to the parent element so over here we have e target so i'm going to get rid of the console log and set the variable pick and this is going to be e target and then we are going to simply write down parent element and we are going to simply console log the pick and let's see what do we have over here i'm going to refresh and here is the entire div okay with this data pick attribute all right so in this case we are able to actually grab the model body and put inside this particular e-target parent element but we need to also get attribute and we know that the attribute that we are interested in is the data pick so before we actually put it inside of our model body let's console lock the pic right now i'm going to hit refresh and here is zebras here is christmas and here we have our laptop and so on so this is working so as the next step we simply need to refer to the model body modal body inner html and set it to emg emg src and provide here this pick variable and also let's set the height to for example 200 250 pixels and let's close it off and let's find out if this is working so i'm going to save this refresh and what do you know this is in fact working however the final thing that we can do is to center this picture so what we need to do is to go back to our main html find the model body and here also add a class text center i'm going to save this refresh and there it is okay so now we have a working solution nice solution we also can do some adjustments so for example we can modify our model just a little bit to make it look a little bit differently and in order to do that we need to go to our style css and add some classes so the first thing that i'm going to change is maybe the border radius all right so we need to go to main html and we can grab this modal content class copy it put it inside of our style css and here we can put in border radius and set it for example to five percent so if we refresh let's take a look at how this looks like right now so as you can see the edges are a little bit more rounded all right so we can also go to our main html and to this model content we can add a bootstrap class of shadow i'm going to save this refresh one more time and if you take a closer look you can see that right now we have a shadow right so this is another thing that we can do let's also maybe make the backdrop a little bit darker so in order to do this we need to refer to this modal class so i'm going to copy it and we need to go not to main js but to style css and here i'm just going to put in background color and here i'm going to put in rgba and then put 0 0 0 and 0 7 opacity so we should have a black pretty dark backdrop okay so over here let me write a comment that here we are customizing the backdrop and over here we are customizing the window okay so let's try it out i'm going to save this refresh and as you can see the backdrop is much much darker right i'm going to make it a little bit smaller and this is how it looks like pretty nice also what we can do is to add some gradient for the model so if we go to css gradient io you can customize your own gradient and i've already done it and this is going to be the gradient so it's going to be a little bit grayish on the left and white on the right so i'm just going to copy this and i'm going to place it in the window section so let's paste it let's save this let's go back refresh and there it is okay so if you look closely you will notice that here is a little bit grayish and then here is a little bit more whitish it's actually fully whitish on the right a little bit grayish on the left all right guys so i think this is it for this tutorial hope you guys enjoyed it and see you soon in the next one take care and bye

Channel: Pyplane

Views: 9,082

Keywords: django javascript, django ajax, bootstrap modal, bootstrap modal popup, bootstrap modal javascript, bootstrap modal image, modal js show, js modal popup, js modal image, django tutorial 2020, django json tutorial, django json ajax, django class, django json response, django json, learn django 3, django bootstrap modal, django bootstrap 4, django bootstrap datatable

Id: 87Hj55vCVz8

Length: 41min 8sec (2468 seconds)

Published: Fri Dec 11 2020