Category: Web Technologies

live() & delegate() functions of jQuery

live() & delegate() are two unique functions of jQuery. These two function look & act much like bind() function of jQuery. However they have a very different purpose.

We know that bind() function is used to binds Event Handlers to the elements matching the selector & already present in the DOM.

Lets say we have a button in the DOM with following markup.

<button id="btnSubmit" value="Submit" type="button">Click Me</button>

To attach Click Event Handler to the button, we use bind() function of JQuery as shown in the following snippet.

$('#btnSubmit').bind('click', function() {
  alert('User clicked on "Click Me"');
});

bind() function is pretty good if the element for which it is used is already present in the DOM. But, if the elements are added to the DOM on the go & we want that all the elements should have a Event Handler attached with them, then I won’t consider bind() function as the best option to attach Event Handlers. If we use bind() function in such scenario, then whenever a new element is added to the DOM, after each insertion we will have to call bind() function to attach a Event Handler to the newly added element. So to avoid this JQuery’s live() or delegate() functions can be used.

live() & delegate() functions provide similar event delegation functionality. They may sometimes seem as interchangable functions but at low level they are not. live() has several serious disadvantages & is suggested to be used. 

[Event Delegation Functionality: Event delegation works by binding to an element in the page, waiting for a DOM event to bubble to this element.]

HOW LIVE & DELEGATE WORKS:

Following is the code snippet of two jQuery functions live() & delegate() performing the same operation.

$('#container').delegate('button','click', function() {...});
$('#container button').live('click', function() {...});

The main difference between the two functions is, live() binds to the document & delegate() binds to the element on which its called on.

live() method provides a means to attach delegated event handlers to the document element of a page. So every time the event is triggered, it bubbles up in the tree to the document. This may be very time-consuming for large documents.

delegate() method instead provides a means to attach delegated event handlers to some parent element. So whenever the event is triggered, it bubbles up to the parent on which the method is called instead of document element.

So delegate() is a better option in terms of performance as compared to live().

FTP site stopped.. Error 10022

FTP site of IIS Server 7.5 was stopped. When I tried to start the FTP Site, I got this error “FTP sites cannot be started unless the Microsoft FTP Server (FTPSVC) is running. The service is currently stopped.”

ftp-service-error-img-1

Its because FTP site is dependent on “Microsoft FTP Service“. FTP transfer wont work if this windows service stops running.

ftp-service-error-img-2

To start it:-

  • Just go to Services window (Run >> Services.msc)
  • Start Microsoft FTP Service.

MySQL: ALTER COLUMN vs CHANGE vs MODIFY COLUMN

ALTER COLUMN
Used to set or remove the default value for a column. Example:-

ALTER TABLE MyTable ALTER COLUMN foo SET DEFAULT ‘bar’;
ALTER TABLE MyTable ALTER COLUMN foo DROP DEFAULT;

CHANGE COLUMN
Used to rename a column, change its datatype, or move it within the schema. Example:-

ALTER TABLE MyTable CHANGE COLUMN foo bar VARCHAR(32) NOT NULL FIRST;
ALTER TABLE MyTable CHANGE COLUMN foo bar VARCHAR(32) NOT NULL AFTER baz;

MODIFY COLUMN
Used to do everything CHANGE COLUMN can, but without renaming the column. Example:-

ALTER TABLE MyTable MODIFY COLUMN foo VARCHAR(32) NOT NULL AFTER baz;
The official documentation for ALTER TABLE (for MySQL 5.1) is here.

Regex.test() function of javascript returns alternate results

Recently faced one strange issue. Regex.test() function of javascript was returning alternate results. I thought I made some mistake in writing the logic. But later when I debugged, I found that javascript function itself was behaving strangely. I googled it and found a new thing which I wasn’t knowing. So posting here for reference. Thanks to stack overflow 🙂

This is the RegExp which I was using [ /^([\+](?:\d{1,3})[-]\d{10})$/gi ]. Its a Global RegExp (contains g).

In JavaScript, Global RegExp have state which is used for finding multiple matches. We call either exec, test etc. methods to find match. First time execution of one of these methods give first match. Call them again and you get the next match, and so on until you get no match and it resets to the start of the next string.

There are two ways to change this behaviour (if you are dealing with single match):
(1) You can write regex.lastIndex= 0 to reset the state of the RegExp.
(2) Remove (g) from your RegExp.

