Tag Archives: AJAX

Referencing JavaScript files from a CDN in a CRM 2011 form

UPDATE: I’ve changed the approach in this post because the original code has some side effects where it doesn’t always load correctly, plus I discovered RequireJS.

I’m a big fan of referencing JavaScript files from a Content Delivery Network (CDN) when it makes sense.  Why?  I think the Microsoft Ajax CDN site does a good job of explaining things:

http://www.asp.net/ajaxlibrary/cdn.ashx

“The Microsoft Ajax Content Delivery Network (CDN) hosts popular third party JavaScript libraries such as jQuery and enables you to easily add them to your Web applications. For example, you can start using jQuery which is hosted on this CDN simply by adding a <script> tag to your page that points to ajax.aspnetcdn.com.

By taking advantage of the CDN, you can significantly improve

the performance of your Ajax applications. The contents of the CDN are cached on servers located around the world. In addition, the CDN enables browsers to reuse cached third party JavaScript files for web sites that are located in different domains.”

It may not be obvious at first, but you can do this within your CRM 2011 solutions as well.  CAVEAT: This might fall into the “don’t muck with our DOM” mantra of CRM development…I can’t guarantee this is an officially supported scenario.  But as they say, it works and the risk is pretty low.

Please read my Using RequireJS with CRM 2011 forms post.  Once you have the following web resource code should make sense:

