Load more data on a button click in Django and Javascript || Endless Pagination

[Music] so hi guys welcome to pyjama tutorials so in this video we will create a load more button in django that is when user hits this button or clicks on this button load more post then we will load further uh post and when he or she again hits that button then we will load more data that is we will not render or load all the data at once we will simply load those data in small chunks so that it does not create too much strain on our server when we are in production so this is actually one of the efficient ways to reduce our server cost because if user doesn't want to see all the data why should we render them right so let's give you the demo of what i mean by this and then we will go back to our coding part so i am on our uh inspect mode because because i have set this network to slow 3g because it's easy to test it that way so when user clicks on this load more button so let me just click on this load mode button and you can see as soon as the loading is complete that loader become disappear and data is loaded 6th and 7th post let's again click on this now 8th and 9th posts are loaded let's again click on this now 10th post is loaded uh this is because this is the last word post in the database and when i again click on this loader load more button then alert appears that there are no more posts to load so this is what we will be creating in this video and please guys do like share and subscribe to the channel it will be a great help and let's get started with our video so far i've already created a django model with basic field titles and descriptions so and i also added 10 objects to the admin now let's create a basic view for rendering these data so let's start with that so here i need a django model so from my app dot model import post let's create a function def index request post obj post dot objects dot all and it's starting or at first point i will be rendering first five objects from the model and rest will be rendered after the user clicks the button load more or when the user wants to that data to be rendered then i will be showing those data also we need to send total number of objects in our model because we need it later so i will be sending from here only suppose.objects.com now we will simply render this return render request and our file is i think index.html index.html and context will be posts and it is post obj and total obj equals that is total object so that's what we have to do for our index function let's make the url mapping for this so from my app dot views import index index name will also be index now let's come to our html part now i already have the basic boilerplate for this so let me just copy and paste that you can obviously get it from the github so don't worry get a link will be given in the description let me just grab the code so this is the code and i have already included the links for bootstrap uh ajax that is jquery and other links that we need also let's create our body tag and let's close our html tag okay so let's get start with our basic html so i will be making using bootstrap classes so this container is one of the bootstrap classes and let's give the heading post also let's create a class content with id content also and now let's create a for loop for post in posts that we are sending from our views and for and so for this also i will be using a bootstrap border class to give the border so it is something single uh sorry dot single content dot border dot border success so the successor class this border success class will basically give green color to our border and i want margin top to be 2 and padding left of 1 sorry 2 actually and let's render our data now so this post dot title and post dot p e s c so that's it for now uh while i'm here let's also create a load mode button so let's create that also so i will be creating that outside of the content class so let's create a div load more ptn with margin top of three and id as ptn also button tab with type of button and class as btn gtn success this is also a bootstrap class that i'm using and text will be load more post okay let's check this out so let's run the server python manage dot file run server so okay it's run successfully let's stress this out so here are the post this is first second i've already created 10 objects in the model so that's why it is already rendering and as i have shown in our views we are only sending first five data so this this actually sends first five data and that's what we are rendering in the views so it is successfully running so now let's also give a sort of a loader so that whenever user hits the load mode post button we will kind of show a loader or a spinner that something is loading so i already have code for this so let me just grab it from the bootstrap website that is called for the spinner okay here is it is and let me show you how it looks on the website if you refresh it and so this is what i'm talking about whenever a user hits the load more post button this kind uh loader will show up and as soon as the loading is complete it will be made invisible via javascript so let's get started with that and also i use alert that is let me just paste it so this is the alert that no more post are there to load so let me just show it on the web site so suppose we uh user already have loaded all the posts that are in the database and if again here she use uses this button so this alert will appear that there are no more posts to load that is all all the posts have already been loaded so this is what we will do so let's get get started with that let's create our script and let's create function for loading the more post load mode post and let's get the length of current item that is total number of items present for now just dollar and as we can see this single content if we get the length of this div we can actually get the total number of posts that are present for now so let's say we get this class and we get the length of this post so we get our current item now what is this let me show you if i keep this here and let's just lock this current item current item and just comment this out let me show you let's inspect it and you can see let me refresh it again we are getting here five because there are five object that is length of the div is five so that's what we are getting so this length is actually the total number of posts that are being rendered so that's what we are getting from the length so so let's get ahead let's comment this out and comment out this now we get the length uh we now send ajax request so dollar ajax so i haven't created a url yet so let's just keep it empty for now type will be get and data will be this total item this is actually the current item now let's implement basic function we need before send function we also need success function by the way these are basics uh these are basic jquery functions so if you don't know about them you can watch my other videos about basic jquery i'll give the link to those videos in the description so please check out those videos if you want to learn more and we also need a error function here in success function we will be getting a response that we will be sending from our views and if error occurs then this so for now let's just simply log this response or if error comes let's just simply log this error okay now when do we want to call this function we want to call this function when user hits the load mode button so let's grab that button first const load vtn equals to document dot get element by id and id of the button is btn okay so load btn.add event listener of type click let's implement a arrow function and on click we want to load more post now basic html or javascript part is finished let's handle this request in our views file so let's create a function load more request so first let's get all the items that are already present so total item equals to request dot get dot get and data we are sending is total item so this string has to be same total item and this all should be end okay so this has to be end now let's initialize one more variable limit to so this limit is basically how many posts we want to send or render after user clicks the button so let's say user clicks the button then we want to send two more data so that is what limit will do so let's get the post object so and this will be list because we will be sending json response so either we can use this list or with the values values that is dot objects dot values or we can use simple this post.object short all and serialize that data to send a json response so i'm using this obviously you can use whatever you want so and this will be from total item to total item plus limit so here we are sending from zero to five now for uh for the first time when user clicks the load more button this total item value will be five so here total item will be five so it will be from five to seven so that's how this will work now let's send the data again we are sending post and it will be post obj uh we will be sending json response so let's import that from django dot http input json response and by the way these errors are due to pylons so don't worry about that i'll fix that later so this is nothing to worry about written json response data equals to data so it's done let's make the url mapping so i will be load more part load load more name will be low so we haven't given the url so let's skip that load sorry url load so that's all we have to do for now let's see if this is working or not here it is load more button so after clicking the button we get two arrays and those two areas are id seven and id eight that is sixth post and seventh post so after fifth we will be getting six post and seven posts so it is working now if we again click it we again get the same data because length of the div is still five and we because we are not actually rendering at any data in the html yet so that's why it's sending it is sending the same data again once we render those data then value of the let me show you then value of this total item will become seven and the value that we will get here will become seven so and this post.object start values will be seven to nine that's how it will be changing so let's get started with that and that is rendering those data so first i have already implemented this class not visible so let's use this so dot not visible display none so loader and that alert box is not visible now and we will be making them visible through javascript and now for that we need certain things so let's grab those thing you need spinner document dot get element by id id is spinner also we need total objects for total objects yes here from the first function we are sending this total object so instead of rendering this we can simply use it like this let me show you total obj that is what we are sending right total obj yes total obj i want it to be json script which i'll show you what i mean by this json script and name will be json total let's save this and let's open our web page refresh this open view page source now that line which i have written just now this line you can see here it is script so id is automatically given by django which is in total and this is the total number of count that is total number of objects present in our database so this is what so this is this is the line that's what this actually means so total object and this is json script and id is json total so we will be getting our total objects from this how let me show you const uh total json dot parse document dot get element by id json total is the id dot we want text content so we will get total number of objects in this total variable also we need alert document dot get element by id and id is alert okay so that's all the things we need now let's come to our before send function so just before sending a jazz request i want my load button to become invisible so classless dot add not visible and just before sending the request i want spinner to be appear on screen so class list dot remove and remove not visible oh sorry not visible let's copy this class because we will be using quite a lot sorry so that's all for before send function and as far as success function is concerned let's first get the data it's get those uh data that we get from the response so response start post that we will be getting because we are sending post from here response dot post and as soon as we get the data i want spinner to be removed from the class so class list dot add not visible class and we want our data to be loaded on this step right so we have to grab this tip content so let me just get that so const let's make them content container document dot get element by id content and let's use the map function for getting all the data so data dot map and let's make the variable post arrow function so content container dot inner html plus equal and let's use back text and we can grab this dip from here because ultimately this is what we are rendering let's paste this okay okay so here i will be using dollar sign and it is post dot title and here it will be host dot tesc okay so that's it that's what we have to do let's test this out and hopefully this should work okay let's refresh this and let's click the load button so you can see as soon as the load button is clicked two more posts are loaded but i think we haven't made our button visible yet okay we are making our button invisible and we are not again making it visible again so let's just make our button visible sorry this let's copy this and paste this here and instead of add we will be using remove let's test this out again okay so sixth and seventh post now again 8th 9th again 10th now after this 10th post there are no more posts to load and still the button is there and there is no way user can know that there are no more posts to load so what we can do is create some sort of alert box so that user can know that there are no more posts to load so that's what we will be doing now let's copy this and let's create a logic if uh this current item current item is actually the length of the div if it become equal to the total total is the number of objects that we are getting this so as we have seen earlier this is actually 10 we have seen in the source page of the web page so this is 10 so now if current item becomes equal to the total number of objects in our database then what we want we want our alert to be visible to users so alert dot class list dot remove not visible and else if this is not the case we want our button to appear right so if so let's say if this part is true then our buzz button will hide and alert will appear and if it is not true then button will appear and alert will hide so let me show you let's refresh this uh let's click this load more post sixth seventh load more post eight ninth load more post now tenth all ten posts are now loaded now if i click again on this then button uh disappears and this alert appear that no more post will load uh also if you are not able to see the loader or spinner let's go to our inspect and let's refresh this and in the network tab let's set the throttling to slow 3g now let's refresh this so now it will be behaving as if there's a slow 3g network so you can see it more properly let's hit the load more post button you can see loader appears now as soon as the data is loaded it disappears again let's do this again 8th and 9th post are loaded again let's do this now this is the final post now if i click on this see now alert appears no more posts to load so that's all we have to do to create an endless pagination or load more button in django and i hope you like the video if you do please like share and subscribe and please share it as much as you can it will be of a great help till then thank you so much for watching and till then good bye

Channel: Pydjango-Tutorial

Views: 196

Keywords: django, ajax, javascript, loadmore, endless-scroll, endless-pagination, jquery

Id: t8luXilRnlE

Length: 33min 30sec (2010 seconds)

Published: Sat Oct 02 2021