[Reference: http://stackoverflow.com/questions/2630418/javascript-regex-returning-true-then-false-then-true-etc]

Max Domain Name Limit

Just for reference: [Copied from Pro Webmasters]

  • 253 characters is the maximum length of full domain name, including dots: for e.g. www.example.com = 15 characters.
  • 63 characters in the maximum length of a “label” (part of domain name separated by dot). Labels for www.example.com are com, example and www.

Example of the domain with longest possible label (it’s a fully working website):

http://www.abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijk.com/
The domain name length = 71 characters.

Example of longest domain name:

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcde.abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijk.abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijk.abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijk.com

jQuery doesn’t fire onChange event on hidden fields by default

Changes in value of hidden input elements don’t automatically fire the .change() event. So, whenever you set the value of any hidden input element & want the change to be tracked, you explicitly have to tell jQuery to trigger change event on that hidden input element.

function changeStatus(statusValue) {
$('#status').val(statusValue).trigger('change');
}

…. and then …

$('#status').change(function(){
... Perform some function on change of value ...
})

Do you always refer w3schools.com? Then just checkout w3fools.com

Few days before I just thought of appearing for JQuery certification exam. So I visited w3schools certifications here @ [Reference: http://w3schools.com/cert/cert_jquery.asp]

I took a practice quiz which was very basic in my opinion and scored 100% :). Then I looked for the cost of the exam & found it as $95.00.

After clearing the practice quiz & checking out the cost, I just thought, would it worth spending $95.00 for this w3schools certification?

“They say the exams are taken online and it’s up to me to get a employer or teacher to supervise and have there name on the certification as the supervisor to add to the credibility of the cert.“

Ha Ha Ha!

Googling a bit on this I landed on to w3fools.com and said NO! just after going through complete page.

Wanna know why?
Just visit w3fools.com & you will get the answer.

[W3Schools.com is not affiliated with the W3C in any way.]

Changing CHARACTER SET From LATIN1 to UTF8 in MySQL

Default CHARACTER SET of a MySQL Database is “Latin1“. When a database is created using default CHARACTER SET in MySQL, all the tables & string columns when created inherit the default CHARACTER SET of the database.

Creating Database with default CHARACTER SET is fine if we plan to store data in English language only. But when you plan to have a Multilingual Support in your application default CHARACTER SET won’t work. When you try to store CHINESE or JAPANESE characters (in Column >> Table >> Database with Default CHARACTER SET) it will silently accept those characters & show them as question marks ?????? or some boxes [][][][][][][][]. Surely this will cause frustration all round.

After digging around, the best character set to use which i found is UTF8.
To set the CHARACTER SET for the server, the my.cfg/my.ini file has to be modified:

default-character-set=utf8

Unfortunately, once a database and their tables are defined as latin1, they remain as latin1 unless you run this for each database:

ALTER DATABASE MYDATABASE CHARSET=UTF8;

and for each table:
ALTER TABLE MYTABLE CHARSET=UTF8;

and for each varchar/char type column:
ALTER TABLE MYTABLE ALTER COLUMN MYCOL CHARSET=UTF8;

and go on repeating this infinite times …. 😦

This is rather tedious and boring, so there should be a better way. And that is to dump out the SQL files, change the CHARACTER SET and dump it back in.

TEXT & BLOB Type Storage Requirements in MySQL

Under “Storage Requirements for String Types in MyISAM”, there’s a table stating that BLOB and TEXT require L + 2 bytes of storage space,
where L “represents the actual length in bytes of a given string value”, and, according to the table, is less than 2^16 (65,536) [64 KBs].
Consequently, you can’t store more than that. MEDIUMTEXT will give you 16,777,215 bytes of storage, while LONGTEXT gives you just short of 4.3 billion bytes.

Different Maximum sizes for Text & Blob Type in My SQL are:

[TEXT TYPE]

TINYTEXT – 255 bytes
TEXT – 65535 bytes [64KBs]
MEDIUMTEXT – 16,777,215 bytes (2^24 – 1) [16MBs]
LONGTEXT – 4G bytes (2^32 – 1)

[BLOB TYPE]

TINYBLOB – 255 bytes
BLOB – 65535 bytes [64KBs]
MEDIUMBLOB – 16,777,215 bytes (2^24 – 1) [16MBs]
LONGBLOB – 4G bytes (2^32 – 1)

[Reference Link: http://dev.mysql.com/doc/refman/5.1/en/storage-requirements.html]

Enabling No Cache in Webpage

You could use this:

<META HTTP-EQUIV=”PRAGMA” CONTENT=”NO-CACHE”>

It instructs the browser not to cache the page. Also you may use <META HTTP-EQUIV=”REFRESH” CONTENT=”1;URL=http://www.yoururl.com”>
this forces the page to refresh after 1 second, which is annoying an I think can have a detrimental effect on search engine spiders.