Sunday 27 February 2011

Multi Actions with JQuery - 1

This is a small tutorial about a simple multi-button JQuery
application. The first part will demonstarte how to handle
multi buttons and the second part will demonstrate:
1. How to handle multi actions
2. How to handle an action with AJAX and a servlet.

The multi-button simple example follows:

JQMultiButton.jsp
-----------------
<%--
Document : index
Created on : 24.Sub.2011, 18:23:21
Author : Ali Riza SARAL
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>ARS's Simple JQ CRUD</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/JQmultiButton.js"></script>
<%
System.out.println("index.jsp JSP script began here.");
%>
<SCRIPT>
function InitScr() {
alert ("Merhaba from Ali R+ with best wishes! ");
}

</SCRIPT>
</head>
<body style="background-color:yellow" onLoad="InitScr()">


<h1>The Simplest JQuery CRUD Application</h1>

<br />

<form name="theDetail" action="" method="get">
<input type="hidden" name="id"/><br />
First name: <input type="text" id ="name" name="name"/><br />
Last name : <input type="text" id="last" name="last"/><br />
Hobby : <input type="text" id="hobby" name="hobby"/><br />
<br />
<INPUT TYPE="button" id="New" VALUE="New">
<INPUT TYPE="button" id="Save" VALUE="Save">
<INPUT TYPE="button" id="Delete" VALUE="Delete">
<INPUT TYPE="button" id="Next" VALUE="Next">
<INPUT TYPE="button" id="Prev" VALUE="Prev">
<INPUT TYPE="button" id="List" VALUE="List">
</form>
</body>
</html>



JQmultiButton.js
----------------
$(document).ready(function() {
// Handler for .ready() called.

$(function() {
$("input#New").click(function() {
alert('New is clicked');
})
})

$(function() {
$("input#Save").click(function() {
alert('Save is clicked');
})
})

$(function() {
$("input#Delete").click(function() {
alert('Delete is clicked');
})
})
$(function() {
$("input#Next").click(function() {
alert('Next is clicked');
})
})

$(function() {
$("input#Prev").click(function() {
alert('Prev is clicked');
})
})

$(function() {
$("input#List").click(function() {
alert('List is clicked');
})
})


});
Posted by at