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() {

      drop: function(event, ui) {

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.

Source Fix for IE7 JQuery UI Draggable FIX

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.


About mfrank

Professional Developer of SwhistleSoft
This entry was posted in css, Html, Javascript Development and tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *