Z & his Startup

In my previous post I showed how to access a Sharepoint List using Linq , this time I want to show you another way using jQuery.

Why jQuery? Well, the background is this: the project requires a Currency Converter Web Part that behaves like the Windows 7 Currency Converter Gadget.

If you want to see that behaviour, search for Sidebar in your Windows 7 Start Menu and drag-n-drop the Currency Converter gadget.

So basically my web part does this:

1. Load all the Currencies Name and FromUSD value from a sharepoint list that’s populated with daily currency exchange update.

2. Do all the calculation on client-side, that means _no_ ASP.NET postback when the drop-down list of currency name is changed.

3. As soon as the user enters a numeric value in the textbox (onKeyUp) , automatically update all the other currency textboxes.

So this is the reason I need to load a list using jQuery instead of Linq. And here are the steps to do just that:

1. Download the MIT-Licensed (ok for commercial) jQuery Sharepoint Library http://spservices.codeplex.com/

2. In your JavaScript script file, write the following code:

//------------------------------------------
// Populating Currency ListBoxes via jQuery
//------------------------------------------
$(document).ready(function () {
$().SPServices({
  operation: "GetListItems",
  async: false,
  listName: "Currency",
  webURL: "http://localhost",
  CAMLViewFields: "<ViewFields><FieldRef Name='Name' /><FieldRef Name='FromUSD' /></ViewFields>",
  completefunc: function (xData, Status) {
    $(xData.responseXML).find("[nodeName=z:row]").each(function () {
      $("[id$='_firstCurrencyList']").append('<option value="' + $(this).attr('ows_FromUSD') + '">' + $(this).attr('ows_Name') + '</option>');
      $("[id$='_secondCurrencyList']").append('<option value="' + $(this).attr('ows_FromUSD') + '">' + $(this).attr('ows_Name') + '</option>');
      $("[id$='_thirdCurrencyList']").append('<option value="' + $(this).attr('ows_FromUSD') + '">' + $(this).attr('ows_Name') + '</option>');
    });
    var count = parseInt($(this).attr("ItemCount"));
    if (count == 1) {
      $("[id$='_firstCurrencyList'] option:eq(0)").attr('selected', 'selected');
      $("[id$='_secondCurrencyList'] option:eq(0)").attr('selected', 'selected');
      $("[id$='_thirdCurrencyList'] option:eq(0)").attr('selected', 'selected');
    }
    else if (count == 2) {
      $("[id$='_firstCurrencyList'] option:eq(0)").attr('selected', 'selected');
      $("[id$='_secondCurrencyList'] option:eq(1)").attr('selected', 'selected');
      $("[id$='_thirdCurrencyList'] option:eq(0)").attr('selected', 'selected');
    }
    else if (count >= 3) {
      $("[id$='_firstCurrencyList'] option:eq(0)").attr('selected', 'selected');
      $("[id$='_secondCurrencyList'] option:eq(1)").attr('selected', 'selected');
      $("[id$='_thirdCurrencyList'] option:eq(2)").attr('selected', 'selected');
    }
    // debug code
    //var out = $().SPServices.SPDebugXMLHttpResult({
    //    node: xData.responseXML
    //});
    //$(debugJQuerySP).html("").append("<b>This  is the output from the GetList operation:</b>" + out);
  }
});
});

So this assumes you have 3 <asp:DropDownList> with ID firstCurrencyList, secondCurrencyList and thirdCurrencyList.

And this post highlights another point: How to select ASP.NET Control using jQuery –> basically use $("[id$='_idNameDeclaredInAspNet'] selector.

And for jQuery performance reason, if <asp:DropDownList> can be replaced with simpler <select> tags, then use <select id=”firstCurrencyList”> instead.

Share this post: | | | |