Skip to main content

Extending jQuery :: Part 2 – Standalone Methods

By 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

Extending jQuery :: Part 1 – Miniature Plugins

By Blog

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

Serialize and Un-Serialize Form Data

By Blog

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

Executing multiple $.ajax Calls Before Firing Success

By Blog

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

Running Multiple Version of jQuery on the Same Page.

By Blog

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

Templating in jQuery

By Blog

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

Remove Versus Detach

By Blog

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.