Blog

As we seen in our previous article on Extending jQuery :: Part 1 – Miniature Plugins, it helps to be able to quickly build some project specific plugins to help keep your code clean. However, sometimes we don’t always want a method that acts on an element. But rather a global type function like the $.ajax method. Here we will take a look at how to create a standalone jQuery method for common tasks that can help keep our code clean. Read More

We have already extensively covered jQuery plugin development in the 30 minutes guide and it goes through in detail a lot of the nuances of creating a jQuery plugin both large and small. However, sometimes we just need a quick routine without all the getters, setters and prototypes. It is useful to know how to setup a quick mini plugin that will perform some operation on your elements and maintain method chaining for further operations. Read More

A very common task in jQuery is to take data from your form and send it to a server for processing. This is done so often that it’s a surprise that there is no built in method to this cleanly for json requests. Although jQuery does provide the .serializeArray() method it doesn’t do quite what we want. It gives us an awkward array of data not suitable for sending along with the data json formatted parameter in $.ajax calls. Read More

If you have done any kind of web development you will have likely made some asynchronous calls to an API or some kind of back end. In jQuery we will use the $.ajax() method to make these calls. With this call we can pass in all sorts of parameters and typically fire either a success or error callback. But what if we want to fire two or more ajax calls before firing a callback. Read More

The first question you may ask yourself is why on earth would I need to run multiple jQuery versions on the same page. It’s quite rare that you will need to, but a common in case is if you are trying to update legacy code to a newer version of jQuery and are worrying about breakage in your code. By running two different version of jQuery we can upgrade slowly and port our code into a new version of jQuery while not worrying about potentially breaking old code. Read More

Recently on a project I was working on I came across the need for a jQuery carousel plugin to display some images. I wanted something light weight and stable and an added bonus would be if it was Responsive. I started search around and came across this fantastic plugin. Read More

I recently came across a new JavaScript library that aims to provide all the main features of jQuery but at a smaller footprint. Coming in at only ~7.88Kb minified it does it nicely. Gzipped this file will be ~5Kb which is about the sixth the size of jQuery. Read More

Templating offers a great way to keep your coding concerns separate by allowing you to keep your HTML and JavaScript code separate. There are many templating plugins out there but they all do roughly the same thing so it can be hard to decide on which one to go with. Read More

A small but nice little jQuery tip is to know the difference between the remove() and detach() methods. They essentially do the same thing on the surface and will remove the events from the DOM. But there is a subtle difference in that the detach method will keep all associated data with the element.

It’s perhaps best illustrated with an example.

<div id="el-detach" style="background:red;">detach</div>
<div id="el-remove" style="background:red;">remove</div>

<script type="text/javascript">
  var detach = $('#el-detach').data('el', 'detach');
  var remove = $('#el-remove').data('el', 'remove');

  console.log($('#el-detach').data());
  console.log($('#el-remove').data());

  $('#el-detach').detach();
  $('#el-remove').remove();

  console.log($('#el-detach'));
  console.log($('#el-remove'));

  console.log(detach);
  console.log(remove);

  console.log(detach.data());
  console.log(remove.data());

  console.log(detach.attr('style'));
  console.log(remove.attr('style'));
</script>

Below is the output of the console.log statements.

Object { el="detach"}
Object { el="remove"}

Object[]
Object[]

Object[div#el-detach]
Object[div#el-remove]

Object { el="detach"}
Object {}

background:red;
background:red;

You will notice that even the style information will stay for both and it’s strictly the data that is lost. This can lead to a lot of frustrating bugs and is a good thing to be aware of.

If we wanted to just move an element we could just use something like append() or prepend(). But if we need to store it for insertion at a later time then the detach() method becomes very useful.