• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JQuery Error Event Example

April 24, 2014 //  by Krishna Srinivasan//  Leave a Comment

The error event represents information about event which are related to errors in scripts or in files. The error event occurs when there is an error in loading or unloading elements. It binds an event handler to “error” event. For example, when you are loading an image, if you missed writing the correct name of image or if you didn’t write the source path correctly, then error event will trigger and display an error message.

The error event is sent to elements which is referenced by document and not loaded correctly by browser. If element was not loaded correctly then the error event is called. It triggers the error event or attaches function when an error event occurs. The event handler for the error event must be attached prior to the browser firing of the error event.

JQuery Error() Syntax

$(selector).error(function)

The error event has parameter called function which is optional parameter which defines function to run when event occurs or function executes when the event is triggered.

JQuery Error() Example

<!DOCTYPE html>
<head>
<title>Error Event</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
span {
   padding: 10px;
   color: red;
}
</style>

<h2>JQuery Error Event Example</h2>
<script type="text/javascript">
   $(document).ready(function() {
      $("img").load(function() {
        $("#myimage").text("Image uploaded successfully!!!");
       });
      $("img").error(function() {
        $("#myimage").text("Error in loading image!!!");
      });
   });
</script>
<body>
   <img src="Sunset.gif" width="200" height="130" /><br>
   <span id="myimage"></span>
</body>
</html>
 
  • As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
  • $(“img”).load(function()) line loads the specified image. It attaches event handler to the load event.
  • $(“img”).error(function()) line triggers the error event when an element encounters an error.
  • <span id=”myimage”> used to group inline elements in the document. It is useful when we are using style sheets to assign set of representational attributes.
  • As shown above, in image tag we are setting source path of image. If you mention correct name of the image or path, it will display “Image loaded successfully” or else it will display “Error in loading image” by referring span id “myimage”.
  • We are using CSS styles for text to be displayed and these styles are specified in span which determines how the text should be display in the browser.

When you run the above example, you would get the following output :

  • JQuery Error Event Demo

ErrorEventExample

 

Category: jQueryTag: JQuery Events

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: «jquery JQuery Ready Event Example
Next Post: Static Initializer In Java »

Reader Interactions

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact