jQuery addition to Baby Steps

dynamic features… ohh fancy

The fourth project for Flatiron School is an addition to the Rails project. The important features here is to make some of the static content be dynamic.

This does not mean, flashy animations or gifs throughout the content. Dynamic features just means something that responds to an action. So, part of the items of some of the webpages will respond a certain way depending on what the user does.

As magical as Rails is, here we used JavaScript and jQuery. They are not two different languages. JQuery is a library built with JavaScript. A bit like Rails is to Ruby. Now that we know that we are using Javascript and jQuery, I will explain some of the things I added with it.

One of the features that I modified on the BabySteps project allows a user to add a skill by going through a drop down menu and selecting the skill to be added.

To make this a bit interactive, I wanted to have the skills display one at a time and allow the user to click next or back so they can go through the current skills that are available. The current skill will list the title, a checkbox to confirm the child has accomplished the skill and a text box that will allow the user to add a comment related to the particular skill.

There were three things that I had to keep doing many times as I was working to get the code to work.

First one, keep the developer tools opened in the browser. Then selecting a stopping point in the code that I wanted to figure out and use the console provided.

Second, think in JavaScript. I kept going back and wanted to use methods that are used by ruby such as include? blank?.

Third, get familiar with looking at the documentation for jQuery . For example figuring out the difference between prop() and attr().

Fortunately, there was a bit of a pattern to get these features working. One was that each event had to be initiated by a listener and from there it would look for a function. Then there was that for each of these requests it would mean I would be getting some data back. This data would then have to be extracted to get what I wanted to display.

There were a couple of ways that this data was retrieved. One of them was to use an Ajax GET request, the second was rending one specific thing using serializes (a JSON backend), rendering a response without refreshing. This was pretty neat in being able to do a POST and a GET at the same time without having to go to another page.

Even though it has been challenging to think in JavaScript, it has been refreshing to get feedback pretty quickly to see if something works by looking at the browser.

This really feels that to get things working right, and the way you want them to work is going to take a long time. Getting the listeners to respond the way you want them to while using data is another type of magic. Once these ‘buttons’ start to work smoothly, it gives you the reward that all of those new gray hairs that are coming out were all worth it.

I have seen how a bit of JavaScript can make the page look a bit better and have less of a 90’s look to it. Now with a bit of JavaScript skills I am looking forward to updating the look on my webpage.

Hasta Luego!