JavaBeat » Ganesh Prakhya

Loading XML using jQuery AJAX

Ganesh Prakhya — Mon, 11 Mar 2013 13:36:07 +0000

In our previous articles, we discussed about how jQuery AJAX works and also various jQuery global AJAX event handlers available in jQuery. In this article, we’ll focus on accessing an XML document residing at the server, reading and displaying content of the XML using jQuery AJAX. In the following code example, we send an AJAX request to read the XML document we needed and we process the response from the AJAX request to display the results. We’ll also see how we can detect any errors occurred during AJAX request.

also read:








Please click to load the products from server:

In the above code example, we sent an AJAX request to the XML document ‘products.xml‘ which is at the same server location as the executing HTML file. However, we can also use relative paths to access various server resources.

Note that we specified various parameters while sending the AJAX request. For example, we configured the request ‘type’ as ‘GET’, ‘url’ to ‘products.xml’ and ‘datatype’ as ‘xml’. The ‘datatype’ parameter indicates the type of the response we’re expecting from the server.

The following is the XML we used in this example in the products.xml.



	
		P-22345
		LCD Television
		$500
		5%
	
	
		P-13245
		Mac Mini
		$700
		2%
	
	
		P-52346
		Home Theatre
		$500
		1%
	
	
		P-78385
		Laptop Computer
		$1500
		5%
	
	
		P-78385
		Desktop Computer
		$1000
		7%

When we click on the button ‘Load XML’, the XML content is loaded from the server and displayed in a tabular format as shown in the below screen capture.

We can specify a number of parameters in the AJAX request as key/value pairs. All parameters are optional. In this code example we’re using ‘type’, ‘url’, ‘datatype’, ‘error’, and ‘success’ parameters. The ‘type’ parameter specifies the request type (GET or POST), ‘url’ specifies the URL of the resource in the server to access, ‘datatype’ is to indicate what kind of content to expect as part of the response (other possible value is JSON to handle JSON response, html for HTML response, text for pure text response, script to evaluate the response as JavaScript and returns it as plain text). We have ‘error’ and ‘success’ callback methods to handle any errors in the AJAX request or to display the data upon successful request respectively.

also read:

If you have any questions, please post it in the comments section. If you are interested in receiving the future articles on jQuery and Java topics, please subscribe here

jQuery Effects – Hide, Show and Toggle

Ganesh Prakhya — Thu, 28 Feb 2013 13:55:51 +0000

Connect to us ( @twitter | @facebook )

We can create great animations using jQuery. jQuery provides various methods to create animation effects in the web pages. We can use standard animation effects those are most frequently used and also we can customize the effects for better visuals. In this article, we’ll discuss about jQuery basic effects. Let’s discuss about three main methods which provides basic effects. i.e., .show(), .hide() and .toggle(). If you have any questions, please post it in the comments section. If you are interested in receiving the future articles on jQuery and Java topics, please subscribe here.

also read:

jQuery Effects

The following example shows, hides and toggles the display of a paragraph text using basic effects.

This is a simple paragraph text.

When we click on the Hide button, the paragraph hides with slow transition effect. We also called a callback function once the hiding effect completes.

When we click on Show button the paragraph will be shown with slow transition effect as shown in the below. Again, the callback function is invoked once the showing effect is completed.

.show()

The .show() method displays the matched elements if they’re hidden. This method takes several arguments like duration. We can have a callback function to be invoked once the .show() method completes execution. In the following code, the value 1000 represents the duration of the animation.

$("p").show(1000, function(){
    console.log('Paragraph is shown.');
});

.hide()

The .hide() method hides the matched elements if they’re in visible state. This method also takes several arguments like duration. The callback function is invoked once the .hide() method completes execution. In the following code, the value 1000 represents the duration of the animation.

$("p").hide(1000, function(){
    console.log('Paragraph is hidden.');
});

.toggle()

The .toggle() method either displays or hides the matched elements based on their current state.

  $("p").toggle(1000);

We can create basic animation effects using .show(), .hide() and .toggle() methods in jQuery. These three methods have an numeric argument to represent the duration of the animation. The default value is 400. The greater the duration the longer the animation runs. We can also have callback functions to these methods which is called once the method completes execution.

Quick Summary of Other jQuery Effects

.animate()

The .animate() method performs an animation on CSS properties. The animation will be peformed towards to given CSS properties.

