The Example for show and hide a div in java jquery (java server page) web applicaion. Event triggering in java web application using jquery
The program will show and hide the content div, on user selecting a particular menu. Here i used only one jsp page where all the div presents. This web application demonstrate a simple jquery.hide() and jquery.show() method. JQuery is powerful API that provides triggering of event
index page : index.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Jquery trigger event in java web application</title>
</head>
<body>
<jsp:forward page="/jsp/home.jsp"></jsp:forward>
</body>
</html>
The index page just redirect to request to home page (ie,home.jsp)
here i used JSP tags to forward the request
The above example shows the working of JSP tags
home page : home.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title> Java web application example </title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script>
$(document).ready(function(){
$("#mail").click(function(){
$("#smsDiv").hide();
$("#monitorDiv").hide();
$("#adminDiv").hide();
$("#mailDiv").show();
});
$("#sms").click(function(){
$("#mailDiv").hide();
$("#monitorDiv").hide();
$("#adminDiv").hide();
$("#smsDiv").show();
});
$("#monitor").click(function(){
$("#mailDiv").hide();
$("#smsDiv").hide();
$("#adminDiv").hide();
$("#monitorDiv").show();
});
$("#admin").click(function(){
$("#mailDiv").hide();
$("#smsDiv").hide();
$("#monitorDiv").hide();
$("#adminDiv").show();
});
});
</script>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b> <input type="button" name="smsBtn" value="sendsms" id="sms"> </b><br>
<b> <input type="button" name="mailBtn" value="sendmail" id="mail"> </b><br>
<b> <input type="button" name="mntrBtn" value="monitor" id="monitor"> </b><br>
<b> <input type="button" name="adminBtn" value="admin" id="admin"> </b>
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
<div id="smsDiv"> This is sms div</div>
<div id="mailDiv"> this is mail div </div>
<div id="monitorDiv"> This is monitoring div </div>
<div id="adminDiv"> This is admin div </div>
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
http://javabelazy.blogspot.in/</div>
</div>
</body>
</html>
---------------------------------------------------------
deployment descriptor : web.xml file
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>Java jquery web applicaion</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
<welcome-file>worldcupfootball.html</welcome-file>
<welcome-file>brazil.htm</welcome-file>
</welcome-file-list>
</web-app>
you need to download jquery file : jquery-1.11.0.js and paste it js folder
jquery plugins
structure of web applicaion
 |
| web application file struture |
This example let you to know how to use jquery inside a java web application.
+Vipin Raj
http://belazy.blog.com/
No comments:
Post a Comment
Your feedback may help others !!!