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.

Enhanced by Zemanta

10,000 Downloads of SPServices v0.7.1

Today, July 6 at about 4pm EDT, SPServices v0.7.1 received its 10,000th download Because I’m amused by this sort of thing, I was watching on my iPhone from my friend’s beach house.

The animated GIF below shows it as I saw it happen. Notice that Toby Mai (@GrumpyTech) tweeted me right after he did the ceremonial 10,000th download.

Because Toby was the lucky 10,000th downloader, he has received a lifetime free subscription to SPServices. Enjoy, Toby!

It’s fun to save these little milestones for SPServices here on my blog for posterity. Thanks to everyone who has helped out along the way!

SPServices 1.7.1 10000

@ Glad it was you. The 10,000th downloader gets a free lifetime subscription!
@sympmarc
Marc D Anderson
That's project lifetime 53,032 downloads; 10,000 for the latest version (since 13 Feb). http://t.co/T9HswsnK #SPServices
@sympmarc
Marc D Anderson

Full Reset for Internet Explorer 9 – Really

http://twitter.com/sympmarc/status/218712378165047296

This tweet caused a lot of questions back about what I meant and how I did it. so a blog post.

I have been having a number of problems with IE9, the most annoying of which was that files I downloaded wouldn’t open or run once they were fully downloaded. The dialog at the bottom of the screen simply disappeared after the download with no joy.

image

For months now, I’ve been choosing Save As… and the clicking on the Open Folder button to run or view the downloaded file. Yeah, I usually live with these things for way too long. And it was really annoying, too.

image

LastPass keeps all my passwords for me (LastPass is awesome – check it out), so that wasn’t going to be a problem. What I would give up was a pretty significant list of stuff, but I figured it was worth it to get things working right again.

After the reset, somehow Ask.com became my default search engine, which I didn’t realize until I was looking for the original post which recommended that I reset IE9 to solve the problem. Because my history was blown away, I can’t find it again.  When I had looked a few times before, the suggestion had seemed Draconian, but I finally bit the bullet.

In the interest of education, I just did another reset and captured the steps.

Go to Tools / Internet Options / Advanced tab. At the bottom of that tab’s screen, you’ll see this section:

image

Do a few Hail Marys or whatever it is that you do in these cases, and then push the Reset button anyway. You’ll get this rather intimidating dialog:

SNAGHTML7cfad38

Just to that no one can accuse me of trashing their machine (though *someone* probably will anyway), here’s the warning behind that “How does resetting affect my computer?” link:

Reset Internet Explorer 9 settings

You can reset Windows Internet Explorer 9 settings to return them to the state they were in when Internet Explorer was first installed on your computer.

Warning
  • Resetting Internet Explorer is not reversible. After a reset, all previous settings are lost and can’t be recovered. Rather than resetting everything, you might want to reset specific settings in the Internet Options dialog box or delete your webpage history.

I figured I was going to go “all in” and I checked the “Delete personal settings” box as well, then clicked Reset once more.

After I recovered from the loud boom and the smoke cleared, I was able to see that all of the steps had completed successfully.

SNAGHTML7d46205

Not only that, but I caught a whiff of that new software smell. IE9 was new again!

My original problem with downloads is fixed, and I swear that IE is running better now. Yes, I have some settings I’ll need to fix, but I’m thinking it was worth it.

SharePointFest Denver Follow Up

SharePointFest Denver 2012Well, I’m back from SharePointFest Denver - for the record, red eye flights suck – and I want to thank the SharePointFest team for a job well done. It was a fun conference, as it was last year, and a great excuse for me to spend a few days in advance with my two brothers and their families. As always it’s great to catch up with SharePointilist friends of old and to meet new ones.

SharePointFest Chicago 2012I’m looking forward to SharePointFest Chicago in September. In Chicago, Kyle Schaeffer (@kyleschaeffer) and I will be reprising the workshop we did earlier this year at the SharePoint Conference .ORG called SharePoint Design Essentials. Kyle is a design and branding superstar and I’m honored to share the podium with him. I’ll also be doing the same two regular sessions I did in Denver: Flying in the Cloud: New Ways to Develop for SharePoint and SharePoint Solutions with SPServices. Maybe better the second time?

I want to thank everyone who came to my two half-day workshops and two regular sessions at SharePointFest Denver this week. I hope you all enjoyed the sessions, and feel free to follow up with me if you have any questions about what we covered.

I’ve posted the slides for A jQuery Primer for SharePoint and Flying in the Cloud: New Ways to Develop for SharePoint on SlideShare. Richard Harbridge (@rharbridge) convinced me of the merits of a SlideShare subscription and in a cool twist, the SharePointfest Denver – A jQuery Primer for SharePoint slides were featured on the SlideShare home page yesterday and today. Now that’s a nice welcome to a Web site subscription.

'SharePointfest Denver - A jQuery Primer for SharePoint' is featured on our homepage. http://t.co/kC4CooXH
@slideshare
SlideShare

For those of you who’d like to view the slides right here, they are embedded below.

There are two WSPs which contain the demo sites I used across the sessions. Both WSPs are contained in this ZIP file: SharePointFest Denver 2012. Some people have issues when they try to instantiate solutions like this in their environment, most often due to an activated features mismatch. Let me know if you have problems, and perhaps we can work through them.

Enhanced by Zemanta

From Annoyance to Harmonizer: Cloud Computing’s Maturity Curve

There’s an interesting article over on Forbes.com today from Joe McKendrick called From Annoyance to Harmonizer: Cloud Computing’s Maturity Curve.

Those who know me would probably say that I’m no shrinking violet in my commenting on articles on the Web, but I read a lot of articles that don’t provoke me to comment. This one did.

The article talks about, in part, the impact on IT departments of cloud computing efforts initiated by the business without IT’s support or buy-in.

Here’s what I had to say about that.

With the majority of my consulting clients “the IT department workarounds — to get applications up and running faster, or to get around IT departments” is a serious trend. IT departments can’t complain about those end runs unless they can provide viable alternatives. If IT doesn’t support the business sufficiently, the business goes elsewhere.

I work almost exclusively with Microsoft SharePoint. Even where SharePoint is rolled out as a corporate platform for collaboration, the Intranet, whatever, IT often sidles away once the servers are up and kicking. This can be because they don’t really have the skills to work collaboratively with their user base or simply because the budget isn’t there to do much more. Whatever the reason may be, if the platform isn’t supported and enhanced over time to meet new business needs, the users may turn to something like Google Docs instead. This makes the initial investment a waste and further degrades the IT reputation.

Get out of the server rooms and sit with your business users. Find out what they really need to get their work done. Don’t write huge specs; work collaboratively with them to build what will help them get their work done. Watch for patterns across different user bases and develop generalized solutions that can be tailored to meet specific needs. Be proactive. Lead.

I recommend the article for its interesting statistics as well.

When it comes to SharePoint’s maturity curve, you’ll be doing yorself a favor if you check out the SharePoint Maturity Model, invented, built, and maintained by the wonderful Sadie Van Buren (@sadalit).