JQuery UI Draggable – data(…)options is null or not an object in IE7

I was working on a project that allows the users to create a list of names in their account. They could then take a name from the global list and drag it to a recipients list to send a mass email to everyone in that list. To accomplish this task and make it look good I decided to go with the great JQuery UI library’s (draggable and sortable to b specific).

So I have two <DIV> which are side by side. In the left <DIV> I display the list of global names relative to the logged in users account. The <DIV> on the right is the droppable area to create the recipient list of a mass email that the user can send out. The functionality I wanted to accomplish here was simple. Drag a name from the left <DIV> to the right <DIV>. Remove the name in the left <DIV> to ensure that name can only be added to the recipient list once. The user can also drag a name back from the right <DIV> back to the left <DIV> removing that name from the recipient list and add it back to the global name list.

I finished up the code and sent the application to the testing phase. All was going well until the testers got to that pesky IE7. IE7 keep throwing a javascript error (“data(…) options is null or not an object”). The kicker was everything was still working – an annoying javascript error dialog just kept poping up.

Here is a simple example of the code that was breaking:

$(document).ready(function() {

  function intDraggables() {
      $(".drag").draggable();
  }

  $(".drop").droppable({
      drop: function(event, ui) {
          ui.draggable.remove();
      }
  });
});

So I started debugging the issue. It turns out the error was getting triggered after I called (#element).remove() which was used to remove the dragged item from the source list on successful drop. After doing some research and code tracing I realize what was happening. Once you drag an element and drop it successfully, JQuery UI makes a request for the source items properties again. But because I had removed the element the object was null and was able to obtain the properties or options of the object. The JQuery UI function getting triggered was not testing for a null object before it attempted to get the properties.

I actually came across some fourm posts on the JQuery UI support site with other people experiencing similar problems. This is a known bug and doesn’t look like it has been fixed yet on any recent releases of JQuery UI. To fix this issue I simply opened up the JQuery UI library file and put in 2 null checks. The patched JS file is available for download below.

The simple source code fix

Once the patch was complete I no longer had any more issues and the application went into production. You can download the patched file here.