jQuery

Google Feeds API

shehan — Thu, 01 Sep 2011 12:01:00 GMT

I was given with a simple requirement – create an online component that has the ability to pull RSS feeds asynchronously from websites.

I could have written a server control, but that would mean I would need to write the logic to read the xml and parse it. Totally doable, but it was late in the day when the requirement came in and I wasn’t about to slave over Visual Studio to write manage code. OK, so long story short I used the Google Feed API to get the job done.

Assuming you know jQuery the code is pretty straightforward. I haven’t included any styling or any other scripts.

   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   2:  <html xmlns="http://www.w3.org/1999/xhtml">

   3:      <head>

   4:          <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

   5:          <title>Google Feed API Sample</title>

   6:      </head>

   7:      <body >

   8:          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

   9:          <script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>

  10:          <script type="text/javascript">

  11:          /* http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON */

12:

  13:              /*Array to hold the various feeds.*/

  14:              var myfeeds = new Array();

  15:              myfeeds[0] = new Feed("Facebook","https://www.facebook.com/feeds/page.php?id=85647828805&format=rss20",5);

  16:              myfeeds[1] = new Feed("Twitter","https://api.twitter.com/1/statuses/user_timeline/VirtusaCorp.rss",10);

  17:              myfeeds[2] = new Feed("Yahoo","http://feeds.finance.yahoo.com/rss/2.0/headline?s=VRTU&region=US&lang=en-US",2);

  18:              myfeeds[3] = new Feed("Nasdaq","http://articlefeeds.nasdaq.com/nasdaq/symbols?symbol=VRTU",10);

19:

  20:              /* Creates a Feed object */

  21:              /* name - Name of the feed. Will show-up as the button text */

  22:              /* uri - The location of the feed */

  23:              /* count - Number of items to be shown for the feed */

  24:              function Feed(name,uri,count)

  25:              {

  26:                  this.name=name;

  27:                  this.uri=uri;

  28:                  this.count=count;

  29:              }

30:

  31:              google.load("feeds", "1");

32:

  33:              /* Callback function when feed is loaded */

  34:              function feedLoaded(result)

  35:              {

  36:                  if (!result.error)

  37:                  {

  38:                      $("div#content").empty();

  39:                      $("div#content").append("<ul></ul>");

  40:                      /* iterates through the results and renders them on the page */

  41:                      for (var i = 0; i < result.feed.entries.length; i++)

  42:                      {

  43:                          var entry = result.feed.entries[i];

  44:                          if (entry.title != '')

  45:                              $("div#content ul").append("<li><a href='"+entry.link+"' target='_blank'>"+entry.title+"</a></li>");

  46:                      }

  47:                  }

  48:              }

49:

  50:              /* Click event for the feed buttons. Calls the Google API to load the feeds */

  51:              function LoadFeed(uri,count)

  52:              {

  53:                  $("div#content").empty();

  54:                  $("div#content").append("<p>Loading...</p>");

  55:                  var feed = new google.feeds.Feed(uri);

  56:                  feed.setNumEntries(count);

  57:                  feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);

  58:                  feed.load(feedLoaded);

  59:              }

60:

  61:              /* Dynamically creates and renders the feed buttons based on the contents of the myfeeds array  */

  62:              function RenderButtons()

  63:              {

  64:                  for (var i in myfeeds)

  65:                  {

  66:                      var markup = "<button type='button' onclick=\"javascript:LoadFeed('"+myfeeds[i].uri+"',"+myfeeds[i].count+");\">"+myfeeds[i].name+"</button>"

  67:                      $("div#buttons").append(markup);

  68:                  }

  69:              }

70:

  71:          </script>

72:

  73:          <div id="buttons"></div>

  74:          <div id="content"></div>

75:

  76:          <script>

  77:              RenderButtons();

  78:          </script>

  79:      </body>

  80:  </html>

Make sure you obtain an API key that is specific to your site to use in line #9. More info here.

All you need to do is update the myfeeds array with the list of your RSS feeds and the script will do the rest.