function dkdt_referencejQueryFromCDN() {    

    // Check to see if jQuery is already loaded

    // If not, then load it

    if (typeof jQuery == 'undefined') {

        // NOTE: use https if your CRM deployment is running under https

        require(["http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js", function (m) {

            // Do what you would normally do after the file was loaded

        });                

    }

}

Add require.js followed by the web resource that contains the code above to the form.  Wire up the Form OnLoad to call the function in your web resource:

image

BAM!  You have a just referenced a CDN based JavaScript file.  You now have all the benefits that a CDN reference offers.

@devkeydet

SCREENCAST: JavaScript Intellisense for SharePoint

Follow devkeydet on Twitter

In this screencast, you will learn how to get the most out of JavaScript programming with SharePoint 2010 projects in Visual Studio 2010. You will see how to get JavaScript Intellisense and debugging working for jQuery and the Client Object Model. You’ll also learn about the benefits of using the Microsoft Ajax Content Delivery Network (CDN).

If you don’t pause your video player at the right time, you might miss the location of the SharePoint JavaScript files. Here is a link to the MSDN How to article that talks about those files:

http://msdn.microsoft.com/en-us/library/ff798328.aspx

Direct link:

https://channel9.msdn.com/posts/JavaScript-Intellisense-for-SharePoint

OQuery – A fluent API to build OData url queries sans LINQ

Yesterday, I blogged about a solution to compose OData / WCF Data Service queries using LINQ for situations where LINQ enabled client libraries don’t exist (i.e. JavaScript and Windows Phone 7).

http://blogs.msdn.com/b/devkeydet/archive/2011/02/02/data-services-odata-client-for-windows-phone-7-and-linq.aspx

The post is all about using LINQPad as a tool to write your LINQ queries, then using the feature in LINQPad that gives you the url query translation.  Well today, a new MSDN Code Callery project just popped up called OQuery that offers another approach that doesn’t require using an external tool such as LINQPad:

http://code.msdn.microsoft.com/oquery

Here’s the description from the project page:

“OQuery is a library which gives you a fluent style interface for building OData Url Fragments in javascript or C#.
Neither Javascript or Silverlight for WP7 support LINQ and so this library in those cases.”

What are you waiting for?  Go check it out!

Follow devkeydet on Twitter

The unofficial biography of Microsoft, ASP.NET, Ajax, and jQuery

The Microsoft Ajax strategy has been a bit of a winding road.  Even if you’ve kept up with the evolution, as I have, you might be a little confused.  Today, Scott Guthrie published a blog post announcing that Microsoft’s first submissions to jQuery are official.  There was a corresponding blog post on the jQuery blog.  There’s also an overview video about the Microsoft submissions by Stephen Walther over on Ch.9.  What’s not covered in these posts is the historical evolution that brings us to what was announced today.  You may may be saying to yourself “So what?”  Well, the internet is full of blog posts on the topic.  Depending on the place in time when the blog post or article you come across via your favorite search engine (Bing of course) was published, you might be led astray.  Knowing what’s what and the history helps you from making the mistake of following stale information.  Dave Ward to the rescue!  He wrote up what I think if as the “unofficial biography” on the topic.  Definitely worth a read:

Javascript Libraries and ASP.NET: A Guide to jQuery, AJAX and Microsoft

Does jQuery ship with SharePoint 2010? (and why you should be using an Ajax CDN)

jQuery is one of the most popular javascript libraries used by ASP.NET developers.  In fact, jQuery ships with Visual Studio 2010.  It is in the “Scripts” folder of a new “ASP.NET Web Application” or “ASP.NET MVC 2 Web Application” project template.

Does jQuery ship with SharePoint 2010?  Short answer: No.  I see this asked (publicly and internally) a few times a month.  Long answer: You don’t need it to.  Just use it from the Microsoft Ajax CDN

Assuming you don’t have to build a solution on a closed network with no internet access, then one of the first things you should consider is to replace all the references in your code to local javascript files to CDN references.  By doing so you get the general benefit that all CDNs offer (not just Ajax CDNs) which is that you get directed to a server the is closer to you.  Also, since browsers cache files based on URL, referencing the CDN from all your code means that different web apps use the same version of the javascript file cached in the browser.  Last, but not least, it means less files you have to maintain on your own servers.

Here’s what a script reference to jQuery 1.4.2 looks like when it is local:

<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

Here’s what it looks like when referencing the CDN:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>

So that’s how easy it is to reference jQuery from your SharePoint code.  However, as you can see, this applies way beyond just SharePoint programming.

SCREENCAST: Managing Browser History Using Client Script Without ScriptManager

digg_url = “http://blogs.msdn.com/devkeydet/archive/2010/02/09/screencast-managing-browser-history-using-client-script-without-scriptmanager.aspx&#8221;;digg_title = “SCREENCAST: Managing Browser History Using Client Script Without ScriptManager”;digg_bgcolor = “#555555”;digg_skin = “normal”;http://digg.com/tools/diggthis.jsdigg_url = undefined;digg_title = undefined;digg_bgcolor = undefined;digg_skin = undefined;

ASP.NET Ajax has a great feature that helps make it easy to enable back/forward button and bookmarking support in your Ajax applications.  However, most people think you need ASP.NET WebForms and the ScriptManager control to take advantage of this feature.  Furthermore, most people think you actually have to be using ASP.NET to take advantage of these capabilities.  You don’t.  There’s a walkthrough on MSDN showing how to use this capability purely from client side JavaScript:

Managing Browser History Using Client Script

Basically, the walkthrough shows you how to use Sys.Application.navigate event and the Sys.Application.addHistoryPoint method.  Once you understand these two, it is pretty simple. 

The challenge with MSDN sample is that it leaves the reader to figure out how to accomplish the same thing without ASP.NET WebForms and the ScriptManager control.  In this screencast, I take the guesswork out of it and show you how implement the sample without the ScriptManager as well as doing it using ASP.NET MVC.

Direct link to Ch. 9 post:

https://channel9.msdn.com/posts/keydet/Managing-Browser-History-Using-Client-Script-Without-ScriptManager/

Sample Download:

http://tinyurl.com/devkeydetAjaxHistorySamples

Love jQuery = Love ASP.NET Ajax Library

digg_url = “http://blogs.msdn.com/devkeydet/archive/2010/02/03/love-jquery-love-asp-net-ajax-library.aspx&#8221;;digg_title = “Love jQuery = Love ASP.NET Ajax Library”;digg_bgcolor = “#555555”;digg_skin = “normal”;http://digg.com/tools/diggthis.jsdigg_url = undefined;digg_title = undefined;digg_bgcolor = undefined;digg_skin = undefined;

I’ve been covering ASP.NET AJAX and what used to be called the “Microsoft Ajax Library” ever since the first “Atlas” code drops.  ASP.NET AJAX has always offered Web Forms developers a relatively simple way of Ajax enabling their applications without forcing them to change how they write them through the the core Ajax Server Controls (ScriptManager, Timer, UpdatePanel, UpdateProgress), Ajax Extender Controls, and the 40 additional Server Controls in the ASP.NET AJAX Control Toolkit

What’s been lost in all of this is that all the magic that makes these server-side coding capabilities possible is what used to be called the “Microsoft Ajax Library.”  It’s a cross-browser JavaScript library that has always been available to use WITHOUT ASP.NET.  It’s just a set of JavaScript files that can be used with ANY web development technology.  Unfortunately, many people don’t realize it because there has been so much focus on ASP.NET AJAX (i.e. the integration of this core set of JavaScript libraries with ASP.NET to make AJAX for ASP.NET Web Forms easier).

Ok, on to my point about love and jQuery.  The next release of the ASP.NET Ajax Library has a heavy focus on making client-side Ajax programming easier. I’ve become a big fan of using jQuery and the jQuery syntax for client-side JavaScript.  There is very little overlap between jQuery and the ASP.NET Ajax Library.  They are a very complimentary match.  One of the many new capabilities in the ASP.NET Ajax Library is support for using the jQuery syntax.  There is so much “good stuff” in the next release for client-side Ajax developers.  I strongly encourage you to check out this PDC video:

Microsoft AJAX Library, jQuery, and Microsoft Visual Studio 2010

If you love jQuery, then you are going to love the next ASP.NET Ajax Library release. You not only get jQuery syntax support, but you get a simplified approach to loading scripts, a rich client-side templating / databinding / “interacting with server data” framework, the ability to instantiate the AJAX Control Toolkit controls easily using client-side code (again using the jQuery syntax), and more.

Here are some essential getting started links:

http://ajax.codeplex.com/

http://www.asp.net/ajaxlibrary/

http://www.asp.net/ajaxlibrary/learn.ashx

http://www.asp.net/ajaxlibrary/apps.ashx

The “learn” link above is the best place to start to wrap your head around all the new capabilities in the upcoming release.  If you want to jump to the jQuery integration, take a look at:

http://www.asp.net/ajaxlibrary/HOW%20TO%20Instantiate%20Controls%20using%20jQuery.ashx

http://www.asp.net/ajaxlibrary/HOW%20TO%20Load%20jQuery.ashx

http://www.asp.net/ajaxlibrary/HOW%20TO%20Use%20the%20Calendar%20Control.ashx

Bottom line…  If you are planning on building an Ajax application, whether you are a .NET developer or not, then you really should check out what’s available in the ASP.NET Ajax Library.  Trust me, you are going to like itSmile.