Skip to main content

Load more button

 As an optional add on, I told students they could add infinite scrolling, pagination, or load more buttons to their index page. I've seen one student work on implementing pagination so far. Most of them skip the add on. Django has an inbuilt paginator class which I hope to try using on my pet project one day soon. Today, however, a student wanted to use a load more button but was struggling to get it to work. I've briefly looked into it in the past and I knew it involved Javascript, but that was about the extent of my knowledge.

I pulled his branch and ran the project. First, I opened up chrome developer tools and I saw a few errors were showing up in the console. And they pointed to the Javascript. Turns out he was using jQuery, but had not included it from a CDN or downloaded it. First problem discovered. Off to a good start. 

Next, errors were no longer showing up but nothing was working. All items were visible on the page, which means  a) there wasn't need for a "load more" button because b) nothing was hidden and needed to be loaded. This was obviously not what he wanted. He was using the following code from this codepen  and it looked like it was time for me to go line by line to figure out what the problem was. 

The first line says to show the first 4 <div> but wait! Everything was already visible! So it turns out that jQuery needed to be used in conjunction with some CSS. He needed to use the property display:none and apply it to the elements so that everything was hidden. jQuery was then responsible for showing those elements bit by bit, whenever the "load more" button was clicked.

I'm not particularly strong at Javascript, but it certainly felt good to figure this out. Hooray for small victories! :)

Labels:

Comments

Post a Comment

Popular posts from this blog

So long and thanks for all the fish! Part 1 of 2

I have been with the Tech Academy both as a software developer bootcamp student, as well as an employee. After my bootcamp, I was hired first as the live project instructor, and then as Live Project Director. This, I believe, gives me a unique point of view. I have absolutely no regrets and would join the bootcamp again. But there are a number of things I would do differently. What I have learnt as a former student 1. DO NOT WORK PART TIME.   I worked part-time(20-30hrs) during my bootcamp. I was up at 2.30-3.00am every day to work for several hours. I took a short nap, and then I took a 1hr bus ride down to campus. Studied for 7- 9 hours. Took a 1hr bus ride back home. Lather, rinse, repeat. I also had some family obligations. My weekends and half the summer were taken up caring for my young stepdaughter. I was completely exhausted by the end of the bootcamp and I didn't know if I could do more. Learning to program is HARD. You need to be fully focused. I am fortunate because I di...
Post a Comment
Read more

Inserting data from CSV into Postgres table with Python

I've been looking into how to insert data from a CSV file into a Postgres Table with code. Turns out it's pretty simple and straightforward. I personally prefer doing it in code than with a command, but I'm not sure what is more common in the industry.  So now I should be able to load data from a CSV file into a Postgres table to create a REST API. The next step is trying to figure out how to convert that data into JSON format. 🤔
Post a Comment
Read more

Figuring out Postgres Part 1(Setting it up)

 I've been meaning how to use Postgres for a while now and I've finally decided to dive into it. First step, installing Postgres from their website . I kept all the default settings which meant it installed PostgreSQL Server, pgAdmin4, Stack Builder, and Command Line Tools. It later prompted me to set up Stack Builder, but I took a look at this tutorial  and determined that I don't really need to do that right now. It also helped me figure out how to verify the installation using SQL Shell(psql). Everything looks good so far. I followed another tutorial on Linkedin learning to create a database. Next on the tutorial, create a virtual environment and install Psycopg2-binary in it. Apparently it's a Postgres database adapter.  And because I'm an idiot, I forgot where I saved the database. I opened up Postgres shell and used the command SHOW data_directory; But it turns out I didn't need it anyway 😁 I created a new Python file and added the following lines of cod...
Post a Comment
Read more