How to refresh a data view web part in place, without reloading the page?

Question

I've used SharePoint designer to create a page with multiple data view web parts. I'd like to refresh one of the web parts (e.g., by clicking a "Refresh Data" button) to display the most current info without reloading the entire page. In other words, I want an AJAX data view. I want to keep this project in SharePoint Designer. What are my options?

Answer 1

Probably the best approach is to use jQuery's AJAX capability. (Were you expecting that answer from me???) As you know, my jQuery Library for SharePoint Web Services provides you with some of the bits to make this happen. I've been thinking about writing a function for this actually. By going out and grabbing the current page again and stripping out the Web Part content we want, we could" restuff" the DOM with the updated content.

Answer 2

I think what you need here is Jaap's funky solution - he's basically done exactly what you're looking for I think. I'm assuming he just hasn't seen this question yet to respond himself.

http://blog.vossers.com/index.php/2009/11/03/released-sharepoint-livelistdata

P.S. Not sure I should be getting any points for this, it's Jaap who did the hard bit ;)

Answer 3

Thanks for mentioning SharePoint LiveListData Chris :) From what I remember, only web parts that have been added through the web UI will be refreshed by LiveListaData. If I recall correctly, DataViewWebParts added through SPD do no render as a div element with a WebPartID attribute. this div element is required by LiveListData to facilitate the refreshing. Secondly, I don't know if the DataViewWebPart has a property that holds a list ID. LiveListData depends on this property to poll for any changes to that list, and raise a "changed" event. If the DataViewWebPart does have a property that holds a list ID, then I guess you could design the web part in SPD, then somehow get the .webpart, upload it to the WP gallery, and manually add it to a web part zone. LiveListData should then be able to refresh your web part.

Even if you can't get LiveListData to work, I am sure you can look at the code that is up on CodePlex and extract some ideas on how to implement your custom jQuery script that is less generic but does exactly what you want. I think jQuery is definately the answer to your problem.

SharePoint LiveListData on CodePlex

Answer 4

I realize this conversation was started prior to the release of 2010. I still wanted to throw in my 2 cents re: in place webpart refresh via jQuery - I used a bit of a hybrid solution.

BIT 'O CONTEXT: I have modified DispForm.aspx to display multiple webparts (in addition to the header record in 1 webpart, related child detail records show in a 2nd webpart). A custom ribbon button allowed you to add a detail record right from within DispForm.aspx. The ribbon button launched an SP modal dialog. After saving the new record, the dialog closes and refreshes both web parts (since, in my app, the head record often updated dependent upon changes in child records).

Here's how I decided to acheive this:

1. I turned on the OOTB 'ManualRefresh' ajax settings that Microsoft provided with 2010 webparts.
2. When the custom-launched modal dialog box closes (i.e. the user is done adding a child record), I would run this type of jQuery to perform a click on the 'ManualRefresh' on behalf of the user:

function addChildRecord_modalDialogClosedCallback(result, value) {
        if (value == 1) {
                jQuery('#WebPartWPQ1').find('#ManualRefresh').parent().click();//refersh main webpart 
                jQuery('#WebPartWPQ2').find('#ManualRefresh').parent().click();//refersh child webpart 
        }
}

If you try this, ensure the selector ID is valid, of course. For my particular plain-jane SPF team site, the webparts seemed to follow a #WebPartWPQ1, #WebPartWPQ2, #WebPartWPQN... scheme. YMMV.

Answer 5

A shorthand version using jquery like above, using the $ and then removing the SharePoint #WebPartxxxx" webpart id filter, as I want to refresh-all. ...actually, I'm too lazy to find the name of the webpart, and it works.

$('#ManualRefresh').parent().click();

P.S. Test thoroughly.