Wednesday, January 22, 2014

"data" attribute in HTML5 and JQuery

This is used for store a value(its may string, array or object) on a html element.


Setting "data":
<input type="text" id="city" data-info="Main City" />      // Setting via html.
$('#city').data('city', "Main City");                                      // Setting via JS.
$('#city').data('city', ["blue","green","red"]);                      // Store array. 
$('#city').data('city', {special:"River",issue:"Factory"});    // Store object.

Getting Data:
var detail=$('#city').data();

Note: Do not use capital letters on "data" attribute name. Its not working.

Monday, January 20, 2014

Timezone in PHP

By default PHP get the timezone from the "php.ini" file.

Get Current Timezone:
echo date_default_timezone_get(); // Will return current timezone used by PHP.

Set Timezone:
date_default_timezone_set('Asia/Kolkata'); // Will set PHP timezone to specified.

Timezone in MySQL

By default mysql uses system timezone. That is the server computer's timezone.

Get current timezone:
mysql> select @@global.time_zone; // Will return over all mysql timezone.That is in mysql every user can had separate timezone. This return common timezone.
mysql> select @@session.time_zone;  // Will return current user's timezone.

Set timezone:
mysql> set GLOBAL time_zone = timezone; // Will set timezone for overall mysql.
mysql> set time_zone = timezone; // Will set timezone for current user.

Example timezone format: 'Europe/London', 'Asia/Kolkata'.

Friday, January 3, 2014

JQuery "this" object has different meaning inside ajax call

Usual cases:
Most of the time we are using "$(this)" inside more events, by default "this" represent the current element's object.

For example:
If we need to delete a button, which having id "del", then we write a code as,
$('#del').click(function(){
         $(this).remove(); // Using "this" object to access current selected element.
});


In side an ajax call:
But inside the JQuery ajax call we could not use "this" object. Because ajax function already having a object called "this", which had different meaning. So we have to assign our "this" object into other name, before we going to use ajax.

For example:
Say same as above, we need to delete a button which having id "del", when it was clicked. But now we need to also perform a another action using ajax function. Action may anything like delete a post from database using back end codes like PHP.

So, we have code like follows,
$('#del').click(function(){
         var self=this; // Assigning "this" object into an other variable.
         $.ajax(function(){
                   url: 'delete_post.php',
   type:'POST',
   success:function(data){
                         $(self).remove(); // Using new variable "self" to access current selected element.
                  }
         });
});

Thursday, January 2, 2014

Difference between .on and .live in JQuery

.live
Usually we are using this method for, adding a action for a dynamically created element.

For example: 
Say our user has to enter his friends email on our site. But our page initially has, only one text box with a "add new email" link. So now, when user click on "add new email" link we will call a JS code to generate a new text box with a delete a option.

That is we are write this code under,
$('#add_new_id').click(function(){

      ----- code to generate new text box with a delete link ------

});

But now we have to call delete action, when user click on delete option. If we are simply write as previous one like $('#delete_link').click it will not work. Because we dynamically generated this link. So we write a code as follow,

$('#delete_id').live('click',function(){

      ----- code to delete text box ------

});

Issues on .live
As of JQuery 1.7+ .live is not recommended, you can check this here. Because,

1. jQuery attempts to retrieve the elements specified by the selector before calling the .live() method, which may be time-consuming on large documents.

2. Chaining methods is not supported. For example, $( "a" ).find( ".offsite, .external" ).live( ... ); is not valid and does not work as expected.

3. Since all .live() events are attached at the document element, events take the longest and slowest possible path before they are handled.

And more issues, you can look here.

Use .on instead of .live
We can use "on" through all elements whether the element is loaded previously or dynamically.

Syntax for 'on':
$(document).on(event, selector, action);

Example for using 'on', instead of '.live':
$('#delete_id').live('click', function() { } );   // Don't use this.
$(document).on('click', '#delete_id', function(){ } );   // Use this.

Note:
On the above example we select or search '#delete_id' element directly from 'document'. We can still search under a nearest element as, $('#nearest_known_div_id').on('click','#delete_id', function(){ } );.

Learn JavaScript - String and its methods - 16

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>String and it's methods - JS&l...