Imagine Think Create Share : JQuery

JQuery and SharePoint 2010 Javascript Conflict

carloshm — Wed, 18 Nov 2009 00:26:00 GMT

Hi,

Yesterday I faced a problem with a PoC I did some months ago. I added a ratings feature to SharePoint 2007 Lists using JQuery.

There were a conflict caused by sp.js and jquery.js using prototype methods. I just followed the recomendations to avoid it.

As I had put everything in my document ready area, I just reassigned JQuery, and use the new variable at that level:

var $j = jQuery;

$j(document).ready(function(){
$j('div.rating').rating();
});

This should remind us to double check our client code in SharePoint 2007 migration scenarios.

Bye!

JQuery Rating in SharePoint Lists

carloshm — Mon, 24 Aug 2009 11:22:00 GMT

Hi,

Last week I was asked to create a sample to include in a SharePoint list rating functionality without any server code. That means only SharePoint Designer and client script.

First was how to store those ratings. Based on experience the obvious solution was to store scores in a separate list, and aggregate afterwards totals. This avoids locks at list level and improve scalability (at the end the aggregation was done from the self user).

So to accomplish this demo, you will need:

Create a list that will have the totals and the items being scored (own columns and score column).
Create a list to store user ratings (item_id, score, user_id)
Create a view in the first list to show the rating control and allow the actions
Modified that view with SharePoint Designer to customized it:
1. Change list to XSLT view (through right click WebPartPages:listViewWebPart in order to get a WebPartPages:DataFormWebPart)
2. Add a new layout column with the values to read (Item Id and aggregated score) and a style to apply (class=”rating”)
3. Add JQuery library, web service library and rating library (to be included in the header adding script reference in additional page head placeholder)
4. Add necessary styles and images to show the functionality
5. Add custom code. You can check Jan posts and rating samples.

Step 4.1

<TD Class="{$IDAEG2RE}">

<DIV ALIGN="RIGHT" class="rating" title="{@ID}_{@Puntos}"></DIV>

</TD>

Step 4.2

This will give us the ability to build the UI through JQuery and associate the code to manage list items. Final result:

Bye!

Use jQuery to make FrontPage requests

carloshm — Thu, 22 Jan 2009 19:56:00 GMT

Hi,

It is interesting to see JQuery growing in the SharePoint space. For sure client APIs will enrich the ecosystem of SharePoint applications.

Some time ago, we needed a way to get some information we were storing in the property bag of our SPWebs. As the process to store the values were automated and the tests done programmatically; we really didn't care about any tool to manually check its values.

But, the day arrived and we needed to review them in preproduction environment. So how will you do it? well there are several ways to do it:

Create a console/web application and implement it through the OM.
Open SharePoint Designer and read them
Install third party solution to do the job

They are all good candidates, but we couldn't neither install nor run a SPD instance or custom code; so I decided to run a web page :)

Here it is when JQuery comes to the rescue:

Download JQuery library from jquery.com and upload it to a (test) document library
Create a webpartpage in the same document library
Drop a content web editor webpart on any webpartzone
Update the contents of html with something similar to the following snippet, where the path starts from the web you want information from:


<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script>
$.ajaxSetup({
        beforeSend: function(xhr) {xhr.setRequestHeader("Accept", "auth/sicily");xhr.setRequestHeader("X-Vermeer-Content-Type", "application/x-www-form-urlencoded");}
}); 
$.post("/site/_vti_bin/_vti_aut/author.dll", { method: "open service"},
  function(data){
    $("#vermeer_content").append(data);
  });
</script>
<div id="vermeer_content">
</div>

you will get something like this:

the sample just sends a request with a method that provides meta-information for a Web site, in this case to our client application.

method=open service:server_extension_version&service_name=/[&effective_protocol_version=version]

References:

open service Method

[MS-FPSE]: FrontPage Server Extensions Remote Protocol Specification