Refreshing a Web Part Without a Postback Using jQuery’s AJAX Function
I’ve been working on several projects with good old SharePoint 2007 (MOSS). jQuery and jQueryUI sure can spice it up nicely. Recently, I decided I wanted to refresh the contents of a Data View Web Part (DVWP) based on a user selection – a simple click on one of a big set of links – but I wanted to avoid that clunky postback.
SharePoint 2010 has the ManualRefresh capability baked right into DVWPs, but not SharePoint 2007. Besides, I wanted both the trigger for the refresh and the UX to work differently than the rather utilitarian (and never used in my experience) out of the box feel that 2010 gives you.
This is the script I came up with. In this case, I decided to show a nice message in a modal dialog using jQueryUI while I waited for the .ajax() call to complete, as I’m using an AggregateDataSource that is querying several pretty large lists. This means it takes a few seconds to come back, and the dialog saying what’s going on – not just a spinner – makes the UX more palatable.
/*
Refreshes an element's contents on a user action, showing a modal dialog during the refresh
elementId The id of the container element
qs The Query String to append to the current URL
title The title to show for the dialog
msg The message to show in the dialog
*/
function refreshElement(elementId, qs, title, msg) {
var elementObj = $("#" + elementId);
var infoDialog = $("<div><div>" + msg + "</div><div class='aaa-please-wait'></div></div>").dialog({
open: function(event, ui) {
$(".ui-dialog-titlebar-close").hide(); // Hide the close X
$(this).css("overflow-y", "visible"); // Fix for the scrollbar in IE
},
autoOpen: false,
title: title,
modal: true
});
infoDialog.dialog("open");
elementObj.fadeOut("slow", function() {
$.ajax({
async: false,
url: window.location.pathname + qs,
complete: function (xData) {
newHtml = $(xData.responseText).find("#" + elementId).html();
elementObj.html(newHtml);
}
});
}).fadeIn("slow", function() {
infoDialog.dialog("close");
});
}
I made the function pretty generic so that I could pass in the four arguments and use it in multiple locations if I needed to. You could really pass in the id of any element in the page. In the instance I built it for, I was passing a new value on the Query String based on what link the user clicked on, but fetching the same page with AJAX. The DVWP was set up to return different data based on the Query String parameter value.
Keep in mind that both jQuery and jQueryUI must be loaded for this to work.
The CSS for the body of the dialog is pretty simple, but here it is. The sizing worked well for me based on the image I decided to display.
.aaa-please-wait {
height:150px;
width:auto;
background-image:url('/SiteCollectionImages/ajax-loader.gif');
background-repeat:no-repeat;
background-position:center center;
}
What do you think? Would this make a good addition to SPServices? If so, what other options would you like me to include? If I did add it to SPServices, I’d remove the dependency on jQueryUI, as I don’t want any outside dependencies other than jQuery itself.
Marc its a good addition. I think we can remove the jQuery UI dependency and load SharePoint spinning icon with an overlay on the target element.
I haven’t tested it, but the code looks good. My only feedback on this code is to speed up the fade transitions or drop them altogether. Slow fades really make a UI feel, well, slow.
If adding to SPServices (which I’m torn on; this isn’t strictly a web services function so a standalone jQuery plugin seems more appropriate), I’d extend the options so that it can use a modal or not (maybe put the loader gif over the web part itself with a white translucent overlay or something), has defaults for the title and msg values, allows for async: true, and provides an auto-refresh option that can be run on page load (which probably should require async: true). Definitely drop the jQueryUI dependency. The SPServices debug modal would work nicely for this with some CSS tweaks I think.
Josh:
Thanks for the feedback.
The fade transitions worked well for this particular use. It made the time it took to load the content feel like something was happening. At least that’s what the people who use it seem to feel so far. Adjustments may be needed.
It’s definitely not a Web Service thing. I’m a little torn about adding non- Web Service stuff to SPServices, like you. However, as 2007 fades into the background and even 2010 is about to start thinking about retiremenet, it may be time to expand on the mission. I’m really not sure. I’ve added a new function in 0.7.2 which helps with People Pickers – SPFindPeoplePicker – but doesn’t have anything to do with Web Services, either. Bad idea? Maybe.
On the other stuff, great ideas, as usual.
M.
Hey, if the users like the slower fade, that’s what’s important! It’d be another good option if you incorporate into SPServices.
Marc – if you have, say, 10 web parts on a page, this logic will refresh the whole page using AJAX and then your script use DHTML to update the particular web part. Wouldn’t that model use to much performance and bandwidth?
I would expect that SharePoint could update web parts dynamically – one at a time. But to my knowledge this is not possible.
Have you investigated creating web parts purely in jQuery UI? We’ve done a few web parts in this way – which can be updated dynamically one-by-one on the page. Quite powerful.
Morten:
I used this script to refresh one Web Part in SharePoint 2007 on a user action. If there were 10 Web Parts on the page, I could call it to only act on the one Web Part I wanted to refresh.
Building your own “Web Parts” with script (pretty easily donw by adding some markup and script into a Content Editor Web Part) is certainly a great idea in some cases. It’s really important to let the server do the work it is good at, though, and do work on the client side when it makes sense.
M.
This looks very similar to the solution I posted on my blog a couple years ago, and which is now part of the User Toolkit:
http://usermanagedsolutions.com/SharePoint-User-Toolkit/Pages/Cross-Site-List-Snapshot.aspx
Have you compared them? Mine has a different behavior – it refreshes at regular intervals like SP 2010 does – but it seems to use the same technique.
Christophe:
It does indeed seem similar, though you’re doing a lot more that I am. I don’t recall seeing this part of your toolkit. Nice!
M.
The initial solution was actually published 3 years ago. I wrote it for any kind of view, not just DVWP, and also to work cross-site. That’s why it adds some complications, because stuff such as calendar buttons and context menus will break and have to be disabled.
ie8 not support this ???
Image frozen…
Ruben:
Animated GIFs don’t play well in IE8 during synchronous operations, as you’ve noticed. I’ve never found a way around it.
I’m starting to play around with jQuery promises, and I think that’s the way forward.
M.
I have a data view web part and a text filter with wild card search connected to it.
I am not too sure if the code above can be applied on Office 365 online version inside a jQuery tab panel?
If yes, can you please send some code examples?
Is the element id for the div?
Thank you for help!
Sandor
Sandor:
An approach like this can work with any version of SharePoint, regardless where it’s hosted. In this case, yes, the id is for a div I’ve put into the page.
M.
Hi Marc,
This is not the first post of you which helped me a lot. So thank you very much your work.
With this post I successfully refreshed my DFWP without refreshing the whole page and merged with SPCascadeDropdowns to filter and show summary informations on my SPS Online page.
Thanks,
Gabor
Excellent, Gabor! I’m glad I could be of help.
M.
Hello Marc,
Could you help me please a little?
I used the above method to refresh and then filter my page. However SPCascadedDropdown seems not working well for me with lists has more than 20 items in it.
A have read a lot and fount that IE renders page different with 20+ items in it and for me it seems SPCascadedDropdowns not handle it. It can be seen well it renders as an input not a select field. Also it changes its name to “Field” instead of “Field Required Field”. I couldn’t make it to work so the best I could do with my actual knowledge is I found the SPComplexToSimpleDropdown function. This works well in IE 11. However in my filter text (in my list items) there are not only english characters (é, á, ö, ű …). The SPComplexToSimpleDropdown seems change these to unreadable characters (a rectangle with question mark in it) so the filter stopped working.
Is this a charachter encoding issue? Do you have any idea what should I do?
Thanks!
Gabor
Gabor:
SPCascadeDropdowns should work with any combination of dropdown types, as noted in the documentation. If you’re seeing the ” Required Field” suffix, then you’ll need to be using SPServices 2014.01.
As for the non-English characters, I’m not sure. If you’re still having problems, please post the details to the SPServices discussions and include your code.
M.
Thanks Marc!
I know SPCascadedDropdown should work but it doesn’t. I’m using 2014.01 version.
Will post it to the right forum.
Thank you!