May 02, 2014

show and hide a div in java web application using jquery

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>




Insert title here




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 structure
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 !!!

Facebook comments