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:
- You must have a link to the display form after the attachment icon in your list view.
- It only returns the first linked document for an item regardless of how many exist.
- On an attachment heavy page, this could cause problems because each attachment will need to fetch the associated DispForm page and grab the link.
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?
- JQuery for Everyone: Accordion Left Nav
- JQuery for Everyone: Print (Any) Web Part
- JQuery for Everyone: HTML Calculated Column
- JQuery for Everyone: Dressing-up Links Pt1
- JQuery for Everyone: Dressing-up Links Pt2
- JQuery for Everyone: Dressing-up Links Pt3
- JQuery for Everyone: Cleaning Windows Pt1
- JQuery for Everyone: Cleaning Windows Pt2
- JQuery for Everyone: Fixing the Gantt View
- JQuery for Everyone: Dynamically Sizing Excel Web Parts
- JQuery for Everyone: Manually Resizing Web Parts
- JQuery for Everyone: Total Calculated Columns
- JQuery for Everyone: Total of Time Differences
- JQuery for Everyone: Fixing Configured Web Part Height
- JQuery for Everyone: Expand/Collapse All Groups
- JQuery for Everyone: Preview Pane for Multiple Lists
- JQuery for Everyone: Preview Pane for Calendar View
- JQuery for Everyone: Degrading Dynamic Script Loader
- JQuery for Everyone: Force Checkout
- JQuery for Everyone: Replacing [Today]
- JQuery for Everyone: Whether They Want It Or Not
- JQuery for Everyone: Linking the Attachment Icon
- JQuery for Everyone: Aspect-Oriented Programming with jQuery
- JQuery for Everyone: AOP in Action - loadTip Gone Wild
- JQuery for Everyone: Wiki Outbound Links
- JQuery for Everyone: Collapse Text in List View
- JQuery for Everyone: AOP in Action - Clone List Header
- JQuery for Everyone: $.grep and calcHTML Revisited
- JQuery for Everyone: Evolution of the Preview
- JQuery for Everyone: Create a Client-Side Object Model
- JQuery for Everyone: Print (Any) Web Part(s) Plugin
- JQuery for Everyone: Minimal AOP and Elegant Modularity
- JQuery for Everyone: Cookies and Plugins
- JQuery for Everyone: Live Events vs. AOP
- JQuery for Everyone: Live Preview Pane
- JQuery for Everyone: Pre-populate Form Fields
- JQuery for Everyone: Get XML List Data with OWSSVR.DLL (RPC)
- Use Firebug in IE
- JQuery for Everyone: Extending OWS API for Calculated Columns
- JQuery for Everyone: Accordion Left-nav with Cookies Speed Test
- JQuery for Everyone: Email a List of People with OWS
- JQuery for Everyone: Faster than Document.Ready
- jQuery for Everyone: Collapse or Prepopulate Form Fields
- jQuery for Everyone: Hourly Summary Web Part
- jQuery for Everyone: "Read More..." On a Blog Site
- jQuery for Everyone: Slick Speed Test
- jQuery for Everyone: The SharePoint Game Changer
- JQuery For Everyone: Live LoadTip
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!
Awesome solution! It would be good if these could be triggered with a mouseover. If you could fix that, it would be great!
Thanks!
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.
“If I fix this up, would anyone use it?”
Yes!
Robin, if you fix this up, my teams would use this solution for sure! Thanks!
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
Hi,
Thanks for the solution; Can you explain the above implementation in detail. I am not used to JQuery yet.
Thanks again.
@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
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
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).
Where do you drop this code for it to run? In the webpart or in the html body of the page?
Thanks,
J
@JqueryNovice,
There are options for where the code goes, but for testing purposes, start with the Source Editor of a Content Editor Web Part.
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.
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?
Why doesn’t this work for me?
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.
Yay! I got it to work. Nice code! Love it.
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?
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….
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?
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”
Does this code work for WSS 2.0 as well?
Very elementary question, but how do you get the link to open in a new window? Thanks!