Category Archives: jQuery

Elaine’s jQuery Lessons: Part 2

For the BEIM NZ Fire project there’s a rather large form that needed styling, this form has sections where you can click a button and add a new row of input elements, each row has a link for them to delete the row if they make a mistake.

Originally the code was structured as a list item, clicking on ‘add new’ would simply add a new list item and clicking on delete would just delete the entire list item.

Here’s the original code for the Delete link

<a href="javascript:void()" onclick="$(this).parent().remove();">Delete</a>

So what this is saying is, when you click on this element, go to its parent and remove it. So in this case the link was sitting inside the <li> so it removed the list item and whatever was sitting inside of it.

I needed to refactor the code from a list item into a table so clicking on this link no longer worked. The input element and the delete link were in separate table cells so clicking on this link would remove the cell the link was sitting inside of.

I needed it to traverse up the tree and remove the whole table row so I did some research, then came across .closest() and its description was: Get the first element that matches the selector, beginning at the current element and progressing up through the DOM tree. Perfect, just what I needed.

<a href="javascript:void()" onclick="$(this).closest('tr').remove();">Delete</a>

So after a bit of tweaking, here is the code I came up with. Here’s an explanation: When you click on this item, find the closest table row (beginning at the current element and progressing up the tree) and remove it.

Again, like my previous post, there was little change on my behalf but it was still frustrating trying to look for something I didn’t know existed, I knew what I wanted it to do, but finding a solution was hard because I’m not aware of most of the jQuery selectors.

This little jQuery snippet wasn’t something I was asked to do, I knew the link no longer worked and I wanted to challenge myself to see if I could fix it on my own, I’m glad I gave it a shot and I’m always finding jQuery opportunities whenever possible.

Elaine’s jQuery Lessons: Part 1

Since I’m new to jQuery I thought this would be a good place to pop down my progress in learning jQuery.

So far I’ve spent a little time reading “jQuery: From Novice to Ninja” which is a fantastic book, its easy to read and simple to follow, highly recommend you guys to check this eBook.

I did a small amount of jQuery for ProCare, the search box had default text that needed styling (italic, light grey), but when a user clicks into the box and starts typing it would revert to normal body copy text.

Here’s a look at the original code piece by piece:

var searchBox = '#ctl00_plcUpperRightNav_CMSSearchDialog1_txtWord'

Simple enough, find this ID and we’ll reference this as searchBox later on.

$(searchBox).val('Enter Keyword');

Give this search box the value of Enter Keyword.

$(searchBox).blur(function() {
  if($(searchBox).val() === '') {
    $(searchBox).val('Enter Keyword');
  }
});

I thought blur had something to do with focus, turns out its when it loses focus, either by tabbing or clicking away. Basically this peice is saying when the search box loses focus do the following: if its empty then add Enter Keyword value.

$(searchBox).focus(function() {       
  if($(searchBox).val() === 'Enter Keyword') {
    $(searchBox).val('');
  }
});

This last piece is pretty much the opposite, when the search box gets focus and the value is Enter Keyword then make the value blank.

I already had my style set up for the Enter Keyword default text, I just needed to append it via jQuery, so here what I did:

$(searchBox).val('Enter Keyword').addClass("prompt");

Search box has the value Enter Keyword and the class ‘prompt’ which gives it the light grey and italic.

$(searchBox).blur(function() {<       
  if($(searchBox).val() === '') {
    $(searchBox).val('Enter Keyword').addClass("prompt");
  }
});

Again, when it loses focus and its still has the default text then append the 'prompt' class to it.

$(searchBox).focus(function() {
  if($(searchBox).val() === 'Enter Keyword') {
    $(searchBox).val('').removeClass("prompt");
  }
});

Remove the 'prompt' class from the search box so its ready for typing into.

Although this looks incredibly simple and doesn't look like much was done on my part, it still took me a while to get my head around the original code and where to add the class and remove it.

I think jQuery is awesome, powerful and quite easy to understand once you get the hang of it. It's just one of those things you need to do on a regular basis so you don't forget how to code.

I'll be adding more of these jQuery learning snippets to the blog, its mainly for my reference, so that I can come back here after a year and laugh see how far I've come.