Create cookie using JQuery

This article explains how to create/read/edit/delete cookie in Jquery.

First you need to add jquery cookie plugin. Add jquery.cookie.js javascript file from following url.

https://github.com/carhartl/jquery-cookie/blob/master/src/jquery.cookie.js

Create/Set cookie using JQuery:

Use the following jquery code to create the cookie.

 $.cookie("cookieName", "cookieValue");

Use the following jquery code to create the cookie with expiry.

$.cookie("cookieName", "cookieValue", { expires: 7 });

above cookie expires in 7 days.


Get/Read cookie using JQuery:

Use the following jquery code to read the cookie value.


$.cookie("cookieName");

We just have to use the cookie name to read it's value.


Edit cookie value using JQuery:

Use the following jquery code to edit the cookie value.

$.cookie("existingCookieName", "newValue");

above code updates the existing cookie value.


Delete cookie using JQuery:

Use the following jquery code to delete the cookie

$.removeCookie("cookieNameToBeRemoved");

In this way we can create/get/edit and delete cookies using JQuery.

For more posts on JQuery visit: JQuery


Read more...

Remove auto focus from first input field in sales force

This articles explains how to remove automatic focus from the first input field in sales force.

In Salesforce by default, the focus is set to the first available input field. To remove the focus from that input field you can use any of the following methods.

Method 1 to Remove focus from first input field:

Add a hidden field in your page and set the focus on this hidden field when page is loaded.


<input id="myHiddenField" type="hidden" />

<script type="text/javascript">
  window.onload = setFocus
  function setFocus() {
    document.getElementById("myHiddenField").focus();
  }
</script>

Above code sets the focus on the hidden field so that your first input field (which is visible) will not have the focus now.


Method 2 to Remove focus from first input field:

You can directly remove focus from the first input field using javaScript once the page is fully loaded.

<input id="myFirstInputField" type="text" />

<script type="text/javascript">
  window.onload = setFocus
  function setFocus() {
    document.getElementById("myFirstInputField").blur();
  }
</script>

In the above javascript code we removed focus from our first input field using blur() function.

In this way we can remove auto focus from first input field in sales force.

If you know any other ways of achieving this, please feel free to post in comment so that we will add that to the article.

For more posts on javascript visit: JavaScript


Read more...

prevent bootstrap modal from closing when clicking outside or escape

This article explains how to prevent bootstrap modal from closing/disappearing when clicking outside or escape.

This can be done in two ways

  1. Through JavaScript or
  2. Through HTML

JavaScript:

$('#modalID').modal({
    backdrop: 'static',
    keyboard: false
})

HTML:

<div id="modalID" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

According to bootstrap documentation

backdrop (Type: boolean|string, Default: true) - Controls presence of a backdrop. Allowed values: true (default), false (no backdrop), 'static'(disables modal closing by click on the backdrop).
keyboard - (Type: boolean, Default: true) - Indicates whether the dialog should be closable by hitting the ESC key.

By passing backdrop option with value 'static' will prevent closing the modal. Also by passing {keyboard: false} we can prevent closing the modal by pressing Esc.

In this way we can prevent the bootstrap modal from closing when clicking outside or escape.

For more posts on bootstrap visit: BootStrap

Read more...

Change date format in angular datetime picker

This article explains how to format the date in angularjs datetime piker.

Note: for better understanding of this article please ready my previous article on angular datetime picker AngularJS DateTime Picker

For formatting date in angular datetime picker we have to use the angular-date-time-input directive.

First, add the dateTimeInput.js file in your project from the following url.

https://github.com/dalelotts/angular-date-time-input/blob/master/src/dateTimeInput.js

Add dateTimeInput module as a dependency to your application module.

var myModule = angular.module('MyApp', ['ui.dateTimeInput'])

Finally apply the date-time-input directive in your form element where you are showing the date.

<input data-date-time-input="YYYY-MM-DD" />

The value of the date-time-input attribute is the format the date values will be displayed.

This way we can change the date format of angular datetime picker.

For more posts on AngularJS visit: AngularJS

Read more...

AngularJS Datetime Picker

Using angular-date-time-input directive we can format the display of a date in an input box or allow users to enter a valid date with the keyboard.


Requirements:





  • AngularJS 1.4.x or higher (1.0.x will not work)
  • moment.js 2.8.3 or higher for date parsing and formatting
  • bootstrap's glyphicons for arrows (Can be overridden in css)


    First add the datetimepiker.js and datetimepicker.templates.js javascript files (from angular-bootstrap-datetimepicker source files) in your project. 

  • Then add the 'ui.bootstrap.datetimepicker' module as a dependency to your application module:

    var myAppModule = angular.module('MyApp', ['ui.bootstrap.datetimepicker'])

    Now you can use the datetimepicker directive in your html page as below.

    <datetimepicker data-ng-model="model.date"></datetimepicker>

    Above code renders the following datetime picker in the browser.



    Show Angular datetime picker when textbox clicked


    This section explains how to show a datetime picker when user clicked on a textbox.

    First add the following textbox.

    <input type="text" data-ng-model="model.date" id="dropdown1" data-toggle="dropdown">

    Now, add the following <ul> element which has datetime picker inside it.

    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
              <datetimepicker data-ng-model="data.dateDropDownInput" data-datetimepicker-config="{                 dropdownSelector: '#dropdown2' }"/>
    </ul>


    In the above datetimepicker directive we added data-datetimepicker-config="{ dropdownSelector: '#dropdown1' }" attribute. dropdownSelector should match the id of the textbox element.

    Now when we click on the textbox, datetimepicker will be visible. Once you select the date and time that value will be visible in that textbox.

    This way we can implement angular datetime picker to select the date and time. Please do comment for any suggestions/queries.

    To change the date format of angular datetime picker read : Change date format in angular datetime picker  


    For more posts on AngularJS please visit : AngularJS

    Read more...