Thursday, September 22, 2011

Quickly Testing if JQuery is referenced properly on your page

I have observed a lots of developers quickly test the jQuery or SPServices references by putting a script like and make sure it works:

<script type="text/javascript" language="javascript">

$(document).ready(function() {
alert("jQuery");
alert($().SPServices.SPGetCurrentSite());
});
</script>

While this approach works, it requires to put the actual script on the page, only to be removed later.

There is a better way to check it instead of actually writing script on the page. Thanks to the IE Developer Toolbar. Here are the quick steps:

1. Reference your jQuery (and SPServices) in your page

2. Open your page in Internet Explorer on which IE Developer toolbar is installed. Note that you have IE 8 and above, it comes with it by default

3. Hit F12 to activate it the IE Developer Toolbar

4. Click on Script Tab, the beauty of IE Developer toolbar is that it allows you to run Ad-hoc JavaScript on your page as shown below:

SNAGHTMLaadd08

To make sure jQuery is referenced properly and it is functional on your page is to type a simple jQuery function like alert($(‘title’).html()). If it displays browser title like shown below, you are all set with the wonder of jQuery!

image

Many developers use SPServices library for some wonderful enhancements to the Forms (and for everything else it provides, of course). To test integration of SPServices (and jQuery as well because SPServices depend on jQuery), you may use similar approach but a different function to test and here it is:

alert($().SPServices.SPGetCurrentSite());

Hope this helps!

No comments:

Post a Comment