Simple Trick for making an existing web part async

This is one of my favorite stupid SharePoint tricks.

If you have a situation where there is a web part (or any web page component) that is slow, and it is slowing the page render time for your page this is a handy trick.

Here is the summary:

1. Create another web part page and add the slow loading web part.
2. Look at the source code for the render page and get the control id of the div tag for the web part (the skewer click in the IE8 dev toolbar or something similar is an easy way to do this).
3. Back on the page where you originally wanted the web part, add a content editor web part
4. Put the following script in the source of the web part:

var ctId="ctl00_"; //Replace this with your control ID from step 2
var sourceURL="http://YourServer/somesite/PageThatHasTheSlowWebPart.aspx";
var outputId="MakeshiftAsyncWebPart";

_spBodyOnLoadFunctionNames.push("renderASlowWebPartAsynchronously"); 

function renderASlowWebPartAsynchronously()
{
      loader(sourceURL);
}

function renderOutput(output)
{
document.getElementById(outputId).innerHTML=output;
      
}

function getElementByClassname(className)
{
      var allItems = document.all;
      for (var i=0; i < allItems.length; i++) 
      {
            if (allItems[i].className == className) 
            {
                  return allItems[i];
            }
      }
      return null;
}

function getElementByClassnameFromString(className,str)
{
      var myTempDiv=document.createElement("div");
      myTempDiv.innerHTML=str;
      
      var allItems = myTempDiv.all;
      for (var i=0; i < allItems.length; i++) 
      {
            if (allItems[i].className == className) 
            {
                  return allItems[i];
            }
      }
      return null;
}

function getElementByIDFromString(myID,str)
{
      var myTempDiv=document.createElement("div");
      myTempDiv.innerHTML=str;
      
      var allItems = myTempDiv.all;
      for (var i=0; i < allItems.length; i++) 
      {
            if (allItems[i].id == myID) 
            {
                  return allItems[i];
            }
      }
      
      return null;
}

function loader(url) {
  
  if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    request = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (request != undefined) 
  {
    request.onreadystatechange = function() {asyncHandler(url);};
    request.open("GET", url, true);
    request.send("");
  }
}  

function asyncHandler(url) 
{
  if (request.readyState == 4) 
  { 
    if (request.status == 200) 
    {
      var output=getElementByIDFromString(ctId,request.responseText).innerHTML;
      if (output==null)
      {
            /* 
            //Optional:  
            output="No results";
            renderOutput(output);
            */
      }
      else
            renderOutput(output);
    } 
    else 
    {
      //Optional
      //document.getElementById('dOutput').innerHTML=" Error: "+ request.status + "\n" +request.statusText;
    }
  }
}

<div id=”MakeshiftAsyncWebPart”></div>

You can even reference an Animated GIF in SharePoint 2007 for AJAX progress indicators so that users know the web part is loading.

Keep in mind that users won’t get the security prompt for cross site scripting if the two pages are on the same server.

Of course: This code is provided as an example. Use at your own risk. No warranties.