$('#myDiv').animate({
	opacity: .5,
	width: 'linear',
	height: '75%'
   }, 8000, function() {

   console.log('animate() completed);
});

.queue()

The .queue() method shows or manipulates the sequence of functions to be executed on the matched elements. We can have a number of functions to exeucte in a queue as shown below and the functions will be executed sequentially.

function myAnimation() {
	myDiv.animate({left:'+=10'},3000);
	myDiv.show("slow");
        myDiv.hide("slow");
	myDiv.animate({right:'+=20'},3000);
}

The default name of the queue is ‘fx’ which is the standard effects queue.

.clearQueue()

The .clearQueue() method removes all functions from the queue those are not yet executed.

$("#animationDiv").clearQueue();

.delay()

The .delay() method delays the execution of the functions in the queue by putting a timer.

$("#animationDiv").show("slow").delay(1000).fadeIn(500);

.dequeue()

The .dequeue() method executes the next function in the queue. When called, the next function in the queue will be removed from queue and then executed. In order to continue the sequence of execution, this function in turn should call .dequeue().

function myAnimation() {
	myDiv.animate({left:'+=10'},3000);
	myDiv.show("slow");
        myDiv.hide("slow");
        myDiv.queue(function() {
	  $(this).addClass('newitemclass');
	  $(this).dequeue();
        });
	myDiv.animate({right:'+=20'},3000);
}

.finish()

The .finish() method completes the animation by stopping the currently running animation, and by removing all queued functions.

$("#animationDiv").finish();

jQuery.fx.interval

Indicates the rate of animations trigger (in milliseconds). This property can be used to adjust the number of frames per second in the animation. Default is 13 milliseconds. Making this value lower may have performance issue.

jQuery.fx.interval = 100;
// animation code

jQuery.fx.off

This property disables all animations globally. When this property is defined with ‘true’, all the animation methods will stop effects by setting to their final state. This is particularly useful in cases where jQuery is used in low-resource devices.

var disableFx = function() {
	$.fx.off = 'true';
};

.stop()

The .stop() method stops the currently executing animation in the queue.

$("#stopBtn").click(function() {
    $("#animationDiv").stop();
});

.fadeIn()

The .fadeIn() methods renders the matched elements with fading effect to opaque.

 $('#myDiv').fadeIn('slow', function() {
	console.log('fadeIn completed');
  });

.fadeOut()

The .fadeOut() method hides the matched elements by fading out them to transparent.

 $('#myDiv').fadeOut('slow',
   function() {
    console.log('fadeOut is completed.');
   });

.fadeTo()

The .fadeTo() method will adjust the opacity of the matched elements to the given value.

$("p").click(function () {
   $(this).fadeTo("slow", 0.47);
});

.fadeToggle()

The .fadeToggle() method toggles the display of the matched elements by animating opacity.

$("p").fadeToggle("fast", "linear");

.slideDown()

The .slideDown() method renders the matched elements with a sliding effect.

$('#imageDiv').slideDown('slow', function() {
   console.log("slideDown completed.");
});

.slideToggle()

The .slideToggle() method either displays or hides the matched elements with sliding effect.

$('#imageDiv').slideToggle('slow', function() {
   console.log("slideToggle completed.");
});

.slideUp()

The .slideUp() method hides the matched elements with sliding effect.

$('#imageDiv').slideUp('slow', function() {
   console.log("slideUp completed.");
});

also read:

If you have any questions, please post it in the comments section. If you are interested in receiving the future articles on jQuery and Java topics, please subscribe here.

Working with DOM Attributes using jQuery

Ganesh Prakhya — Tue, 26 Feb 2013 13:27:28 +0000

Connect to us ( @twitter | @facebook )

In the previous article we learned about manipulating CSS class using jQuery. In this article, we discuss about dealing with DOM attributes using jQuery. jQuery provides flexible methods to get or set DOM attributes and values of the matched elements, and to get or set property values of the matched elements and also to get or set matched element’s HTML content. We can also remove an attribute or a property using these methods. The following is the summary of jQuery methods we can use to manipulate DOM attributes or properties dynamically to a achieve variety of functionality.

Buy: jQuery in Action

also read:

DOM Attributes using jQuery

The following are the methods jQuery supports to work with DOM Attributes. A working example and output screen capture is provided for each of the methods. The following code snippet reads and sets the attribute values.







	.attr() Demo
	
		
                    This text is inside mainDiv.

The following screen describes how we can read element’s attributes.

Once we click on the Update button, the title of the strong text has been updated. Please see the following screen capture for the updated title.

.attr()

The .attr() method either gets or sets the value of the attribute from the matched elements.

$("strong").attr("title")
$("strong").attr("title", "Updated Title")

.removeAttr()

The .removeAttr() method removes the attribute from the matched elements.

$("strong").removeAttr("title");

.prop()

The .prop() method gets or sets the value of the property from the matched elements.

$(“#myChkBox”).prop("checked")
$(“#myChkBox”).prop("checked",”true”)

.removeProp()

The .removeProp() method removes the property from the matched elements.

$("#myChkBox").removeProp("checked");

.html()

The .html() method gets or sets HTML content of the matched elements.

$("#mainDiv").html();
$("#mainDiv").html("<h1>Heading1</h1>");

.val()

The .val() method gets or sets the value of the matched elements.

$("#myTextInput").val()
$("#myTextInput").val(‘New value’)

Buy: jQuery in Action

The DOM manipulation method .attr() is very useful to read or to dynamically set the attributes along with values. Also .prop() method is useful to deal with properties. For instance, using .prop() method we can verify the checked property of checkbox. We use .removeAttr() and .removeProp() methods to remove attributes and properties respectively. The .html() method is flexible in either getting or setting full HTML content of the matched elements. The .html() is particularly useful in setting HTML content from AJAX response. Lastly, the .val() method is used to get or set the value of matched element, for instance we can either read or set the text input value.

also read:

If you have any questions, please post it in the comments section. If you are interested in receiving the future articles on jQuery and Java topics, please subscribe here.

jQuery Global Ajax Event Handlers

Ganesh Prakhya — Wed, 06 Feb 2013 16:07:35 +0000

Connect to us ( @twitter | @facebook )

In the jQuery Ajax Introduction, we discussed about sending Ajax requests and processing returned data using jQuery. In this article we’ll discuss about Ajax event handler methods. These Ajax event handler methods are invoked when Ajax related events are triggered like sending an Ajax request, completion of an Ajax request, and error during Ajax request processing or upon successful Ajax requests.

These events are triggered on each Ajax request if the global property in jQuery.ajaxSetup() method is set to true. The default value for this property is true. Please note that these global events are not fired for cross-domain requests or JSONP requests irrespective of the value of global property. The jQuery.ajaxSetup() method is used to configure default values for future Ajax requests.

Buy: jQuery in Action

also read:

The following example sends an Ajax request to a static HTML resource and shows how these events are triggered.

The following screen capture shows the successful Ajax request and the sequence of events triggered. Please take note of the .ajaxSuccess() event triggered since the Ajax request is successful.

However for the failed Ajax request, the sequence is pretty much same except that the .ajaxError event is triggered instead of .ajaxSuccess as shown below.

Summary of Ajax Event Handlers

.ajaxStart()

The .ajaxStart() event is triggered when an Ajax request starts. This event is invoked if there are no outstanding Ajax requests in progress.

$(".result").ajaxStart(function(){
console.log('ajaxStart triggered');
});

.ajaxSend()

The .ajaxSend() event is triggered just before an Ajax request is sent.

$(".result").ajaxSend(function(){
	console.log('ajaxSend triggered');
});

.ajaxSuccess()

The .ajaxSuccess() event is triggered when an Ajax request completes successfully without any error.

$(".result").ajaxSuccess(function() {
	console.log('ajaxSuccess triggered');
});

.ajaxError()

The .ajaxError() event is triggered when an Ajax request completes with error.

$(".result").ajaxError(function(){
console.log("ajaxError triggered.");
});

This event is not fired when .ajax() or .ajaxSetup() are called with global property set to false.

$(.result).ajaxError(function(event, request, settings) {
	console.log( "Error when requesting: " + settings.url);
});

If the Ajax request is failed because of any JavaScript exception, the exception object is passed
to this function as a fourth parameter.

$(.result).ajaxError(function(event, request, settings, exception) {
	console.log( "Error when requesting: " + settings.url);
});

.ajaxComplete()

The .ajaxComplete() event is fired when the Ajax request completes irrespective of the request is failed or succeeded.

$(".result").ajaxComplete(function(){
console.log('ajaxComplete triggered');
});

.ajaxStop()

The .ajaxStop() event is fired when all Ajax requests have been completed and no other Ajax request is pending for processing.

$(".result").ajaxStop(function(){
console.log('ajaxStop triggered');
});

The Ajax event handlers are great to get the exact status of the request. We can do pre-processing tasks like data preparation in the .ajaxStart() and .ajaxSend() methods just before sending any Ajax request. Error handling can be done in .ajaxError() method in case any Ajax request fails. The .ajaxSuccess() is useful to display acknowledgement message to the user upon successful completion of request. The events .ajaxComplete() and .ajaxStop() marks the end of Ajax request(s) so any clean up can be done in these events.

Buy: jQuery in Action

also read:

If you have any questions, please post it in the comments section. If you are interested in receiving the future articles on jQuery and Java topics, please subscribe here.

Manipulating Styles with jQuery

Ganesh Prakhya — Tue, 05 Feb 2013 00:38:36 +0000

Connect to us ( @twitter | @facebook )

In the previous article we discussed about manipulating element CSS Classes using jQuery. In this article we’ll explore how to read or manipulate style properties of elements using jQuery methods. The CSS Classes defined using class attribute can be used to control the look and feel of an element. A predefined CSS definition matched with class name is required which reflects the actual style implementation. However, using style properties we can straightaway manipulate the styles of the matched elements. In other words, we can read or change the elements background-color, width, height and many other style properties instantly. In this case, a pre-defined style definition is not required.

The jQuery style properties will return corresponding style value if used without any argument, at the same time used to set corresponding style value if used with an argument.

also read:

In the following example, we are reading the div styleDiv style properties (background-color, width, height) by clicking inside the styleDiv, and displaying them on console. At the same time we have three buttons to update the background-color, width and height of the div styleDiv. Once the properties are updated, we can see the updated properties again by clicking inside the styleDiv. The complete code listing is below:

Buy: jQuery in Action


  
    
    
  
  
    Style Properties Manipulation with jQuery

    
        This is styleDiv.
        Please click to see style information in the console.

The following screen capture shows us on how we can read the element’s style properties.

When we click on the ‘Update Background Color’ button, the styleDiv background-color property is set to html color code value #c0c0c0.

When we click on the ‘Increase Width’ button, the styleDiv width property is set to new value, also we can see that the styleDiv has increased width. In the same way, when we click on the ‘Increase Height’ button, the styleDiv height property is set to new value, also has the increased height. The below screenshot shows the difference.

Here is the quick summary of other style properties we can work with jQuery.

.css(propertyName)

Gets the style property value of an element. The below code snippet gets the background-color style property of the element styleDiv.

$("#styleDiv").css('background-color')

We can also set the style property using this method as shown below.

$("#styleDiv").css({'background-color': '#c0c0c0' });

.height(value)

Gets the height of an element or sets the height of an element.

To get the height of an element.

$("#styleDiv").css('height')

To set the height of an element.

$("#styleDiv").height(150);

.innerHeight()

Returns the height of the matched element including any padding (top and bottom) but not border. This method has no arguments.

$("#styleDiv").innerHeight()

.innerWidth()

Returns the width of the matched element including any padding (left and right) but not border. This method has no arguments.

$("#styleDiv").innerWidth()

.offset()

Retrieves the current position of a matched element relative to the document. This method returns an object containing the properties left and top.

$("#styleDiv").offset().left
$("#styleDiv").offset().top

.outerHeight(includeMargin)

Gets the current height of the matched element including padding, border and margin. If includeMargin is set to true, the margin is considered when calculating the outer height.

$("#styleDiv").outerHeight()
$("#styleDiv").outerHeight(true)

.outerWidth(includeMargin)

Gets the current width of the matched element including padding, border and margin. If includeMargin is set to true, the margin is considered when calculating the outer width.

$("#styleDiv").outerWidth()
$("#styleDiv").outerWidth(true)

.position()

Retrieves the current position of a matched element relative to the offset of the parent element. This method returns an object containing the properties left and top.

$("#styleDiv").position().left
$("#styleDiv").position().top

.scrollLeft(value)

Gets or sets the current horizontal scroll position of the scroll bar for the matched elements. The horizontal scroll position is the number of pixels that are hidden from view to the left of the scrollable area. If the scroll bar is at the extreme left, or if the element is not scrollable, this method returns 0.

$("#styleDiv").scrollLeft()
$("#styleDiv").scrollLeft(100)

.scrollTop(value)

Gets or sets the current vertical scroll position of the scroll bar for the matched elements. The vertical scroll position is the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the extreme top, or if the element is not scrollable, this method returns 0.

$("#styleDiv").scrollTop()
$("#styleDiv").scrollTop(100)

.width(value)

Gets the width of an element or sets the width of an element.

To get the width of an element.

$("#styleDiv").css('width')

To set the width of an element.

$("#styleDiv").width(100);

These jQuery methods are useful to manipulate elements style properties on the fly. The method .css() is useful to read, add or change style properties of any element. The .width() and .height() methods are used to read or set the element width or height. We can also manipulate element’s scrollable position using methods .scrollLeft() and .scrollTop() methods. The .offset() and .position() methods returns the current position of the element relative to document and parent respectively.

Buy: jQuery in Action

also read:

If you have any questions, please post it in the comments section. If you are interested in receiving the future articles on jQuery and Java topics, please subscribe here.

CSS Class Manipulation with jQuery

Ganesh Prakhya — Sun, 03 Feb 2013 01:32:26 +0000

Connect to us ( @twitter | @facebook )

Each HTML element can have a CSS class attribute which controls the look and feel of the element. The CSS class of an element corresponds to the style sheet definition. Style sheets are managed separately from HTML or any other presentation code for better maintainability. Often need arises to manipulate these class attributes to assign or remove new CSS classes dynamically. jQuery caters this need by providing us methods to inspect and manipulate CSS classes assigned to the HTML elements. This article would explores the options available for manipulating the CSS properties using the jQuery.

also read:

The following code example uses jQuery to assign new CSS class, remove an assigned CSS class, toggle adding/removing CSS class and inspects for the CSS class.








CSS Class Manipulation with jQuery
This is a simple paragraph text.
   When 'Change' button is clicked this paragraph
   CSS class will be changed.

Let’s discuss about the methods we used in the above example:

.addClass

The .addClass adds the specified CSS classes to the matched elements. The elements to add CSS class can be matched using selector syntax. The following code snippet adds the CSS class to all the paragraphs in the document.

$("p").addClass('paragraph');

.removeClass

The .removeClass removes one or more CSS classes from the matched elements. The elements can be matched with selector syntax. The following code snippet removes the CSS class from all the paragraphs.

$("p").removeClass('paragraph');

We can also specify multiple CSS classes to remove from matched elements as shown below:

$("p").removeClass('paragraph anyotherclass highlightclass');

.toggleClass

The .toggleClass either adds or removes the CSS classes from the matched elements based on whether the class already present or not. In the below code example, if CSS class is not present then the CSS class is added, if it is present it will be removed.

$("p").toggleClass('paragraph');

.hasClass

The .hasClass returns boolean value on whether any matched elements have the specified class or not.

console.log($("p").hasClass('paragraph'));

We can manipulate the CSS classes from jQuery using .addClass, .removeClass, .toggleClass and .hasClass methods. These methods provide flexible ways to dynamically add or remove CSS classes to the elements to control the look and feel of the elements.

Buy: jQuery in Action

also read:

If you have any questions, please post it in the comments section. If you are interested in receiving the future articles on jQuery and Java topics, please subscribe here.

jQuery Event Handling – Browser Events

Ganesh Prakhya — Wed, 30 Jan 2013 02:59:33 +0000

Connect to us ( @twitter | @facebook )

In this article we’ll discuss about jQuery browser events. The browser events are triggered when browser is resized or scrolled or any elements have not been loaded properly by the browser. Three browser events are discussed here namely error, scroll and resize events. Using these browser events we can do number of things like re-arranging user interface elements when user resizes browser or loading alternative elements if primary elements failed to load or appending more content to the element when user does scrolling etc. If you have any questions, please post it in the comments section. If you are interested in receiving the future articles on jQuery and Java topics, please subscribe here.

also read:

Browser Events

The following HTML code demonstrates the three browser events jQuery supports followed by brief description of each of these browser events.



  
    
    
  
  
    jQuery Browser Events - Demo

          Please scroll this really long long text.

error Event

The error event is triggered if any of the element(s) are not loaded property by the browser (like images). This event is helpful in providing alternate functionality in case any of the elements failed to load. For example, if image failed to load, we can set the alternative image as shown below.

$('#myImage').error(function() {
   console.log('myImage failed to load, please assign missing image.');
}).attr("src", "newImage.png");

In the above code example, we’re assigning a new image for the missing image when the error event is triggered.

scroll Event

The scroll event is triggered when user scrolls the element. This event can be applied to window objects or scrollable frames or any element with CSS property overflow set to scroll or auto.


$("#myTextarea").scroll(function() {
   console.log("myTextarea scrolled");
});

    Please scroll this really long long text.

In the above screen capture, the scroll event is triggered when user scrolls the textarea.

resize Event

The resize event is triggered when width or height of the browser window is changed by resizing.

$(window).resize(function() {
   console.log("window resized");
});

The resize event is triggered when user minimizes or maximizes or resizes the browser window.

The jQuery browser events useful in scenarios we need to capture the point where user resized the browser window. We may want to do UI re-structuring when browser window is resized, or want to hide some of the elements when the screen is resized to minimum width and height. We can use resize event to achieve this type of functionality.

In the same way, scroll event is useful to show or hide large amounts of data in HTML elements. The scroll event is triggered when user clicks on the horizontal or vertical scroll bars of element to scroll, or when user uses mouse scroll wheel to scroll the area.

The error event is useful to provide fallback logic if browser failed to load any elements like images or videos.

also read:

If you have any questions, please post it in the comments section. If you are interested in receiving the future articles on jQuery and Java topics, please subscribe here.

jQuery Event Handling – Form Events

Ganesh Prakhya — Sat, 26 Jan 2013 15:43:12 +0000

Connect to us ( @twitter | @facebook )

We discussed about mouse events, keyboard events in previous articles. This article discusses about form events jQuery supports. jQuery has five form events namely blur(), change(), focus(), select() and submit(). These events are triggered when we interact with HTML form elements like moving away from the element or when the element loses its focus, changing element text or value, when element’s inside text is selected, when the element gets the focus, and submitting a form respectively. If you have any questions, please post it in the comments section. If you are interested in receiving the future articles on jQuery and Java topics, please subscribe here.

also read:

The following HTML code creates a form with input text box and a submit button to demonstrate how form events are triggered. These jQuery form events are bind to the text box and form.



  
    
    


  jQuery Form Events - Demo
   
  Name:

blur

The blur event is triggered when an element loses its focus. The below screen capture shows us that the blur event is triggered when text input loses its focus and submit button gets focus.

change

The change event is triggered when element values is changed. The below screen shows us that change event is triggered when element value has been changed.

Note that in the case of text input and any other input elements the change event is triggered when element value is changed and element loses focus. For select boxes, checkboxes and radio buttons the change event is triggered immediately upon user selection.

focus

The focus event is triggered when element gets focus. The below screen describes the focus event being triggered on text input.

select

The select event is triggered when element inside text is selected. The below screen demonstrates the select event being triggered as soon as user selected the text. This event is only applicable to input type text and textarea.

submit

The submit event is triggered when trying to submit a form. This event can only be attached to a form.

The jQuery form events are useful in various ways. The blur and change events can be used to perform data validations and to inform user if invalid data is entered. The focus event can be used to refresh the data in the HTML element as soon as user arrives at the element. The select event can be used to provide functionality like copy or cut when user selects text inside the element. Finally, the submit event can be used to perform any validation checks or to execute any pre-processing tasks before the form submission.

also read:

If you have any questions, please post it in the comments section. If you are interested in receiving the future articles on jQuery and Java topics, please subscribe here.

jQuery Event Handling – Key Events

Ganesh Prakhya — Tue, 22 Jan 2013 13:50:07 +0000

Connect to us ( @twitter | @facebook )

In addition to mouse events, jQuery also responds to key board events when user presses any key on the keyboard, presses key down, releases key up, input element receives focus, or input element looses focus. These events are triggered when user interacts with the keyboard. In general, these key events are bound to the HTML elements, however, the key events can be bound to any element. The event is triggered only when the element gets the focus.

The following HTML code demonstrates the key events supported by the jQuery.

also read:

If you are looking for a good book on jQuery, please buy jQuery in Action

Notice how the key code is displayed whenever we press any key on the keyboard. We are accessing property of eventObject, ‘which’ to get the key code of the key pressed. Similarly, we have an input textbox which is configured with focusin and focusout events. The focusin is triggered when we put cursor into that textbox. The focusout is triggered when we take away focus of the textbox by clicking some other widget or outside the textbox.

The following is the quick summary of the jQuery key events.

jQuery Key Events – Quick Summary

keyPress

The ‘keyPress’ event is triggered when any key is pressed on the keyboard. We can get the key code of the key pressed from the ‘which’ property of the event object as shown below:

$(document).keypress(function(eventObject){
    console.log('key pressed & key code is: ' + eventObject.which);
});

keyUp

The ‘keyUp’ event is triggered when user presses any key and releases the key on the keyboard. The ‘which’ property of the event object gives us the key code of the released key.

$(document).keyup(function(eventObject){
    console.log('key up & key code is: ' + eventObject.which);
});

keyDown

The ‘keyDown’ event is triggered when user presses any key on the keyboard. The ‘which’ property of the event object gives us the key code of the key pressed.

$(document).keydown(function(eventObject){
    console.log('key down & key code is: ' + eventObject.which);
});

focusIn

The ‘focusIn’ event is triggered when any element gets focus.

$("#focusInput").focusin(function(){
    console.log('focusInput got the focus');
});

focusOut

The ‘focusOut’ event is triggered when any element loses its focus.

$("#focusInput").focusout(function(){
    console.log('focusInput lost focus');
});

jQuery key events are great way to have control over which key user presses or releases, which HTML widget gets focus or loses focus.The ‘focusin’ event can be used to execute the business logic via AJAX call to load and render the data in the widget. The ‘focusout’ event can be used to perform validations against the widget input and alert the user about any invalid input when user moves out of the widget.

also read:

If you are looking for a good book on jQuery, please buy jQuery in Action

jQuery Event Handling – Mouse Events

Ganesh Prakhya — Sat, 19 Jan 2013 11:02:11 +0000

Connect to us ( @twitter | @facebook )

jQuery provides sophisticated event handling mechanism. jQuery responds to clicks, double clicks, mouse up and mouse down events, page load, key events like key up and down and other relevant events. We can have custom functions which are invoked and executed when any of the event triggers.

The following simple HTML file creates a DIV areaDiv and configures click, dblclick, mouseenter and mouseleave events to demonstrate how the event handling works in jQuery.

also read:

If you are looking for a good book on jQuery, please buy jQuery in Action









This is area div.

The following screen captures shows us that every time we enter into the areaDiv, the mouseenter event is triggered and displays a message to the console.

In the same way, a message is displayed to the console when we move out of the areaDiv.

Subsequently, click and dblclick events also triggered when we click and double click inside the areaDiv respectively.

NOTE: Please enable Firebug in your Firefox browser and then click on Console tab in the Firebug panel to see the log messages displayed.

The below section quickly summarizes the mouse events jQuery supports.

jQuery Mouse Events – Quick Reference

jQuery mouse events are triggered when user interacts with mouse. The following are the mouse events jQuery supports:

jQuery Event – click

Triggered when user clicks on the element.

$("#btn").click(function(){
    alert('Button Clicked');
});

jQuery Event – dblclick

Triggered when user double clicks on the element.

$("#dblClickDiv").dblclick(function(){
    alert('Double Clicked');
});

jQuery Event – mousedown

Similar to click. Triggered when mouse point is over an element and mouse button is pressed.

$("#mouseDownDiv").mousedown(function(){
    alert('Mousedown');
});

jQuery Event – mouseenter

Triggered when mouse pointer enters the element.

$("#mouseEnterDiv").mouseenter(function(){
    alert('Mouse Enter');
});

jQuery Event – mouseleave

Triggered when mouse pointer leaves the element.
$("#mouseLeaveDiv").mouseleave(function(){
    alert('Mouse Leave');
});

jQuery Event – mousemove

Triggered when mouse pointer moves inside the element.

$("#mouseMoveDiv").mousemove(function(){
    alert('Mouse Moved');
});

jQuery Event – mouseout

Similar to mouseleave event. Triggered when mouse pointer leaves an element. This event is also triggered when mouse pointer leaves any of child elements.

$("#mouseOutDiv").mouseout(function(){
    alert('Mouse Out');
});

jQuery Event – mouseover

Triggered when mouse pointer enters an element.

$("#mouseOverDiv").mouseover(function(){
    alert('Mouse Over');
});

jQuery Event – mouseup

Triggered when mouse pointer is over an element and mouse button is released.

$("#mouseUpDiv").mouseup(function(){
    alert('Mouse Up');
});

In addition to mouse events jQuery also supports key events triggered when user interacts with keyboard. We’ll discuss about jQuery key events in another article.

also read:

If you are looking for a good book on jQuery, please buy jQuery in Action