Some Useful Features from jquery and Html5

|
| By Webner

1. Data attribute :

This is the new attribute in html5. Using data attribute we can store custom data in any of the html elements. Data attribute consists of a prefix “data-” and a unique name appended to the prefix. Major use of data attribute can be found when html elements are generated at runtime and we can attach some extra information corresponding to each element.

General format for using the data attribute is: data-. HTML element can have multiple number of custom “data-” attributes with different name (only lowercase).

For example, I have a list of documents and folders. I have specified a data attribute with name data-type and based on this attribute, I am able to identify which of these are documents and which of these are folders :

<li id="id1" data-type="folder"> Test </li>

<li id="id2" data-type="folder"> Test1 </li>

<li id="id1" data-type="document"> Test.txt </li>

<li id="id2" data-type="document"> Test.pdf </li>

<li id="id3" data-type="document"> Test.doc </li>

We can fetch the value inside this attribute by using jquery syntax:

Var Type = $(#id).data("type");

We can use multiple data attributes in the same element.

<div id="id1" data-type="document" data-time = “Monday 9:30”> document</div>

2. Callback jquery :

As we know javascript and jquery code executes in the sequence in which we have written it. Sometimes we have functions which can take long time or there could some asynchronous effects in the execution of jquery code. In these cases next line of code can run incorrectly without finishing the previous line of code. This could lead to errors.

So the alternative is Callback methods.

Callback function will execute after complete execution of the current function.

Below is the example of using the callback method:

$("#submit").click(function(){
$("#modal").show("slow", function(){
alert("The overlay is now displayed");
});
});

The alert will appear after displaying the modal. So we can perform required operation inside the callback function

3. Differentiate if button is clicked by user or clicked programmatically :

Button can be clicked by user manually from mouse or keyboard to perform some action or it can also be clicked programmatically using the jquery or javascript.

Consider the following example below from Jquery:

$( "#submit" ).click(function() {
alert( "call submit function" );
submitFunction();
// this will work when user click the submit button.
});

Now if we need to call same function when we click any other element then we use trigger or .click() :

$( "#submit" ).click(); // this will call the above clicked function.

So how to find out if button is clicked by user or by code-triggered event?

We can use which property of the event object. which property is used for detecting key and mouse events. In other words, ‘which’ property returns us which key from keyboard or mouse button was pressed:

$("#elementId").click(function(e) {
if(e.which) {
//Actually clicked by user.
// this will return 1 (e.which) property.
}
else { //Triggered by code
// this will return undefined (e.which) property.
} });

Leave a Reply

Your email address will not be published. Required fields are marked *