Have fun!

p.s. in the above sample, you might notice that I have all the script code within the <body> tag. I purposely did this so I would only have to copy the code within it an paste into a CEWP if I needed to use it in SharePoint.

Technorati Tags: jQuery google cdn rss feeds api javascript

Latest jQuery library

shehan — Wed, 24 Aug 2011 07:29:00 GMT

Use the following link to find out the latest version of the jQuery API library hosted on Google’s CDN: http://code.google.com/apis/libraries/devguide.html#jquery

Technorati Tags: jquery google cdn

Rate pictures using a Survey and jQuery

shehan — Sat, 17 Jul 2010 01:27:00 GMT

Here’s the scenario:

You have a handful of images which you need people to rate. Unlike SharePoint 2010, 2007 does not offer a rating control so you’ll either have to purchase a commercial product or install the open source alternative or even develop something custom. All these are possible if the server ‘belongs’ to your team/department. But (like me) if the SharePoint farm is owned by some other team and is utilized by the whole company for day-to-day activates then admins would frown on such requests.

Here how you do it with any code or installs (you don't even need designer):

Download the jQuery library and store it on your site.
Create a normal SharePoint Survey
For the ‘Question’ textbox type something like ‘Please rate the below pictures’
Next, select ‘Rating Scale (a matrix of choices or a Likert scale)’ as the type of answer
In the subquestion textbox type the url’s of all the pictures you want to be shown
The ‘Number Range’ is the rating scale. Adjust it to suit your needs.
Remove the text in ‘Range Text’
Uncheck ‘Show N/A option’
Click Finish

The Survey is now created. Next navigate to the ‘Respond to this Survey’ screen

Append the url with the following: &PageView=Shared&ToolPaneView=2
This will cause the ‘Add Web Part’ tool pane to show up.
Add a CEWP to the page
Go to the webpart properties and click the source button
Add the following:

// make sure this points to the correct place where the jQuery file is stored on the server
<script type="text/javascript" src="http://serverX/documents/jquery-1.4.2.min.js"></script>

<script>
$(document).ready(function() {
    $("th.ms-gridT1").each(function(index) {  
   var imgHtml = "<div><img width='200'  src='" + $(this).text() +"'/>";

  $(this).html(imgHtml);
  });


});
</script>

you should be all set now…

Good Luck!

Technorati Tags: SharePoint,Rating,Survey,JQuery

jQuery Slideshow

shehan — Mon, 01 Mar 2010 19:32:09 GMT

Here are steps on setting up a slideshow on your SharePoint site really fast using a Content Editor WebPart (CEWP), jQuery and a Picture Library.

The jQuery for the slide show makes use of the Cycle plug-in located at http://jquery.malsup.com/cycle/

There are plenty of demos on the site along with instructions on using the API.

Here are the steps to implement the slideshow on a SharePoint site:

Download the jQuery library and the Cycle plug-in and upload them to a document library
Create a picture library that will hold the images
Add a CEWP to you page.
Go to the web parts property pane and add the following to the source
Place the below code in the source window:

<IMG ID="slideshowPicturePlaceholder" src="/_layouts/images/GEARS_AN.GIF" style="display:none"/>
<div id="slideshowContentArea" style="display:none">&nbsp;</div>
// Update the below urls to point to the location where the jQuery files are stored on your site
<script type="text/javascript" src="http://intranet/InternalDocuments/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://intranet/InternalDocuments/jquery.cycle.all.2.72.js"></script>

<script>
 function GetAllImages() 
{
$("#slideshowPicturePlaceholder").css("display", "block");    
var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'><soapenv:Body><GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>";
    //The name of the image library is called 'SlideShow'. Replace the name bewlo with the name of your image library
 soapEnv += "<listName>SlideShow</listName>";
    soapEnv += "<query><Query><OrderBy Override='TRUE'><FieldRef Name='Created' Ascending='FALSE' /></OrderBy></Query></query>";
    soapEnv += "<viewFields><ViewFields><FieldRef Name='Title'/><FieldRef Name='ows_FileLeafRef'/></ViewFields></viewFields><rowLimit></rowLimit>";
    soapEnv += "</GetListItems></soapenv:Body></soapenv:Envelope>";

var port = window.location.port;
if (port.length <= 0)
 port = "";
else
 port = ":"+port;
var webservice = window.location.protocol+"//"+window.location.hostname+port+L_Menu_BaseUrl+"/_vti_bin/lists.asmx";

    $.ajax({
        url: webservice,
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        complete: processQueryResults,
        contentType: "text/xml; charset=utf-8",
         error: function(xhr) {
        alert('Error!  Status = ' + xhr.status);}
    });
}

function processQueryResults(xData, status)
{
var port = window.location.port;
if (port.length <= 0)
 port = "";
else
 port = ":"+port;
//Change the below to point to your image library
var imageURL = window.location.protocol+"//"+window.location.hostname+port+L_Menu_BaseUrl+"/SlideShow/";
var itemURL = window.location.protocol+"//"+window.location.hostname+port+L_Menu_BaseUrl+"/SlideShow/Forms/DispForm.aspx?ID=";
  
$("#slideshowContentArea").html("")
$(xData.responseXML).find("z\\:row").each(function() {
        var title = $(this).attr("ows_Title");
  var imageLink = imageURL+$(this).attr("ows_FileLeafRef").substring($(this).attr("ows_FileLeafRef").indexOf('#')+1);
  var itemLink = itemURL+$(this).attr("ows_ID");
  var liHtml = "<div><a href='"+itemLink+"' target='_blank' border='0'><img width='200' height='200'  src='" + imageLink +"'/></a><p align='center'>"+ title + "</p></div>";
        $("#slideshowContentArea").append(liHtml);
    });
  
$("#slideshowPicturePlaceholder").css("display", "none"); 
$("#slideshowContentArea").css("display", "block");

$('#slideshowContentArea').cycle({
    fx:     'scrollDown',
    timeout: 6000,
    delay:  -3000
});
}

GetAllImages();
</script>

The above code will asynchronously fetch the images from the image library and then call the slideshow method.

Pretty simple, isn’t it? Have Fun!!!

Technorati Tags: jQuery,SharePoint,CEWP,Slideshow

Pre-populate a textbox using jQuery

shehan — Thu, 25 Feb 2010 13:53:25 GMT

Here’s the scenario:
I have a form which contains a textbox. This textbox should be populated with a query string value. Users should not be able to edit the value of the textbox while adding the item.

Solution:
The above can be achieved using a Content Editor Web Part (CEWP) and jQuery.

Steps:
1.    Append the NewForm.aspx url with the following: &PageView=Shared&ToolPaneView=2
2.    This will cause the ‘Add Web Part’ tool pane to show up.
3.    Add a CEWP to the page.
4.    Go the webparts properties and click the Source button
5.    Add the following:

// Note: replace this url with the url of the jquery library residing on the site!!
<script type="text/javascript" src="http://intranet/InternalDocuments/jquery-1.2.6.min.js"></script>

<script>
// This method retrieves the querystring value. If the querystring is missing it returns null. I’m not the author of the method; found it on the net, can’t remember from where though :)
function getQuerystring(key, default_)
{
if (default_==null) default_="";
key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
var qs = regex.exec(window.location.href);
if(qs == null)
    return 'null'
else
    return qs[1];
}

//Note: The title attribute of my textbox is called ‘Source’. Replace it with the title attribute of the textbox on your form. The query string name is all called ‘Source’, replace as appropriate.
$(document).ready(function() {
    $("input[title$=Source]").val(unescape(getQuerystring('Source','')));
$("input[title$=Source]").attr('readonly','true');

});
</script>

6. Hit the Save button
7. Expand ‘Appearance’ and change ‘Chrome Type’ none. This step is optional.

Technorati Tags: jQuery,CEWP,Query String,SharePoint