Browsing articles in "jQuery"

Jun 1, 2013

kalpesh

return false vs preventDefault in javascript

This post will help you to differentiate between javascript’s return false, preventDefault, stopPropagation and stopImmediatePropagation.

The first thing you learn when using javascript is to use return false. That’s the best thing we think to cancel browser’s default behavior, to stop further execution of an event. If you are using a simple function which returns what you want, then probably you won’t notice anything wrong in using return false. But when you want event to propagate, return false will not be helpful and will give unexpected result.

What is event propagation?

When a single event, such as a mouse click, if is handled by two or more event handlers defined in various location of the DOM hiearachy, then the event handling starts by executing for individual elements at the lowest level. There are two models of this event propagation, event bubbling and event capturing.

Event bubbling is when an event has more than one event handler and event handling execution starts from bottom to top i.e. from individual links to it’s parent element (e.g. form or body or document) having it’s own event handler.

<html>
  <body onclick="3rdEvent()">
    <form onclick="2ndEvent()">
      <a href="#" onclick="1stEvent()">
        This is a link!
      </a>
    </form>
  </body>
</html>

On clicking on the link in the above example code, first the hyperlink’s event will be handled, then form’s event will get handled, and at last body’s event will get handled. This is event bubbling, which bubble up from bottom to top.

Event capturing is opposite to event bubbling, where event handling execution starts from top to bottom.

If you have such type of architecture, where there are many event handlers for an event, you should not use return false or atleast use it with caution. It can get you in big trouble, as it does preventDefault() and stopPropagation() both and hence never allows further execution of an event.
Continue reading »

jQuery Prototype JS

Jun 1, 2013

kalpesh

No Comments

jQuery Prototype conflict, resolve it using noconflict

It’s difficult to use different javascript libraries in the same page. Because they tend to create conflicts with each other’s code, and often break javascript. One such case is using jQuery and PrototypeJS libraries in the same webpage. Both prototypejs and jquery use $ as their function or variable name which causes issues, as both the libraries will get triggered with that alias.

jQuery provides a method which solves this issue, so that you can use any javascript library with jQuery on the same page. This function is called noConflict(), and it simply uses different symbol/charater(s) you provide rather than dollar ($).

Below code will help you to understand this and you can use it to resolve conflicts between different javascript libraries used when using jQuery on the same page.

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    var $j = jQuery.noConflict();
</script>

After using the above code, you can use jQuery as $j and PrototypeJS as $.

jQuery

May 29, 2013

kalpesh

No Comments

jQuery check if checkbox is checked or not

Using jQuery, check whether checkbox is checked or not using 4 different ways in this post.

Below code relies on jQuery’s is method to check if the checkbox is checked or not. If you want to lookup the checkbox by class instead of id, just replace #yourCheckboxID with .yourCheckboxClassName

if($('#yourCheckboxID').is(':checked')) {
    //do whatever you want here, checkbox is checked
} else {
    //do whatever you want here, checkbox is NOT checked
}

Other alternative to check same thing:

$('#yourCheckboxID').change(function() {
    if(this.checked) {
        //checkbox is checked
    } else {
        //checkbox is NOT checked
    }
});

Above code is the better way and my favorite. It will simply observe the checkbox and when it’s “changed”, the above function will get triggered. Once triggered, it will check the changed object’s (checkbox) attribute “checked”. If it finds the attribute is set, then returns true otherwise returns false.

Third way of doing it is:

if($('#yourCheckboxID').attr('checked') {
    //checkbox is checked
} else {
    //checkbox is NOT checked
}

Above code will check the checkbox’s attribute “checked”, if present it will give true and if not present, it will give false.

Since jQuery 1.6, the new method has been introduced which is called prop. If you are using jQuery 1.6 or above, you can use following code to check if checkbox is checked or not:

if($('#yourCheckboxID').prop('checked')) {
    //checkbox is checked
} else {
    //checkbox is NOT checked
}

jQuery

May 29, 2013

kalpesh

No Comments

jQuery redirect page, with javascript alternative

jQuery redirect one page to another using the following code:

1 2	var your_url = 'http://ka.lpe.sh/'; //change this to your url $(location).attr('href','your_url');

Above code works to redirect page in jQuery, but javascript code is good alternative here.

Using javascript to redirect your page using below code, which is better than jQuery, will do the job:

1	window.location.replace("http://ka.lpe.sh/");

Another javascript approach which will mock as if the URL is being clicked to redirect is:

1	window.location.href = "http://ka.lpe.sh/";

Even this will do the trick in javascript, which sets your URL in a window object and assigns it to anchor tag’s href attribute automatically:

1	window.location = "http://ka.lpe.sh/";

Welcome to my Blog

Certifications

return false vs preventDefault in javascript

What is event propagation?

jQuery Prototype conflict, resolve it using noconflict

jQuery check if checkbox is checked or not

jQuery redirect page, with javascript alternative

Welcome to my Blog

Certifications

Honor

Recognition

Contributions

Categories

Tag Cloud