How to add a spinner to a Django project | page loader Django

hi guys this is luke and most recently i received from you several requests to do more videos on django with javascript and actually this is cool by me because those videos that i released so far had some pretty good statistics so i decided to do additional two three maybe four videos on this topic starting from this one which will be related to adding a page loader or a spinner to our site so let's actually see what this product is about so i'm going to refresh the page and as you can see for a half a second there was a spinner and then we got the data from the database and simply displayed them so let's do this one more time i'm going to hit refresh we see a spinner then we get the data and display the data and this is exactly what we are going to do in this particular video those data as mentioned before are coming from the database here are our objects so post five something about post five and here we have post five something about post five all right so yeah without further ado let's get started alright guys so as usual let's take a look at what have i done so far so i started a new project called spinner approach and inside the spinner approach directory let's take a look at settings py file over here i added to the installed apps list our post application that means i started a new application within this project called posts and we will be working with this post application in just a second but then let's scroll down and let's take a look at the template so here i told django where to look for additional templates and i created a templates folder and inside i added base html file so here we have a blog title blog content and this is for template inheritance purposes i also added custom css as well as custom js so here we have load static and we are loading static files style css and main.js we actually don't have this static folder created because if we look at settings ui here we have the static url and static files dears so here we want to keep our static files so let's actually create the static folder inside the src directory and i'm going to add style css and then main js so this time i'm not doing it inside the blog scripts i'm creating a separate file and here we will do some javascript coding so for now i'm just going to put in console.log hello world all right so um this is for the settings py file if we take a look at the urls py here i just included static files in the url patterns and then if we go further let's take a look at models py files so right now we are inside the posts application directory and we are inside the models py file so here i created a very simple class post that inherits from models.model and consists of two fields tidal which is a model's char field with the max length 200 and the body which is a model's text field and then i defined a string representation which is returning the self title okay and then in the admin py i also registered this post class so we can actually see it so if we go to the browser here we have bootstrap and we will be working with bootstrap in just a second here we have our post application i already created six objects so we have post zero one two three four and five and we will be loading those posts in just a second if we take a look at post zero here we have the title and something about post zero and then we have post one something about post one and so on okay post two something about post 2. all right guys so right now we can actually start coding i'm going to go to views py and here i'm going to make an import from django views generic i'm going to import template view and here i'm going to define a class post template view which inherits from this template view and then below i'm just going to define the template name template name and this is going to be posts slash main html so right now i'm going to save this and go to the post directory here i'm going to create the templates folder inside the templates for the folder i'm going to create another one called posts and inside the posts i'm going to create this main html this main html file will inherit from base html so we need to open up a block title and this is just going to be home and then block content and this is going to be home page for example okay so right now what we need to do is to register this view and we are going to do it directly inside the spinner approach so again i'm going to skip the urls py file inside the post application i'm just going to register it directly inside the urls py in the spinner approach in our main project folder so over here from django sorry not from django but of course posts views we want to import our um post template view so let's do it we want to import post template view and here i'm going to define a new path post template view s view with the name main view okay so now let's see if this will actually work so i'm going to copy the piece of url and we don't have template does not exist posts okay so inside the views py we i made a typo post post main html sorry about sorry about this guys and there it is we have our home page okay so inside the views let's create another another view and this time it will be a function view and let's maybe call this post json and this will take in a request and here we are going to define a variable called data and i'm just going to write down post so we need to actually import our post from models py so from dot models we want to import post and here we are just going to put in post objects but not all but we want to take in the values and we want to put it into a list and then what we want to do is to return a json response so we again need to do an import from django http import json response and here i'm going to use this json response but in data with save as equal to false all right so now i'm going to save this and i'm going to register this post json inside the url py file inside spinner approach so we want to import post json and then create a new path post json post json and the name is going to be posts view for example posts json viewer whatever okay so now i'm going to save this and i'm going to go to post json and there it is so here are our objects and we want to grab those objects and display them in a different view we want to actually display them within the post template view so in order to do that we need to do some javascript that will be done inside the main.js but it will refer to this post main html so over here what i'm going to do is to define two variables so we will have const for our spinner so i'm just going to put in spinner box and we will also have a constant for the data box okay and we need to actually create some divs with the id of a spinner box which will be stored inside this constant and another div for the data box so let's do this right away and we will do it inside the main html so here i'm going to actually delete this home page and right now what i'm going to do is to head over to the spinners i'm going to grab this one i'm going to put it inside the block content delete the span save this and let's take a look at our page right now so here we have a spinner good so as the next step what i'm going to do is to create another div with a class of text center and i'm going to add a margin top three and i'm going to close it off over here save this refresh and there is the spinner and this is all right if we would like to change a color we could for example grab this text primary and put it over here let's save this refresh and now we have a blue spinner all right so um right now apart from this spinner we also need a data box and here i put one quotation mark too much so below the spinner box we want to have another one called dedicated for for the data so here we will have another div class text center margin top and yeah actually let's bring it like this and here what i'm going to do is to set the id so here we will have an id of a spinner box and here we have a div with an id of data box all right so we we are actually ready to do some javascript because right now we can get those elements by id so i'm going to save this main html go to our main js and here the spinner box will be equal to document get element by id and we want to get it by the spinner box and here document get element by id data box okay so let's see if this is working i'm going to console log out the spinner box and console log out the data box let's save this right click inspect console and let's hit refresh and there it is we have a spinner box and a data box okay so what i'm going to do next is to create a new class inside our style css and this class will be called for example not visible and i'm just going to put in display not okay so i'm going to grab this not visible class and head over to our main html and add it inside the class text center margin top three save it and what do we have right now nothing actually changed so um i'm just give me a second to figure out why it didn't work we have not visible so here we have not visible it's saved um let's take a look at spinner i'm going to press command shift r and there it is so we had to reset the browser and clear out the cache and this solved our problem so with this class not visible we don't see the spinner anymore okay but the thing is that we want to see it at the very beginning and then after we load the data we want it to disappear and instead we want to see the data so right now i'm going to head over to the main html i'm going to delete this not visible class going to save this file and jump back into main.js i'm going to comment those console logs and over here we are going to use ajax and we are going to begin with the type so this time we won't be dealing with a post but with a get we want to get the data and the url is just going to be our post json post json like this and let's define what will happen on success so for now let's put in a function which takes in a response and let's just console console log this response and then in case of an error let's define what will happen so we will have a function which will take in an error and also let's console log the error okay so let's see how this actually works i'm going to save this hit refresh and over here we have um page not found 404 post json um [Music] let's go to the urls py post post json okay so i made a mistake um in the main.js it should be post json like this okay so let's save this let's hit refresh and there it is so here are our objects as a response so if i put in over here response as a string here are our objects as a response so we can do something with this response but also what we can do on success is to get rid of the spinner so in order to do that i'm going to write down spinner box and then access the class list and add this how was it called not visible i think not visible so let's see now what happens i'm going to refresh and as you can see the spinner is gone it's just for a very short period of time and it's gone until the data is loaded so maybe let's uh do a set timeout so we can see the spinner for a little bit longer and let's put in half a second okay and inside we are going to put in the spinner box not visible and console log the response so after half a second we should add to the class list of the spinner box the class not visible and we should log the response so i'm going to save this refresh and there it is okay there it is perfect so um after half a second we get the response so what we can do is to create a for loop for const item in office or not in but of response and over here we can access this data box so i'm going to put in data box inner html and here what we are going to do is add with the use of backticks for example bold inject the item title and let's close up the bold and then in a paragraph let's put in the item item body item body okay so right now let's see what happens let's hit refresh and there are our posts as you can see we loaded our posts from the database and over here let's also do maybe a set timeout let's also put in half a second and if something goes wrong let's also refer to the data box in there in html and here we are just going to put in also maybe in bold bolded font failed to load the data and let's close up the boldit okay so right now i'm just going to put in here some access save it so right now we should have failed to load the data let's hit refresh and there it is so we have failed to load the data but we still get the spinner so we actually need to put in spinner box class list at not visible and there it is fail to load the data perfect so i think we can finish off over here yeah i hope you guys enjoyed this tutorial if you did please like please let me know if you would like to see more of javascript with django hope you guys have a wonderful day and hope to see you soon take care and bye bye

Channel: Pyplane

Views: 25,491

Keywords: page loader django, spinner django, add loading django, javascript spinner, javascript page loader, django and javascript, django with javascript, django and jquery, apply js to django, django ajax, django ajax get, learn ajax django, learn ajax and json, learn ajax javascript, learn ajax jquery, learn ajax programming, learn ajax for beginners, django ajax get example, django ajax get json response, django ajax get data from database, Django ajax get data from view

Id: q2v8SlRdaag

Length: 22min 44sec (1364 seconds)

Published: Sat Oct 10 2020