B i t s O f S h a r e P o i n t C o n s u l t i n g L L C > B l o g P o i n t > Posts > JQuery - View a list from any site with Auto Refresh

4/22/2009

JQuery - View a list from any site with Auto Refresh
Ever want a list to refresh on its own so that you know you have the latest list of info?  Well here is a solution that can be used.
 
Christophe has provided us with many great solutions.  One of those solutions has been code that allows us to view a list from any site, which SharePoint does not do out of the box.
 
I have been using this solution and have found great uses.  I then began to have a need to be able to view the latest listing since the list was being updated on a regular basis.  I had been refreshing the page, but that updated everything a took a lot of time.
 
I decided that there must be a better way.  So I did some research and found a way to make the list refresh on a regular basis.
 
This post will outline my solution for making a list view using Christophe's original code and adding a timer to reload.  The nice part is that this does not reload the whole page, only the list.
 
I will be only applying this to the JQuery version of Christophe's code.
 
Here is Christophe's original code:
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<!-- Load and display list - jQuery version -->
<!-- Questions and comments: Christophe@PathToSharePoint.com -->
<DIV id="ListPlaceholder"><IMG src="/_layouts/images/GEARS_AN.GIF"></DIV>
<script type="text/javascript">
// Paste the URL of the source list below:
var SelectedView = "http://domain.com/SiteCollection1/SourceSite/SourceList/MyView.aspx";
$("#ListPlaceholder").load(SelectedView+" #WebPartWPQ1 .ms-listviewtable",function() {
$("#ListPlaceholder *").removeAttr("id");
$("#ListPlaceholder *").removeAttr("onclick");
$("#ListPlaceholder *").removeAttr("onfocus");
$("#ListPlaceholder *").removeAttr("onmouseover");
});
</script>
 
Here is Christophe's code with the refresh timer added in red:
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<!-- Load and display list - jQuery version -->
<!-- Questions and comments: Christophe@PathToSharePoint.com -->
<DIV id="ListPlaceholder" ><IMG src="/_layouts/images/GEARS_AN.GIF" width=32 height=32></DIV>
<script type="text/javascript">
// Paste the URL of the source list below:
function loadData() {
var SelectedView = "http://domain.com/SiteCollection1/SourceSite/SourceList/MyView.aspx";
$("#ListPlaceholder").load(SelectedView+" #WebPartWPQ1 .ms-listviewtable",function() {
$("#ListPlaceholder *").removeAttr("id");
$("#ListPlaceholder *").removeAttr("onclick");
$("#ListPlaceholder *").removeAttr("onfocus");
$("#ListPlaceholder *").removeAttr("onmouseover");
});
};
// When the document is ready...
$(document).ready(function() {
 // Load the data
 loadData();
 // And load it every 20 seconds thereafter
 setInterval( loadData, 20000 );
});
</script>
 
The timer can be adjusted to update at any interval.  To make an adjustment you will need to update the number in blue.
 
 setInterval( loadData, 20000 );
 
To set the timer here are some examples:
 
20 seconds  ---->    20000
60 seconds  ---->    60000
6 minutes    ---->  600000
 
Always check Christophe's site for the latest code on displaying a list from any site.
 
Enjoy,
 
Peter
Posted at 12:53 AM by Peter Allen | Category: SP-Javascript/JQuery; SP-Document Library; SP-Lists; SharePoint | Permalink | Email this Post | Comments (4)

Comments

JQuery - View a list from any site with Auto Refresh

Very cute
at 5/8/2009 12:31 AM

The autorefresh

Hi, Peter,
I copiend the code as you have listed into the source editor of my CEWP, and changed the HTTP, as instructed, to point to a list on my site.

All I get is this green dot with lines rotating about it.  What does this mean?  The list does not appear.

I'd really like to make this work, as I have lots of uses for it on our SharePoint MOSS site.

Any thoughts would be appreciated.

By the way, I did an experiment and copied Chris Jquery code without your addition, but it still did the same thing.

I'm sure I'm missing something.  below is what I pasted into the CEWP I placed on a list page.

<!-- Load and display list - jQuery version -->
<!-- Questions and comments: Christophe@PathToSharePoint.com -->
<DIV id="ListPlaceholder" ><IMG src="/_layouts/images/GEARS_AN.GIF" width=32 height=32></DIV>
<script type="text/javascript">
// Paste the URL of the source list below:
function loadData() {
var SelectedView = "http://bdvsharepoint:14282/purchasing/Lists/Daystar%20Ship%20To/AllItems.aspx";
$("#ListPlaceholder").load(SelectedView+" #WebPartWPQ1 .ms-listviewtable",function() {
$("#ListPlaceholder *").removeAttr("id");
$("#ListPlaceholder *").removeAttr("onclick");
$("#ListPlaceholder *").removeAttr("onfocus");
$("#ListPlaceholder *").removeAttr("onmouseover");
});
};
// When the document is ready...
$(document).ready(function() {
 // Load the data
 loadData();
 // And load it every 10 seconds thereafter
 setInterval( loadData, 10000 );
});
</script>
at 7/10/2009 11:53 AM

 Same issue here

Yeah I'm getting the same issue..

I can use the non jquery one no problems, but jquery version just has the gears icon..

Could this be release without jquery ?
at 1/13/2010 11:14 PM

Reason

The reason you may be getting the spinning icon is that you have not loaded jQuery.  In order for a jQuery script to work, jQuery needs to be loaded.

Here is what needs to be added:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

I have added it to the code in this example.  Make sure you add it to the code you have in your CEWP.
Peter Allen at 1/15/2010 5:13 PM

Add Comment
Items on this list require content approval. Your submission will not appear in public views until approved by someone with proper rights. More information on content approval.

Title


Body *


Addition: 2 + 1 = *


Please complete this equation.

Email


This is optional.
Attachments

 T o p i c P o i n t

 E x a m p l e P o i n t