Richards blog

A little CSS and JQuery can produce a lot of magic in an application. Here is the code. 1. Start with a simple html page. The important item here is to have an 'ID' to navigate to. In my case, I called it 'top'. <html> <head>     <base href="/" />     <title>Test Page</title>     <meta charset="UTF-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>     <link href="css/myStuff.css" rel="stylesheet" /> </head> <body>     <div>         <!-- Start Body Content -->         <div ng-view role="main" id="top"></div>         <!-- End Body Content --> ...

Sometimes you need to add additional logic to a existing buttons 'click' event. The code to add extra logic to the item (without overwriting the existing code) is as follows: 1. Store the elements click event in a variable var clickEvent = $("input[id='MyButtonId']").click 2. Overwrite the existing 'click' function, but execute the saved clicked function. $("input[id='MyButtonId']").on('click', function() {  eval(clickEvent); MyNewSaveMethod();} );

My current project requires me to identify the persona of the logged in user based on their membership of specific SharePoint groups. The first port of call is to extract all the groups for the current user and then work out what they can do. Sounds easy enough. I tried the following: function getUserGroups(success, failure) { var d = $.Deferred(); var ctx =  SP.ClientContext.get_current(); var collGroup = ctx.get_web().get_siteGroups(); ctx.load(collGroup);                 ctx.load(collGroup, 'Include(Users)'); var currentUser = ctx.get_web().get_currentUser(); ctx.load(currentUser); var o = { d: d, collGroup: collGroup, currentUser: currentUser }; function onQuerySucceeded() { this.d.resolve(this.collGroup); this.d.resolve(this.currentUser); var data = { "collGroup": this.collGroup, "currentUser": this.currentUser }; //return success(this.collGroup); ret...

A watermark is always a great way to provider a meaningful hint to a user. Using the JQuery DatePicker control, I wanted to tell the user the expected format of the date.  I added a new class called 'watermarkrequired' to the required html elements to help me identify them. I looked at several option: 1. Using the blur and focus events. $('.watermarkrequired').blur(function () { if ($(this).val().length == 0)    $(this).val(watermark).addClass('watermark'); }).focus(function () { if ($(this).val() == watermark)     $(this).val('').removeClass('watermark'); }).val(watermark).addClass('watermark'); 2. Using the 'AppendText' option of the DatePicker $( ".watermarkrequired" ).datepicker( "option", "appendText", "(yyyy-mm-dd)" ); Finally, I settled on the placeholder attribute $( ".watermarkrequired" ).attr("placeholder", "dd/mm/yyyy");

While working with the JQuery-Upload control, I encountered the following error: unexpected token < The real kicker was the fact that my target file was still being created. The cause of the problem (as I eventually discovered) was my REST contract; my endpoint as configured as follows: [OperationContract] [WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Xml, BodyStyle = WebMessageBodyStyle.WrappedResponse, UriTemplate = "/file/upload")] StatusData Upload(Stream fileData); but my endpoint was returning a JSON response. This resulted in a mismatch, as the expected response format was XML. Changing the contract to Json resolved the problem.

I was recently using the magnificent  jQuery-File-Upload  in a SharePoint 2010 application. I encountered the following scenarios to upload files. 1. Load immediately when the file is selected This is the easiest option and is pretty much OOTB. $('#fileupload').fileupload({                 dataType: 'json',                 headers: {                     Accept: "application/json"                 },                 accept: 'application/json',                 formData: {                     url: "http://mytargetlocation",                     title: "myTitle"                 }, ...

My current project uses jquery extensively to manipulate the data in our SharePoint forms. Fields are hidden and renamed at will. We recently encountered an error that was traced back to a field being changed to nullable in the column definition. The key to finding the problem was 'unhiding' all the fields that our extensive jquery had changed. A very effective little piece of code: $('*').css('display','');