This project has moved and is read-only. For the latest updates, please go here.

SP 2007 Automatic Refresh

Aug 29, 2013 at 6:58 PM
Edited Aug 29, 2013 at 6:59 PM
I'm looking for a way to (hopefully) seamlessly refresh a CEWP in SP 2007. The data source is a custom list, and I'm interested in getting this to work using SPServices GetListItems if possible. The goal is to refresh the page periodically so that tooltips (using qTip2) will automatically show nearly real-time information when the user mouses over them.

In researching this I found a project on which Marc helped ( ); unfortunately, I don't know enough yet about getting around in JS or SP to figure out how to convert the example from an AJAX call to GetListItems. Here's what I have so far.

List Setup/Contents:
Title          Notes
Priority 1     This is my first note.
Priority 2     This is my second note.
function reload() {
        operation: "GetListItems",
        async: false,
        listName: "Priorities",
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Notes' /></ViewFields>",
        completefunc: function (xData, Status) {
            var divHtml;
            $(xData.responseXML).SPFilterNode("z:row").each(function() {
                divHtml += "<div class='priority'>" + $(this).attr("ows_Title") + "</div>" + 
                "<div class='tooltip'>" + $(this).attr("ows_Notes") + "</div>"
            document.getElementById("#prioritiesWrapper").innerHTML = divHtml;

    var auto_refresh = setInterval(function(){reload();}, 60000);
The example above is messed up, I know, so I'm fully expecting it to change drastically. In theory, I see the page load triggering an initial run of the GetListItems function, which polls Priorities and creates a big list of all existing priorities and associated notes, storing it in divHtml. The contents of this variable then completely replace the former contents of the prioritiesWrapper div, a process which repeats every n seconds. This way, if I make a change to the custom list, I'm guaranteed at least once every minute (by current settings) to have that change pushed to my central view of system health automatically without having to remember to refresh the screen.

And the HTML, once complete, should look like this:
<div id="allPriorities">
    <p>My Title</p>
    <div id="prioritiesWrapper">
        <div class="priority">Priority 1</div><div class="note">This is my first note.</div>
        <div class="priority">Priority 2</div><div class="note">Second note.</div>
Is this a sound approach, or is there a better way to do it?
Aug 29, 2013 at 9:21 PM
I think I have it. The trick required a couple changes to what I provided above:
  1. I ended up using jQuery's .replaceWith instead of document.getElementById. Now I wrap the imported list fields with a prioritiesWrapper div, and replace the old with the new.
  2. Though I left it out of the snippets above, I had been keeping the qTip code down in the (document).ready function instead of in the reload function, so every time it refreshed the tooltip functionality was disappearing. Once I moved it up, the tips refresh every minute. There's a slight blip as the tip reloads, but when I move the mouse again, the tip reappears with the updated information in it.
The end result is a CEWP that draws its information from a user-maintained list, but is able to display up to the minute data without user intervention. I think that's a pretty neat feature!