JQuery Datepicker with text input that doesn’t allow user input

Put in onload script

$("#my_txtbox").attr( 'readOnly' , 'true' );

The following code won’t let the user type new characters, but will allow them to delete characters:

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

Can also do this but it will will render the form useless to those who have JavaScript disabled:

<input type="text" readonly="true" />

Remove Spaces from a text field

Any spaces entered by the user will be removed when they click anywhere outside the text field.

Add the following code to the head:

function removeSpaces(string) {
 return string.split(' ').join('');

Use the following code for the text field:

<input type="text" onblur="this.value=removeSpaces(this.value);">
<input type="button" value="Click">

Check first(or any) character of a string in javascript




Parameter Description
start Required. The position where to start the extraction. First character is at index 0
end Optional. The position (up to, but not including) where to end the extraction. If omitted, it extracts the rest of the string



     var firstChar = myString.substring(0,1);
     if (firstChar != 'G' && firstChar != 'B') {
              Do Something;

Example with case sensitivity:

if (policyNo ==''){
              policyNumber = policyNum.toLowerCase();
              policyNumber= policyNo.toLowerCase();
          alert('policy number before: '+policyNumber);
          var firstChar = policyNumber.substring(0,1);          
          if (firstChar != 'g' && firstChar != 'b') {
              var p = pad(policyNumber, '0000000000');
              policyNumber = p;

JavaScript function to pad a string to get to a determined length.

A function that takes a value and pads it to a given length.

var pad=function(num,field){
    var n = '' + num;
    var w = n.length;
    var l = field.length;
    var pad = w < l ? l-w : 0;
    return field.substr(0,pad) + n;

Results in:


How to: Visualforce Javascript Remoting

If you have done some Salesforce development, you have probably seen or heard of Visualforce Javascript Remoting.  If you haven’t heard of it, it is basically a way within Salesforce to call methods in a class via javascript.

You might be thinking to yourself “Hey, that sounds cool but why would I want to do that?”.  Well, there are a number of reasons.

No forms!
First of all, you are not required to use forms, Apex or otherwise.  This eliminates the need to keep viewstate.  By not keeping viewstate you are not passing or storing all of that data for the controller calls.  Your calls to the controller have a small footprint and become very efficient.  This is especially useful in mobile web development.

This leads to the second reason why you would want to use remoting, speed.  It is by far the fastest way of calling controller code and passing data to and from the page.  You are able to ensure that you are only passing the data you need each time you make a call.  Salesforce also bundles multiple subsequent calls by default with no work by you which also improves speed.

The third reason why you might want to use remoting is because it is asynchronous.  Since it is asynchronous, you can load the initial page and data for the page and after that is all loaded you can start to lazy load data for the page that might not be prevalent for the inital load.  You can even use this method to start loading data for pages the user hasn’t even hit yet.  An example of this would be to load the first page and if there is a second page that you know if visited often you can load that in the background so if the user does switch to that second page all the data will be available which leads to an awesome user experience.

You are probably thinking, “This sounds awesome!  Why don’t I use this for everything?”.  Well, while it is pretty awesome it does take extra time to develop for and you also need to change how you develop and thinking about the flow of the page.  Since you aren’t using forms and there is no viewstate associated with it, you have to manage the state of the page on the client side.  On the other hand, there is nothing that says you can’t do a hybrid of using remoting with the standard MVC design paradigm with forms.  These are all things you need to consider when determining your design.  Remoting is just another tool in your belt.

So how do you use remoting?  It is actually pretty easy to do.  The definition for making a call in JS to a class is:


That looks simple enough but what does it look like in practice?  Here you go:

    function(results, event) {
        if(event.type === 'exception'){
        }else if(event.status){
            $j.each(results, function(i, result){

This code is assuming I have a class called MyController and MyController has a method on it called methodOnMyController that takes two parameters.  If you have done ajax calls in jQuery this will look very familiar.  After the parameters, you have your callback function.  The callback function takes the results of the method call as well as the event object which has information on how the remoting call went.  If there is an exception it tells you so you can handle that in your JS otherwise you simply handle the results from the method call.

That’s all there is to it.  You can do what you will with the data depending on what you are trying to accomplish.  The nice thing about it is you can return standard and custom object as well as your own wrapper classes and reference the data just the same.

To complete the code on the controller, simply declare a public method in a public class as a remote action and make it static like so:

public static List<MyObject> methodOnMyController(String firstParemeter, String secondParameter){
    return new List<MyObject>();


I hope this helps you will understanding remoting.  If you have any questions feel free to leave them in the comments below.  If you would like to learn more about JS remoting check out Salesforce’s docs.

Originally from :  Craig Isakson-Sundog Blog

jQuery Datepicker



<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>jQuery UI Datepicker</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  $(function() {
    $( "#datepicker" ).datepicker();
<p>Date: <input type="text" id="datepicker"></p>

5 Column Layout in Bootstrap 3

Create a new default column definition:

.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;

Define width in case of different media queries:

.col-xs-15 {
    width: 20%;
    float: left;
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;

Create div with 5 column layout on medium screens and four on smaller ones:

<div class="row">
    <div class="col-md-15 col-sm-3">