Handling Errors and Handling jQuery Events

watchposition()

The watchPosition() method returns the current location of a user and continuously updates the location while  the user is moving. It is mostly used in devices , such as GPS, which inform the users about the current location while they are travelling. The watchPosition() method takes the same parameters as the getCurrentPosition() method and returns the same object.

Consider the following code snippet for retrieving  the users location by using  the watchPosition() method:

function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(getPosition);
}
else{geo.innerHTML="Geolocation is not supported by this browser;"}
}
function  getPosition(position)
}
geo.innerHTML="Latitude: "+position.coords.latitude+"<br>Longitude: "+position.coords.logitude;
}
The preceding code snippet continuously retrieve the user location by using the watchPosition()  method while the user is travelling. 

You can also stop tracking the user location by using the clearWatch() method . This method stops the call to the watchposition() method.


Handling Errors


At times, the user may not provide the permission to access his location. This may raise an error in your website. The error may also occurs when the user checks the current location on a mobile device and the device goes out of coverage area or the network connection is timed out . As a website developer , you need to ensure that your website is able to handle errors effectively. For this, you need to consider all possible causes of  errors that can occurs in an application and can be dealt with effective error-handling technique.

To handle errors in a geolocation-enabled website, you can use the getCurrentPosition() method. The second parameter of this method is an error handler function. This function can handle the following error codes:
  • PERMISSION_DENIED: Specifies the user has declined the request to share the location.
  • POSITION_UNAVAILABLE: Specifies that the users current location cannot be retrieved.
  • TIMEOUT: Specifies that the time is given to retrieve the users location has exceeded the maximum limit.
  • UNKNOWN_ERROR: Specifies that an unknown or undefined error has occurred.
The error handler function accepts the PositionError object as an argument. This object has two properties, code and message. The code specifies the error code, and the message specifies the message that is to be displayed when an error occurs.

Consider the following code snippet for handling errors while retrieving the users location:

function showError(PositionError)
{
switch(PositionError.code)
{
case PositionError.PERMISSION_DENIED:
x.inneraHTML="User denied the request for tracking the location"
break;
case PositionError.POSITION_UNAVAILABLE:
x.innerHTML="Users location is not available"
break;
case PositionError.TIMEOUT:
x.innerHTML="The request to retrieve the user location is Time Out"
break;
case.PositionError.UNKNOWN_ERROR:
x.innerHTML="An Unknown Error occurred"
break;
}
}

The preceding code snippet creates the function, showError(), which is called when an error occurs while retrieving the users location. This functions accept an error code which is defined in the switch construct. For Example, if the user denies the access to his location, the error, User denied the request for tracking the location, is  displayed on the page.


Handling jQuery Events







In jQuery, events are handled by using functions or predefined event methods. An event method is used to detect an event and trigger a function when that event occurs. You can manipulate an element with a function or an event method.

The following table  lists some of the event methods provided by jQuery.

..................................................................................................................................................................
   Event Method                                                          

$(doucment).load(function) 

 Description 

 Used to execute a function after a document has finished loading

...................................................................................................................................................................
Event Method

$(selector).click(function)

Description

Used to execute a function on the click event of the selected element.

...................................................................................................................................................................
Event Method

$(selector)dblclick(function)

Description

Used to execute a function on the double click event of the selected element.

...................................................................................................................................................................
Event Method

$(selector).mouseenter(function)

Description

Used to execute a function when the mouse pointer is moved over  the selected element.

...................................................................................................................................................................
Event Method
$(selector).mouseleave(function)

Description

Used to execute a function when the mouse pointer is moved out of the selected element.

.................................................................................................................................................................
Event Method
$(selector).keydown(function)

Description

Used to execute a function when a key is pressed on the selected element.

...................................................................................................................................................................Event Method

$(selector).submit(function)

Description

Used to execute a function when when a form is submitted.

...................................................................................................................................................................
Event Method

$(selector).focus(function)

Description

Used to execute a function when the selected element gets focus.

..................................................................................................................................................................
Event Method

$(selector).blur(function)

Description

Used to execute a function when the selected element loses focus.

...................................................................................................................................................................
Event Method

$(selector).resize(function)

Description

Used to execute a function  when the browser window changes size.

...................................................................................................................................................................
Event Method

$(selector).unload(function)

Description

Used to execute a function when the user navigates away from the page.

..............................................................................................................................................................
Event Method
$(selector).mousedown(function)

Description

Used to execute a function when the left mouse button is pressed down on the selected element.

...................................................................................................................................................................
Event Method

$(selector).mouseup(function)

Description

Used to execute a function when the left mouse button is released from the selected element.


Consider the following code to handle jQuery events:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<SCRIPT type="text/javascript" src="jquery-1.8.3.js>
<SCRIPT type="text/javascript">
$(document).ready(function(){
$("#hide_header").click(function(){ /* selects the hide_header button and binds it to the click function*/
$("h1").hide();// hides the h1 header
});
});
</SCRIPT>
</HEAD>
<BODY>
<H1> I am the Header</H1>
<HR>
<INPUT type="button" ID="hide_header" value='Hide the header'/>
</BODY>
</HTML>


In the preceding code, jQuery recognizes a click event  when the user clicks the Hide the header button.After the event recognizes by the jQuery , the function associated with the button is executed and the <H1> element is hidden.

There are some predefined functions that can be attached to the event methods in jQuery  to enrich the visual appearance of a Web development. These functions referred to as jQuery effects.


About Codingwelove

Codingwelove
Recommended Posts × +

0 comments:

Post a Comment