Browsing articles in "Prototype JS"

Jun 3, 2013

kalpesh

Prototype Utility Methods – Commonly used prototypejs functions

Prototype JS Javascript framework Prototype JS comes with many utility methods which are very powerful and useful while development. Below methods are shorthands or aliases of other Prototype methods, created to save time in typing.

These are created as they are very commonly used, to make developer’s life easier.

$() Function

– Retuns the element that has the ID passed as an argument
Shorthand to: document.getElementById()
Example:

1
2
3

$("car"); //returns element having id "car"
$("car").hide(); //hides div where id is "car"
$("car").addClassName("hidden"); //adds class name "hidden" to element with id "car"

$$() Function

– Returns the elements that has CSS selectors as an argument
Shorthand to: document.getElementById() + document.getElementsByTagName() + prototype’s getElementsByClassName()
Example:

1
2
3

$$('.active');//returns all the elements having class "active"
$$('div.active p, #car a').invoke('hide'); //hides all the "p" tags under div having class "active", hides all links under element having id "car"
$$('div:empty'); //all divs without any content, version 1.5.1 and above

jQuery Prototype JS

Jun 1, 2013

kalpesh

No Comments

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 $.

Welcome to my Blog

Certifications

Prototype Utility Methods – Commonly used prototypejs functions

$() Function

$$() Function

return false vs preventDefault in javascript

What is event propagation?

jQuery Prototype conflict, resolve it using noconflict

Welcome to my Blog

Certifications

Honor

Recognition

Contributions

Categories

Tag Cloud