1,804 articles and 14,567 comments as of Monday, February 14th, 2011

EndUserSharePoint has combined resources with NothingButSharePoint.com. You can now find End User (Mark Miller), Developer (Jeremy Thake) and IT Pro SharePoint (Joel Oleson) content all in one place!

This site is a historical archive and is no longer being updated. Please update your favorites, bookmarks and RSS feeds.

NothingButSharePoint.com
Thursday, February 12, 2009

JQuery for Everyone: Linking the Attachment Icon

Another idea came from Stump the Panel, this one is from hrussell:

Everyone – including me – wants the little paper clip in a list view to actually be clickable.

To accomplish this, I used the jQuery load function to go get the attachment link from the DispForm and rebuild the attachment image with the link around it.

The limitations of this rough code:

  1. You must have a link to the display form after the attachment icon in your list view.
  2. It only returns the first linked document for an item regardless of how many exist.
  3. On an attachment heavy page, this could cause problems because each attachment will need to fetch the associated DispForm page and grab the link.

example

A better approach for lists using attachments heavily might be to build a hidden web part (CQWP, DVWP, or XML) with attachment data and associate the link information between the web parts. But for a quick fix, this works–even with groups.

<script type="text/javascript">
if(typeof jQuery=='undefined'){
	var jQPath = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3/';
	document.write('<script src="',jQPath,'jquery.min.js" type="text/javascript"><\/script>');
}
</script>
<script type="text/javascript">
/*
 * Copyright (c) 2008 Paul Grenier (endusersharepoint.com)
 * Licensed under the MIT (MIT-LICENSE.txt)
 */
function handleError() {
	return true;
}

function initAttachments(group) {
	if (!group) group = "#MSO_ContentTable";
	var arrayList = $(group+" [alt='Attachment']");
	$.each(arrayList, function(i,e){
		var elm = $(e).parent();
		var next = elm.next(":has('a')");
		var a = next.find("a").attr("href");
		var newgif = "<img align='absbottom' "+
			"style='border:none;'"+
			"src='/_layouts/images/attach.gif' "+
			"alt='Attachment '/>"
		elm.load(a+" #idAttachmentsRow td:last a", function(){
			$(this).find("a").html(newgif)
		});
	});
}

function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
    $("#tbod"+groupName+"_").attr("isloaded",isLoaded)
		.html(htmlToRender)
		.show("fast",initAttachments("#tbod"+groupName+"_"));
}
$(function() {
	window.onerror = handleError;
	initAttachments();
});
</script>

EDIT:
I suppose instead of forcing all of the links to load when the document does, we could trigger the link fetching on a mouseover. That would solve the problem of attachment-heavy lists.

If I fix this up, would anyone use it?

Paul Grenier

View all entries in this series: PaulGrenier-JQuery for Everyone»
Entries in this series:
  1. JQuery for Everyone: Accordion Left Nav
  2. JQuery for Everyone: Print (Any) Web Part
  3. JQuery for Everyone: HTML Calculated Column
  4. JQuery for Everyone: Dressing-up Links Pt1
  5. JQuery for Everyone: Dressing-up Links Pt2
  6. JQuery for Everyone: Dressing-up Links Pt3
  7. JQuery for Everyone: Cleaning Windows Pt1
  8. JQuery for Everyone: Cleaning Windows Pt2
  9. JQuery for Everyone: Fixing the Gantt View
  10. JQuery for Everyone: Dynamically Sizing Excel Web Parts
  11. JQuery for Everyone: Manually Resizing Web Parts
  12. JQuery for Everyone: Total Calculated Columns
  13. JQuery for Everyone: Total of Time Differences
  14. JQuery for Everyone: Fixing Configured Web Part Height
  15. JQuery for Everyone: Expand/Collapse All Groups
  16. JQuery for Everyone: Preview Pane for Multiple Lists
  17. JQuery for Everyone: Preview Pane for Calendar View
  18. JQuery for Everyone: Degrading Dynamic Script Loader
  19. JQuery for Everyone: Force Checkout
  20. JQuery for Everyone: Replacing [Today]
  21. JQuery for Everyone: Whether They Want It Or Not
  22. JQuery for Everyone: Linking the Attachment Icon
  23. JQuery for Everyone: Aspect-Oriented Programming with jQuery
  24. JQuery for Everyone: AOP in Action - loadTip Gone Wild
  25. JQuery for Everyone: Wiki Outbound Links
  26. JQuery for Everyone: Collapse Text in List View
  27. JQuery for Everyone: AOP in Action - Clone List Header
  28. JQuery for Everyone: $.grep and calcHTML Revisited
  29. JQuery for Everyone: Evolution of the Preview
  30. JQuery for Everyone: Create a Client-Side Object Model
  31. JQuery for Everyone: Print (Any) Web Part(s) Plugin
  32. JQuery for Everyone: Minimal AOP and Elegant Modularity
  33. JQuery for Everyone: Cookies and Plugins
  34. JQuery for Everyone: Live Events vs. AOP
  35. JQuery for Everyone: Live Preview Pane
  36. JQuery for Everyone: Pre-populate Form Fields
  37. JQuery for Everyone: Get XML List Data with OWSSVR.DLL (RPC)
  38. Use Firebug in IE
  39. JQuery for Everyone: Extending OWS API for Calculated Columns
  40. JQuery for Everyone: Accordion Left-nav with Cookies Speed Test
  41. JQuery for Everyone: Email a List of People with OWS
  42. JQuery for Everyone: Faster than Document.Ready
  43. jQuery for Everyone: Collapse or Prepopulate Form Fields
  44. jQuery for Everyone: Hourly Summary Web Part
  45. jQuery for Everyone: "Read More..." On a Blog Site
  46. jQuery for Everyone: Slick Speed Test
  47. jQuery for Everyone: The SharePoint Game Changer
  48. JQuery For Everyone: Live LoadTip
 

