I wrote a jQuery plugin that could help domino developers: jQuery.plugin.deleteable.js

In my current project we have a few web-pages that contains meta-data around clients, projects or companies. Each page contains different modules and one module that was repeatedly used was a table that lists attachments that was connected to the current page.

When everything was working I could simply do this in a document.ready to get everything in place:

1
$('#docFileTable').deleteable();

I wanted to have a solution that could be implemented all over the site without needing to rebuild every form. I came up with a jQuery plugin that makes the document represented in the table deleteable. I was able to do this with just one modification in the view that generates the markup for the table, I added an attribute to the TR cell: docunid and added an empty TD in the beginning of a row. The latter was due to a performance issue with IE6 when I tried to add this TD dynamically.

The rendered table looks like this (I have removed the anchor links for simplicity):

1
2
3
4
5
6
7
8
9
10
11
<table border="0" width="100%">
<tbody>
<tr>
<td class="rowControl"></td>
<td><a onclick="openPopup('/mydb.nsf/0/9D147753FCFAA1FCC125764C0067CADB/$file/jocke_jordglob.jpg?open');" href="#">jocke_jordglob.jpg</a></td>
</tr>
<tr>
<td class="rowControl"></td>
<td><a onclick="openPopup('/mydb.nsf/0/7A990FCEC0C4A468C125764C0067CAD6/$file/jocke_cigar.jpg?open');" href="#">jocke_cigar.jpg</a></td>
</tr>
</tbody></table>

Before we can delete anything we need to have something in the backend that deletes the document, an AjaxDocDeleter. It can be a simple agent:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Sub Initialize
On Error Goto errHandler
Dim session As New NotesSession
Dim db As NotesDatabase
Dim doc As NotesDocument

Set db=session.CurrentDatabase
Set curdoc=session.DocumentContext

'Print "
"
docunid=Strleft(Strright(curdoc.query_string(0)+"&amp;","docunid="),"&amp;")
Set doc=db.GetDocumentByUNID(docunid)
Call doc.Remove(True)

Print "Content-Type:text/javascript"
Print "result : 'OK';"
Exit Sub
End Sub

So, now we have a nice table and a back-end solution, let’s do a jQuery plugin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
jQuery.fn.deleteable = function() {
this.each(function(){
$('TR', this).each(function() {
var o ={
element : $(this)
,docUnid : $(this).attr('docunid')
};
td = $(':first',$(this));
link = $('<a href="#"> </a>').attr({'class':'deleteLinkNoACL', title:'Delete document...'}).click(function(){
elm = $(this);
if(confirm('Are you really sure?')) {
elm.addClass('loadAjax');
elm.removeClass('deleteAble');
ajaxParams = {
url : '/'+dbpath+'/DeleteDoc?OpenAgent&amp;docunid='+o.docUnid
,success: function(data) {
// if there's an error in data something went wrong
elm.removeClass('loadAjax');
elm.removeClass('deleteAble');

if(data.indexOf('ERROR')&gt;-1) {
elm.removeClass('deleteLinkNoACL').unbind('click');
elm.css({'padding-left':'20px','background':'url(../famfamfam/error.gif) no-repeat'});
alert('Something went bad, unfortunately we at the development team didn't put enough effort to solve this problem');

} else {
elm.removeClass('loadAjax');

o.element.hide();
}
}
}
$.ajax(ajaxParams);
}
return false;
});
td.prepend(link);
});
});
}

As we can see there’s a piece of CSS involved with this, and a few icons from the famfamfam library, the CSS used are these classes:

1
2
3
4
5
6
7
8
9
10
11
12
13
TD.deleteAble {

padding-left: 20px;
background: url('../famfamfam/delete.gif') no-repeat;
}
.deleteLinkNoACL {

background: url(../famfamfam/delete.gif) no-repeat;
padding-left:20px;
}
.loadAjax {
background: url(../ajax-loader-small.gif) no-repeat;
}

I haven’t assembled down this in a public package yet, but if enough people are interested I will do that. Just let know.

October 12th, 2009 in Computerstuff

2 Comments

Vince SchuurmanOctober 12th, 2009 at 12:20

Ah that’s a nice one, I was just looking for a ajax fileuploader, but an ajax file deleter is also nice ;)

gkNovember 22nd, 2009 at 08:50

Excellent. ..this what iam looking for. is there any sample database that i can download? Thanks

Leave a comment

Your comment