Plugging-in jQuery for smooth scripting & less efforts

by Kunal Phadnis, 7th Jan, 2015.

Scripting is a pleasure when it comes to web development… Yeah! If you write it in an optimized manner then it is always the best.

jQuery is an awesome framework and commonly used library wrapped over JavaScript which indeed is simple to use. It adds a lot of interactivity to your website making it a breeze. Many a times it happens that we repeat the same script all over in our web app. When we need to make changes, they are expected to be done all over the app wherever the code is duplicate which indeed is a headache :-(.

But what if you can’t just find the right plugin to suit your needs? Or what if you’re just looking to keep your project manageable by combining some oft-used functionality into one nice, neat package? The solution might be to roll out your own plugin to meet exactly your needs. Writing your own jQuery plugin isn’t as hard as it might seem at first!

Validations

We have come up with some commonly used basic functions which can be generalized like input fields accepting only:

Numbers – NumberPicker
Decimals – DecimalPicker
Names/Usernames – NamePicker
Email – EmailPicker
URL – UrlPicker
Password – PasswordPicker

For example,

 $("#decimal-input").decimalPicker({

  precision: 2,

  required: true

  });

This snippet will ensure that this field is mandatory and that its decimal point precision is set to 2.
Or say,

 $("#age-input").numberPicker({

  maxChar: 2,

  text: "Enter Age Here",

  required: true 

  });

This usage will always require some value in it with allowing maximum of 2 characters. The ‘text’ parameter tells the helper to set the placeholder attribute to the given value.

We have simplified the plugin-usages like DatePicker provided by jQueryUI. Now you might think of HTML5 which provides all these tools built-in into DOM (Document Object Model) attributes. But what about people who aren’t using HTML5 in their projects? Or what about people who need to have full control on their methods and functionalities? Hence, we made it simple to use so that even a person new to JavaScript can make a good use of it.

Let’s see an HTML5 element usage like,

 <input type="number" id="number-input" />

  <input type="range" id="range-input" />

  <input type="email" id="email-input" />

These elements give us the above implementations, however, we cannot keep any control over it. Our custom plugins will give full control of our usage so that you can customize it as per our specifications.

AJAX Control

Another control which everyone is familiar with is Ajax calls. Sometimes it happens that developers are habituated to write the same script again and again which creates a mess.

For instance,

 $.ajax({
  type: '
  
  ',

  url: '
  
  ',

  dataType: 'application/json',

  contentType: 'json',

  success: function(dtRet) {

  },

  error: function(err, stat) {

  }

  });

This is a standard format we generally see in a web application where we need to repeat the above code many times.

We thought of centralizing this Ajax call and wrapped the standard jQuery Ajax call with our custom one in which you can centrally manage all the Ajax error execution flows, Ajax pre-loaders and any other extensions a developer might think of adding to it. Using selectors to directly put HTML into the selector’s DOM in success callback is also a very useful functionality to use.

The above code gets simplified as below,

 $.ajaxPost('
  
  ', { data: '
  
  ' }, function() {

  //success

  }, function() {

  //error

  });

Modal Dialogs

Also, when it comes to Modal dialogs which are commonly used under Bootstrap, writing loads of HTML on every page for a single dialog and repeating it for multiple dialogs is just a big deal of copy paste work.

For example, HTML code snippet for a standard Modal dialog in Bootstrap looks like,

 <div id="dialog-1" class="modal fade hide">

  <div class="modal-dialog">

  <div class="modal-content">

  <div class="modal-header">

  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

  <h4 id="dialog-1-title" class="modal-title"></h4>

  </div>

  <div id="dialog-1-body" class="modal-body"></div>

  <div class="modal-footer">

  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

  </div>

  </div>

  </div>

  </div>

We've also devised a solution for this, where a developer can just use the Modal dialog plugin to configure how the dialog should work with may be multiple buttons on the footer with their different events, their texts, their dimensions, which URL to call to put in HTML into the content of the dialog, what header do you want for the dialog and more. This makes the developer feel less burdened to write lengthy code for a single dialog and repeat the same for multiple ones.

The above is simplified using plugin in this manner,

<div id="dialog-1"></div>

By simply using the plugin helper as below,

 $("#dialog-1").saviantModal({

  title: "default-modal-1",

  buttons: {

  Button1:

  {

  type: "button",

  name: "Cancel",

  cssClass: "btn btn-default",

  event: function () {

  //some working stuff

  }

  },

  Button2: {

  type: "button",

  cssClass: "btn btn-primary",

  name: "Save",

  event: function () {

  //some working stuff

  }

  }

  },

  shownEvent: function () {

  //what you need to do on modal open event

  }

  });

We’ve kept room for many new things to come in like developing an API for general usage of animations & jQuery effects, standard jQuery dialog helper implementation, wrapping some jQuery functions to provide a standard way to use them throughout the app and providing a standard custom library for a centralized usage.

And yet… we’ve kept it un-minified which makes it so simple to understand that you can modify it at your own will and add your own customs to it so that we can together enhance it!

Plugging-in jQuery for smooth scripting & less efforts