Time to divulge in a little code issue here.  I’m currently working on cleaning up the defect backlog of one of our largest products, and we’ve made more extensive use of jQuery in this application than we ever have before (and for one, I think it’s GREAT!), but it’s also caused us to hit some weird problems that we’ve had to work through.

We’ve been using the great Table Drag and Drop jQuery plugin to deal with reordering quickly and easily in the application.  There are a number of pages that implement it, and admittedly, I’m not the one who initially set them up.  We had a bit of an issue with the C# codebehind on all of them not properly processing a move from the 1 position up to the 0 position that I had to fix, and was able to do that (after some weeping, wailing and gnashing of code), but this one page refused to even get to the codebehind.

Everything worked fine except for when I moved a row from the 1 to 0 position, and I would get a javascript error that said:

prev().0.id is null or not an object

If I’m honest, not the most revealing of errors (though once I figured it out, it told me exactly everything I needed to know:)).  So, I dug through the C# code on each, which was identical (except for variable names), but I was pretty sure that wasn’t the problem anyway, as this was a javascript error being thrown, not a page error.

The jQuery call was exactly the same:

   1: function onDropItem(table, row) {

   2:             var curPanelId = getPanelId();

   3:             PageMethods.Reorder(curPanelId, $(row)[0].id, $(row).prev()[0].id, onSucceeded, onFailed);

   4:             $(row).highlightFade({ color: 'rgb(255, 241, 168)', end: '#fff', speed: 1000, final: "" });

   5:         }

So, it couldn’t be the client side code.  The problem, it turns out, was in the markup.  In both cases, the rows being moved are contained in ListViews, but I discovered a difference between the two.  In the ones that worked, there were no XHTML proper <thead> and <tbody> tags to delineate the rows of the table.  In the one that was broken, there were.

Time for that DUH moment when I realized that what was happening was that because of the <tbody> tag, there was no previous table row in the DOM for the jQuery code to access, so it was returning a null row, hence the error.

Now, admittedly, I fixed it by going the easy route and removing the <thead> and <tbody> tags (and it works perfectly now), but I know there’s a proper way to handle this with the tags left in, I’ll just have to play with it.

I Binged (yeah, I said it) for this error and found nothing online, so maybe if somebody else runs into this problem, this post will be helpful.  If so, please leave me a comment!