Sunday, 20 February 2011

JQ Forms with AJAX-JSP6

This example demonstrates the use of ajaxForm with HTML data.

Sample6.jsp
-----------
<%--
Document : sample6.jsp
Created on : 19.Şub.2011, 21:09:26
Originally : belongs to "jQuery Form Plugin"
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>JSP Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

<script type="text/javascript">
// prepare the form when the DOM is ready
$(document).ready(function() {
// bind form using ajaxForm
$('#htmlForm').ajaxForm({
// target identifies the element(s) to update with the server response
target: '#htmlExampleTarget',

// success identifies the function to invoke when the server response
// has been received; here we apply a fade-in effect to the new content
success: function() {
$('#htmlExampleTarget').fadeIn('slow');
}
});
});
</script>
</head>
<body>

<div id="sample6">
<p />
This page shows how to handle HTML data returned from the server.
<p />
The form below submits a message to the server and the server
echos it back in an HTML div. The response is added to this
page in the <code class="inline">htmlExampleTarget</code> div below.
<br />
<form id="htmlForm" action="html-echo.jsp" method="post"><div>
Message: <input type="text" name="message" value="Hello HTML" />
<input type="submit" value="Echo as HTML" />
</div></form>

<br />
<h3>htmlExampleTarget (output will be added below):</h3>
<div id="htmlExampleTarget"></div>
</div>


</body>
</html>


html-echo.jsp
-------------
<%
out.print("<div style=\"background-color:#ffa; padding:20px\">" + request.getParameter("message") + "</div>");
%>
Posted by at