Wow… long time since i blogged. Thank god I'm going to the Dutch DevDays to see Scott Hanselman’s session called “How to make your blog suck less” :)
So here is an update of mine about how to use JQuery in SharePoint to do some fancy tricks. I’ll post some more of these tricks later on and I’ll try to be more active as a blogger again. (In which I’ll probably fail)
Have you ever tried to change some of SharePoint's default controls like the image picker?
Well I have. My customer wanted a image picker that worked exactly like the normal one except for 1 change. It shouldn’t show the selected image as an image but it should only show the URL of the selected image. I tried to change this at server side first by inheriting from the default SharePoint image picker control. This was a rather annoying job as i didn’t seem to get the right result this way. you cannot extend the rich image picker from sharepoint but only the default image picker that doesn’t have the image library function behind it.
When i was looking at the html that was rendered by SharePoint i thought it would be easier to change the html with jquery as with serverside code and this is the result. just save this source to a .js file and include it into your masterpage or aspx page and all selected images in the image picker will be changed to only show the url of the image.
///<reference path="jquery-1.3.2.min-vsdoc.js" />
$(document).ready(function() {
HideImages();
});
function HideImages() {
$("span[id $= '_RichImageField_ImageFieldDisplay']").each(function() {
var url = $(this).find("img").attr("src");
$(this).find("a").hide();
$(this).append("<span class='imgurl'>" + url + "</span>");
$(this).find("a").each(function() {
$(this).find("img").each(function() {
$(this).load(function() {
$(this).parent().hide();
var imgurl = $(this).attr("src");
$(this).parent().parent().find(".imgurl").text(imgurl);
});
});
});
});
}
It’s as easy as that.
More JQuery fun to post in the future.
Geert van der Cruijsen