Please Join the Discussion

26 Responses to “JQuery for Everyone: Linking the Attachment Icon”
  1. Nicole says:

    Thanks, Paul! We can definitely use this in our SharePoint Project, if you could fix the problem with attachment heavy lists, that would be great!

  2. Erich O'Donnell says:

    Awesome solution! It would be good if these could be triggered with a mouseover. If you could fix that, it would be great!

    Thanks!

  3. Peter says:

    Paul,

    I tried this one on a list with many entries (200)and many attachments (5+) to some of the items. Having it load all of the attachments brought the page to a crawl, had to dump it. Performance would improve on mouse over if it just loaded for that item.

    I took the most recent seminar with you and you gave us the LoadTip webpart. This I think is a better solution since it shows the list of documents in the attachment field and we can open anyone of them up. LoadTip webpart has made life much easier for the team that manages our work list.

  4. Robin says:

    “If I fix this up, would anyone use it?”

    Yes!

  5. Erich O'Donnell says:

    Robin, if you fix this up, my teams would use this solution for sure! Thanks!

  6. AutoSponge says:

    Robin,

    I still want to make this work but I have to perfect the part that gathers data on the back end.

    Until that happens, take a look at my latest article–I took George’s advice (above) and let loadTip solve this problem for now:

    http://www.endusersharepoint.com/?p=1333

  7. ms says:

    Hi,

    Thanks for the solution; Can you explain the above implementation in detail. I am not used to JQuery yet.

    Thanks again.

  8. AutoSponge says:

    @ms

    This implementation is more theory and less practice. I wouldn’t personally use this script in this state. I would use use my loadTip script instead.

    However, I do plan to come back to this script with an update as soon as I can figure out how to grab the data I need from a web service or owssvr.dll.

    I’m working on an “Anatomy of a jQuery Web Part”-type article that you might find interesting though. Look for that in the next week or so.

    Thanks,
    Paul

  9. Nicole says:

    Hi Paul,

    I’m not sure what you mean by:

    “You must have a link to the display form after the attachment icon in your list view.”

    Thanks
    Nicole

  10. AutoSponge says:

    When you setup your view, put a column with a link in it (like Title with edit menu) next to the attachments column (like the default view).

  11. JqueryNovice says:

    Where do you drop this code for it to run? In the webpart or in the html body of the page?

    Thanks,
    J

  12. AutoSponge says:

    @JqueryNovice,

    There are options for where the code goes, but for testing purposes, start with the Source Editor of a Content Editor Web Part.

  13. JqueryNovice says:

    This is not working for me, does it matter that I put the view on the content editor web part to hidden? I copied and pasted that JQuery code and dropped it into the Source Editor of a Content Editor Web Part and the attachment icon is still not a link. I have an icon with link to edit item immediately after the attachment icon in list default view.

  14. Nancy says:

    My list is in a data view and instead of the attachment icon, I get the word “yes” or “no”. Can I still make this code work for me, and turn the word “yes” into a hyperlink?

  15. JqueryNovice says:

    Why doesn’t this work for me?

  16. Nancy says:

    I think it’s this reason:

    You said: “I have an icon with link to edit item immediately after the attachment icon in list default view.”

    But- Paul states: “You must have a link to the display form after the attachment icon in your list view.”

    If your link is to an edit form, not a display form, it will not work.

    I got it to work- but the other caveat is there can only be one attachment per list item.

  17. JqueryNovice says:

    Yay! I got it to work. Nice code! Love it.

  18. antony says:

    Thanks for the code Paul.
    I’ve tried and it’s working for custom list.
    how to make it to discussion list?
    So I want to make link to attachment on discussion list item.
    any idea?

  19. Avinash Badgujar says:

    Its not working for XSLT view of list :-(
    I had to do many many customization on my page of list view. Now I want the links to attachment icons. But its not working :-(
    Any workaround please….

  20. Avinash Badgujar says:

    One more problem….
    If I decided to use the code in web view (not XSLT)
    the attachment icons seems disappearing one by one. And after 20 seconds of page loading I see the entire icons missing :-(
    Anyone knows Why is this problem?

  21. Avinash Badgujar says:

    Sorry for the last post above; the icon image disappears because it was not having Display link next to it.
    As stated in requirements of this query, you should have a column linking to display form next to attachment columns.
    But other question is same – “How can we achieve same functionality for XSLT converted forms”

  22. Paola says:

    Does this code work for WSS 2.0 as well?

  23. Angela says:

    Very elementary question, but how do you get the link to open in a new window? Thanks!

Trackbacks

Check out what others are saying about this post...
  1. [...] As suggested by one of our workshop attendees, loadTip also does a better job of exposing the attachments of a list item without clicking the item. [...]

  2. New Video, Weekly Webcast, And Thursday Morning SharePoint Must Reads…

    URL: New Video, Weekly Webcast, And Thursday Morning SharePoint Must Reads Body: Morning all! In addition…

  3. Do’s and Don’ts Building SharePoint Applications…

    SharePoint is a great platform for building quick LOB applications. Simple things from employee time…




Notify me of comments to this article:


Speak and you will be heard.

We check comments hourly.
If you want a pic to show with your comment, go get a gravatar!