Archive for the ‘jQuery’ Category

JavaScript – Object Oriented Programming

December 2, 2013 Leave a comment

The use of JavaScript is increasing heavily. It’s the right time to learn about writing good, clean and efficient JavaScript code rather than simply writing in an unorganized fashion. In this post I am trying to bring up some of the concepts we should be aware while using JavaScript.

JavaScript is a prototype based language. Its a style of object-oriented programming in which classes are not present.

In JavaScript defining a class is equal to creating a function. For example

function Employee() {

To create instances of this we use

var e = new Employee();

Creating an object will executes the statements inside the function, thus it acts as a constructor. For example

function Employee() {
    alert("I am an employee");
var e1 = new Employee();

This will bring up the alert window

Properties & Methods

JavaScript object properties are varibales declared inside the class. We can refer properties inside the class using the this keyword (similar to C#).


function Employee(name) { = name;
var e1 = new Employee("Amal Hashim");
alert("I am an employee with name = " +;


Methods are defined as functions, and they are invoked similar to how properties are used


function Employee(name) { = name;
Employee.prototype.getName = function() {
var e1 = new Employee("Amal Hashim");


Inheritance & Encapsulation

JavaScript supports only single class inheritance. Inheritance enables the creation of parent child relationships.


//Define Parent Class
function Employee(name) { = name;
Employee.prototype.whoAmI = function() {
	alert("Employee Object");
Employee.prototype.getName = function() {

//Define Child Class
function Manager() {
	//Invoke parent constructor;
//Inheritance - Manager inherits Employee
Manager.prototype = new Employee();
Manager.prototype.constructor = Manager;
//Over ride whoAmI
Manager.prototype.whoAmI = function() {
	alert("Manager Object");

var manager = new Manager();
manager.whoAmI(); = "Amal Hashim";
alert(manager instanceof Manager);
alert(manager instanceof Employee);


In the above example, Manager object doesn’t need to define getName method. Its encapsulated in the parent Employee class.

Categories: jQuery Tags: ,

SharePoint 2013 – Document Library – Download a copy button

November 29, 2013 8 comments

I found a question in technet forum, the user was asking on How to add “DOWNLOAD A COPY” button in document library COLUMN?

And to answer this question, I did a bit of research and came up with below solution

First step is to add a new column to the document library. I named it as “Download a copy”


Ensure to add the new column as the last column in the View.

Now go back to the view, then edit page. Now add a new Script Editor webpart and paste below code

<script type="text/javascript">
function runAfterEverythingElse(){
var elementArray = document.getElementsByClassName("ms-vb-lastCell");
var idArray = document.getElementsByClassName("ms-listlink");
for(var i = 0; i < elementArray.length; i++)
	elementArray[i].innerHTML = '<a unselectable="on" href="javascript:;" onclick="\''+ idArray[i]['href'] + '\')" class="ms-cui-ctl-large " aria-describedby="Ribbon.Documents.Copies.Download_ToolTip" mscui:controltype="Button" role="button" id="Ribbon.Documents.Copies.Download-Large"><span unselectable="on" class="ms-cui-ctl-largeIconContainer"><span unselectable="on" class=" ms-cui-img-32by32 ms-cui-img-cont-float"><img unselectable="on" alt="" src="/_layouts/15/1033/images/formatmap32x32.png?rev=31" style="top: -409px; left: -35px;"></span></span><span unselectable="on" class="ms-cui-ctl-largelabel">Download a<br>Copy</span></a>';

Click Ok, and stop editing the page. Final result


SharePoint 2013 – Directly open list item edit form

November 21, 2013 Leave a comment

Sometimes it will become a difficult job to edit a list item (not for everyone :D). You should first open the context menu, and then click edit item or you can open the item in view mode and then click edit item.

Using jQuery we can easily change this behavior by directly opening edit form instead of view. Below is a simple snippet which can achieve this. Just add a script editor webpart and paste below code

<script type="text/javascript" src=""></script>
<script type="text/javascript">
  // Change all display form links to edit form links
  $('.ms-vb a[href*="listform.aspx"]').each(function(){
      var url = $(this).attr('href');
      url = url.replace("PageType=4", "PageType=6");
      $(this).attr('href', url);

JavaScript – Escaping quotes

While passing data through AJAX post we might want to escape quote characters. One option is to escape using JavaScript method, but this will encode the entire string. The simplest approach is using the replace method.

     data.replace(/(['"])/g, "\\$1")
Categories: jQuery, Misc Tags: ,

Javascript – Refresh or Reload Page

One line code that can refresh the page

Categories: jQuery Tags: ,

Javascript – Global Error Handler

March 8, 2013 1 comment
window.onerror = function(error, url, line) {
    var errorDetails = "Error Description = " + error;
    errorDetails += "\nUrl = " + url;
    errorDetails += "\nLine Number = " + line;

Categories: jQuery Tags: ,

JavaScript – Invoke function based on value in string variable

February 7, 2013 Leave a comment

While creating/playing with dynamic forms I got into a situation where in need to invoke a JavaScript function. The function name is stored in a variable.


var functiontocall = "HelloWorld";
var fn = window[functiontocall];
if(typeof fn !== 'function')
var retvalue = fn.apply(window, ["Amal Hashim"]);

JavaScript Function

     function HelloWorld(name) {
          return "Hello " + name;
Categories: jQuery

Javascript Detect SharePoint Page In Edit Mode

December 23, 2012 3 comments

In this post I am going to explain different ways to detect SharePoint page mode through client side scripts

If the page is publishing then we can query following  JavaScript variable to find the Page status

if(g_disableCheckoutInEditMode == true) {
   alert('Page is in edit mode');
else {
   alert('Page is in display mode');

Another options for publishing page

//Add following in master page

<script type="text/javascript">
    var IsEditMode = false;

<PublishingWebControls:EditModePanel runat="server" id="EditModePanelToFindEditMode">
     <script type="text/javascript">
        IsEditMode = true;

//Now through script you can use the variable IsEditMode

We can also query the PageState object which has property ViewModeIsEdit. The problem with this is because the object gets initialized only after loading sp.ribbon.js.

Another option

var IsEditMode = 
if (IsEditMode == "1") { // page is in edit mode } 
else { // page is in browse mode }

For WIKI pages

var IsEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value; 
if (IsEditMode == "Edit") { 
// wiki page is in edit mode 
} else { // wiki page is not in edit mode }
Categories: jQuery, SharePoint 2010

Javascript Error Handling

November 20, 2012 Leave a comment

How to handle exceptions in javascripts? Here is the answer…

Using Try..Catch..Finally

try {
  //Code block
   //Handle exception
   //Finally Block

Using onerror..Generic exception handler

window.onerror = function(error, fileName, lineNumber) {
    //Handle exception
Categories: jQuery Tags: