How to load more data on a button click in Django and Javascript

hi guys in this video we are going to implement the load more button functionality so to be more precise let's take a look at exactly what we are going to create i'm going to reload the page right now for a second we saw a spinner and then we got the first three posts once i press the load more button we see a spinner for a half a second and we see the next three posts so we see post four five and six and once i press it again we see post seven and a notification that there are no more posts to load so yeah without further ado let's get started all right guys so before we actually get started let's take a look at what have i done so far so i created a brand new project called loader approach and i'm currently in the settings py file inside of this loaded project directory and first of all let's take a look at the installed apps list because it has been extended by posts so this is an application that has been created for this particular project and we will do some work over here very soon then if we scroll down we have also templates and yeah according to the settings over here in the base directory i created a templates directory so it's right over here and inside i place base html so this base html file is the template that other templates will inherit from in our case we have only one html file and this is main html so you will see that this main html inherits from base html in just a second um then if we scroll down we also have some settings for the static files and um the base directory i also created a static folder and over here i place a five favorite icon a main js which only has a console.log hello world so we can actually see if everything is working and an empty style css so actually this is it for the settings pwi file let's take a look at now the urls here we have included the settings for the static files in the url patterns and we also registered one path for the home view and the home view is a view defined in the posts application which we will change which we will actually ignore but for now it's it's like this so if we go to the browser we have hello world and hello world in the console because and if we take a look at our views first of all we have an ordinary home view which is a function view which is related to this main html file in the post application folder and in the main html we have a block content because we are inheriting from base html and we just placed hello world all right so yeah i think this is actually it so we can begin coding so what we need to do is to head over to the post application folder and find models py file and first of all let's create a class called post which we'll inherit from models.model and we will create three fields the first one will be name and this is going to be a models char field with the max length let's say 200 and the next one is going to be the body so this is going to be a models text field and let's also add created and this is going to be models date time field auto now add is equal to true all right and finally let's add a string representation so over here let's return str self decay okay so now what we need to do is save this register this class in our admin so we need to import this model from dot models we want to import post and then admin site register post and yeah before we proceed let's stop the server from running python manage py make migrations python manage py migrate and python manage py run server so i already created a super user and i'm already logged in to the django admin so now if i refresh the page i should see the post application so there it is and yeah what we need to do right now is to create seven uh posts at least seven posts okay so i'm just going to put in post one and then post description one and i'm going to speed things up and we will see each other after creating seven posts all right guys so i created seven posts and right now what we can do is to go to the views py file because we will do some changes over here so first of all what i'm going to do is to import from django views generic we are going to import the view which is a place based class for class views and template view alright so i'm going to comment out this home view and we will have first of all a class which is going to be let's say main view and this is going to this will inherit from the template view and here we will just provide the template name which is going to be posts main html and then let's define a class which we will call post json list view and this will inherit from view and here let's put in get method with self arcs arcs and keyword arcs and for now i'm going to put in pass so let's put in those uh views in our url patterns and we are going to do it directly directly in the loader brush so over here we don't need home view anymore we want to import main view and post json list view so this main view is going to be uh this main path it's going to be related to the main path and i'm going to change this to main view and below we will have um let's say posts json something like this and this is going to be post json list view as view and the name let's put in post json view all right so now we can actually save this and i think we can come back into the vspy for just a second so what i'm going to do is to define a variable called posts and this is going to be well first of all let's import also our post model so from dot models we want to import post and here what i'm going to do is to put in post objects and i want to return a json response at the end so i can't actually serialize a query set so what i'm going to do is to put in values and i'm going to put it in a list so posts posts is going to be equal to the list and here i will have post object values okay and then as mentioned before we want to return a json response so from django http we want to import json response so let's return json response where the data is going to be the posts okay and then after a comma let's add save is equal to false i'm going to save this and i'm going to check the url what was the path post json all right so let's see if this is working i'm going to add this posts json and here are our posts okay so now what we want to do is to grab these data and display them in the console over here okay so in order to do that we need to jump into our main.js and over here we are going to use the jquery ajax so i'm going to put in ajax and we need to specify the type so this the type is going to be get and then we need to put in the url so let's put in posts json like this and we need to define what will happen on success so let's put in function which takes in a response and simply let's just console log the response all right and then if something goes wrong let's have an error which will be a function which takes in an error and here we will simply also console log the error all right so now i'm going to save this hit refresh and nothing seems to work i'm going to press command shift r and then over here we have a data so as you can see i have over here data and inside this data i have um seven seven objects so zero one two three four five six and for this to be a little bit more clearer let's access the data directly so as you can see in the views we are returning data so in the main html is our main.js let's console.log response data and refresh and here is our array of uh seven objects okay so now what we can do is to store this response data in a variable called data so this cons data will be equal to response data and on this data variable we can perform the map the map method where we will grab a single post and console log the post id for now so i'm just going to comment out this console log i'm going to save this hit refresh and we have one two three four five six seven okay this is more readable because right now what we need to do is to think about a solution for displaying only three posts and then we will worry about displaying another three posts on a button click and then if we click it again we should see another three posts however we have only seven so we should see the seventh both post and some kind of a notification that there are no more posts to load so let's begin by creating a variable which will be a let because it will change over time and the initial value will be three okay so we have this visible three so as the next step we can perform a trick let's change this to backticks and over here i'm going to inject this visible okay so i'm going to put invisible like this and over here we have some kind of a integer right now so what we need to do is to actually go back to our urls py file over here and let's add something over here so i'm going to put in and and this i'm just going to put in num posts all right so as the next step i'm going to go to our views and i'm going to print out keyword arguments we will see what we have over here and now i'm going to save this hit refresh we still see seven posts because we didn't change the logic actually but let's take a look at keyword arguments here we have num posts three alright so what we actually can do back in the posts we can set some boundaries so for example we should set boundaries that we can call upper and lower and the upper is going to be keyword arguments get and we want to get the number of posts all right so in this case it will be in in the initial state it will be three and the lower is going to be uh simply this upper minus three so upper minus three because we want to load three posts at a time so this is going to be the initial state so we will have um three for the upper boundary and zero for the lower one and then if we decide to go over here actually let's go inside this parenthesis we can simply display posts from the lower boundary which is zero to the upper which is three okay so um yeah i'm going to put in lower and over here upper all right so i'm going to save this and to show you that this is working what i'm going to do is to go back to our main js and i'm going to change this visible manually for now to six so let's see what is happening we have four five six only three posts from four five six because of the logic that we implemented over here so if i go back to main.js and change it to three we should see the first three posts one two and three okay so right now we know that we need to run this more than once we need to run it initially and then every time a button is clicked but actually we don't have any button so let's go to main html and do some uh yeah work in our template so what i'm going to do is to create a div with a class of actually it's going to be an id and here i'm just going to put in posts box and close it off and below we will also add a spinner later so i'm going to put in div id is equal to spinner box and i'm going to close it off as well and and then we will have a loading box and in the loading box we will simply have this load more button okay so i'm just going to identify this div as loading box i'm going to close it off but i'm going to put immediately a button over here so it will be a button with a class equal to let's make this button a blue button so it will be btn ptn primary and the id is going to be load btn and then i'm going to put in load more and close up the button all right so now i'm going to save this hit refresh and here we see only load more okay so let's actually put those boxes into javascript let's grab those elements so first of all i'm going to go over here below the hello world and i'm going to create a new constant which i will name posts box and this is going to be document get element by id posts box and below i'm going to grab the spinner box spinner box document get element by id spinner box box like this and uh we'll have a load button so load btn is going to be docu is it going to be equal document get element by id load btn and then the loading box so const loading or i'm just going to name it load box and i might missed a t cons load box and this is going to be document get element by id loading box okay so now we need to add a event listener on this load btn okay so i'm going to go over here and i'm going to put in load not the box but load the btn and we want to add an event listener with a click and this will do something so first of all we want to increase the visible that we defined over here by three and then we want to run this code so let's put this code into a function i'm going to name it as const handle handle get data something like this and i'm just going to copy this actually cut it and put it inside so right now we want to run this handle get data initially so i'm going to put it over here but also once the load button is pressed so i'm going to also put it over here and let's see if this will work in the console so i'm going to refresh load more and visible is not defined at html button element here we have visible plus equal three so we should be extending this visible variable over here and we missed an i and this is the issue so i'm going to save this refresh and now we have visible is not defined and this is because it should be corrected over here as well visible all right so hopefully now it will work we have one two three let's press load more we have four five six and then load more and we have seven so over here we loaded all the posts in the console and in a second we will do it in our template but in the browser but um yeah before we actually do this let's also have a confirmation that there are no more posts to load so in order to do that we need to pass in something else so let's go to the views and below the posts what i'm going to do is to define a new variable called post posts size and this is going to be the length of posts posts objects all like this so we have the length of the post objects all and right now we can create a variable called size and this is going to be true if the upper is greater or equal the post size and in other case it will return false and then over here we can return as max the size okay so let's take a look at how this looks like so i'm going to head back to our main.js and i'm actually going to console.log not the response data but response max and i'm going to save this hit refresh we have false maybe i'll make this a little bit bigger so you can actually see as so we have false and then load more we still have false then if we press it again we have true okay so and this means that we can actually in the success block add a condition if if we first of all maybe define this variable so what i'm going to do is to store this response max in a variable called uh max size and this max size is going to be response max and i'm going to console.log sorry i'm going to comment out this console.log and here i'm just going to put in if max size and if this is the case we want to console log done for now because we are doing all the work right now in the console so let's refresh load more load more done okay everything is working so right now we need to bring in the logic so that we can actually see this and more in the browser above the load more button so the first thing that i'm going to do is to actually go to style css and add a class not visible and we only need this class for the spinner and here i'm just going to put in display and i'm going to set it to none okay and as the next step what i'm going to do is to actually go to our main html where in the spinner box i'm actually going to add a spinner so what we need to do is to go to getbootstrap.com and find a spinner so i'm in getbootstrap.com and i'm going to put in spinner in the search and as you can see we have some options and we've done this in a separate video on my channel how to add spinner to a django project but in case if you didn't see it we'll do it one more time and let's get rid of this pan and yeah now we should actually see a spinner okay so i'm going to close this page i'm going to hit refresh and now we see a spinner all the time but if we add a class equal to not visible let's save this let's uh clear the cache and the spinner is gone so now we need to manipulate with this not visible class so once we should remove it and add it okay and we will play around this with this in the main.js so let's return to main.js and over here let's begin by referring to the spinner box and what we are going to do is to put in class list remove not visible so we are going to see actually this spinner right here but then let's stimulate some real conditions i'm going to put in set timeout and after let's say half a second some code that we are going to put over here is going to be executed so maybe first of all let's bring this um data map over here inside so after half seconds we should see in the console the post id and let's make the [Music] spinner disappear so maybe let's grab this spinner box put it inside the set timeout and after half a second we want to add a class not visible so we want the spinner box simply to disappear and i made a typo over here visible visible all right so let's see if this will work i'm going to hit refresh we see a spinner and it's gone and now let's uh do it again but let's focus on what's displayed in the console so i'm going to refresh after half seconds we see one two three let's press load more spinner and after half a second we see four five six load more spinner and then we see done in the seventh post okay so um yeah what we will do now is to refer to our posts box okay so let's go inside the data map where we are looping through every post and below the console log let's refer to the post box where we will access the inner html and we are going to add some code over there so again we will use backticks because we will need to inject some code and i'm going to put in div class is equal to card and i'm going to put padding 3 and margin top three and margin bottom three and i'm going to close up the div okay and inside what i'm going to do is to inject first of all the post name and then after a break line i'm going to inject the post body all right so hopefully this will work for the posts but if we are already here let's take a look at this um this part if max size and here we will reference the not load btn but the load box and we will access in our html and here i'm just going to put in h4 and let's put in something like no more posts to load let's see how this works out i'm going to hit refresh and nothing happened we still don't see the results um in the browser we see it only in the console so let's see what is wrong what we are doing wrong i'm going to actually console log the posts box let's see okay we have it over here but the posts aren't appearing okay over here we have no more posts to load so this part is working but um this one for some reason is not so um post box plus div with a class of cards okay let's close it off over here i forgot about the quotation mark and let's see if this was the problem so i'm going to refresh and there it is so we have post one two three load more spinner post four five six load more and then we have post seven however no more posts load appeared um a little bit too early so in order to change this what i'm going to do is to bring in this if max size and inside of here so now let's try it one more time a little more a little more and there it is no more posts to load so this is working the way i want it to work let's try it out again a little more a little more yeah all right guys so i think we can finish off over here and the source code will be available on github if you are new here please consider subscribing to the channel and hitting that notification bell and hopefully we will see each other in another video in another tutorial hope you guys have a great day see you soon and bye bye

Channel: Pyplane

Views: 13,286

Keywords: load more data on click, load more data django, load more data javascript, load more button, django and javascript, django js, django javascript integration ajax and jquery, how to use javascript in django, django and javascript tutorial, django tutorial 2020, django json view, django json response, load more button jquery, django and javascript integration, django 2020 tutorial, load more button django, load more button javascript, learn django fast

Id: P2KdFZZyruo

Length: 33min 33sec (2013 seconds)

Published: Thu Oct 29 2020