Mark Rackley “get[s] by with a little help from jQuery and SPServices…”

I was going to try to leave a comment in the teeny little box at the bottom of Mark’s post entitled I get by with a little help from jQuery and SPServices…, but I realized that I wouldn’t be able to post my code suggestions there so that they were readable, so I opted for a post here instead.

Mark’s post is excellent, and gives some good info about something you might want to try with SPServices. I had a few thoughts as I was reading it, and I thought I’d capture them here.

First off, Mark says that you have to put the Content Editor Web Part (CEWP) at the bottom of the page. I haven’t found that to be true, though clearly Mark has. I generally put my code into the page itself instead, just below this line:

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

This keeps the code out of the way and I find it to be much easier to develop and debug script in the page with SharePoint Designer.

Second, there’s no reason to do the page refresh after the item delete. One of the big reasons that you probably will want to look at using jQuery is to reduce the number of postbacks to the server. This is one of the appeals of jQuery, making the pages feel what I call “active”. This is more prevalent on the modern Web; keep in mind that SharePoint 2007 was really written in 2005 (or earlier!) and the rules and modes have changed a lot since then.

So how would that work? Well, the simplest way to show you is to just give a little snippet of jQuery that you could add to the Delete button Mark has added to each row.

<td class="ms-vb">
  <input type="button" value="Delete" onclick="javascript:DeleteTimeEntry('{@ID}'); $(this).closest('tr').hide();" />
</td>

What this extra little snippet does is to look for the closest TR in ancestry starting with the current element — you can use parent() multiple times, but then you have to know exactly how many “generations” to march up through the DOM — and then hide it. To get snazzier, you might use .slideUp() instead of .hide() to give a nice visual effect. Another thought would be to fade the opacity and disable the Delete button. With jQuery, there are many options!

I’d probably put this new snippet into the DeleteTimeEntry function, but to do that you’d also need to pass the function the current element by using $(this). No big deal, but I wanted to show this as simply as possible.

Finally, the current version of SPServices is v0.5.6. I recommend keeping things up to date, as I’m regularly making tweaks, and more importantly fixing bugs. Mark shows v0.5.0 in his example, but I’ve made quite a few changes since then.

Thanks again, Mark, for the great write up! I’ve added it to the Articles and Press page on the SP Services Codeplex site.