JQuery ajax file upload example


<pre><script type="text/javascript">

	function ajaxFileUpload(load)
	{
		var photo = '<c:out value="${user.photopath}"/>';
		var id= '<c:out value="${user.idUser}"/>';

		if(load == false) {
			if(photo == 'null' | photo == '') {
				$("#rePhoto1").attr("src", "/kameroom/display/images/main/logo.png");
				return false;
			}
			var sr = "<%=request.getContextPath()%>/uploads/thumbnail/profile/"+ id + "/"+ photo;
			$("#rePhoto1").attr("src", sr);
			return false;
		}

		var fileType = $('#photo').val().split('.').pop().toLowerCase();

		if(fileType == '') {
			alert('Please select a photo first');
			return false;
		}
		if($.inArray(fileType, ['bmp','png','jpg','jpeg']) == -1) {
		    alert('Invalid file type, only bmp, jpg and png supported');
		    return false;
		}

		var s = '';
		$.ajaxFileUpload
		(
			{
				url:'<%=request.getContextPath()%>/profile/photoupload.k',
				secureuri:false,
				fileElementId:'photo',
				dataType: "xml",
				success: function (xml, status)
				{

					$(xml).find("p").each(function() {
						 s = "/kameroom" + $(this).find("l").text();
					});

                    var img = $("<img style=\"width: 100px!important;border: 0!important;height: auto!important;\" onclick=\"return false;\"/>").attr("src", s + "?" + new Date().getTime())
					.load(function() {
                    	$("#rePhotoMain").html('');
                     	$("#rePhotoMain").append(img);
                    });

					if(typeof(xml.error) != 'undefined')
					{
						if(xml.error != '')
						{
							alert(xml.error);
						}else
						{
							alert(xml.msg);
						}
					}
				},
				error: function (xml, status, e)
				{
					alert('contact@kameroom.nl ' + e);
				}
			}
		);

		return false;

	}

	</script>

JQuery form trigger and action



<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/WEB-INF/pages/component/meta.jsp" %>
<%@ include file="/WEB-INF/pages/component/datatable.jsp" %>
<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath()%>/display/accordion/style.css" />
<title><spring:message code="roomwanted.title" text="Advertise room wanted"/></title>
<script type="text/javascript">

function doPost(advType){
if(advType == 'room')
$('#srch').attr('action', '<%=request.getContextPath()%>/searchroom.k');
else if (advType == 'tenant')
$('#srch').attr('action', '<%=request.getContextPath()%>/searchtenant.k');
$("#srch").trigger("submit");
}
</script>
</head>
<body>

<div class="wrapper">

<%@ include file="/WEB-INF/pages/component/sidebar.jsp"%>

<div id="pageContent">


<div class="wikistyle">

<div id="sitetext">
<h1>
<a href="<%=request.getContextPath()%>" style="text-decoration: none">kameroom.nl</a>
</h1>
</div>

<div class="menu">
<%@ include file="/WEB-INF/pages/component/dropdown.jsp"%>
</div>

<div id="welcometext">
<h2 style="padding: 0 !important;"></h2>
</div>

<div id="container">
<div id="wrap">
<div id="main">
<pre class="noteyellow"><spring:message code="advert.free" text="Finding a new room or tenant here is easy and fast"/></pre>
<br/>
<form name="srchForm" id="srch" method="post">
<ul id="stepForm">
<li id="sf1">
<div>
<fieldset>
<h3 class="stepHeader">Find the room you want easily</h3>
<div class="buttonWrapper">
<center>
<input name="formNext1" type="button" class="open1 nextbutton3" value="Search a new room" onclick="doPost('room')"/>
</center>
</div>
</fieldset>
</div>
</li>
<li id="sf1">
<div>
<fieldset>
<h3 class="stepHeader">Find a new tenant for your room</h3>
<div class="buttonWrapper">
<center>
<input name="formNext1" type="button" class="open1 nextbutton3" value="Search a new tenant" onclick="doPost('tenant')"/>
</center>
</div>
</fieldset>
</div>
</li>
</ul>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

JQuery Ajax Post example


function doAjaxPost() {
 
 var email = $('#email').val();
 var subject = $('#subject').val();
 var content = $('#content').val();
 var category = $("input[name='category']:checked").val();
 var mq = $('#mq').val();
 
 if(mq!=2) {
 displayError('<spring:message code="math.error" text="Simple math questions answer is wrong" />');
 return false; 
 }

 if (email == '' | mq == '' | subject == '' | content == '') {
 displayError('<spring:message code="all.required" text="All fields are required!"/>');
 return false;
 }
 $.ajax({
 type : "POST",
 url : "/kameroom/contactInfoAJAX.k",
 dataType: "json",
 data : "email=" + email + "&mq=" + mq + "&subject="
 + subject + "&content=" + content + "&category="
 + category,
 success : function(message) { 
 if(message.length == 0) {
 displaySuccess();
 }else { 
 if(message[0] == 'srvError') { 
 alert("Error contact@kameroom.nl"); 
 }else { 
 $('#panelInfo').hide();
 $('#errorContent').html(""); 
 for(var i=0; i <message.length;i++) { 
 $('#errorContent').append(message[i] + "<br/>");
 } 
 $('#panelError').show(1000);
 }
 }
 },
 error : function(e) {
 alert('Error Please contact with contact@kameroom.nl');
 }
 });

JQuery keyup keydown example



 jQuery("#content").keydown(function(event) {
 var text = jQuery('#content').val();
 var count = 15000 - text.length;
 if ((text.length) < 15000) {
 if (count >= 0)
 $('#count').html(count);
 } else {
 if (event.keyCode == '8') { //backspace
 text = text.substring(0, 15001);
 } else {
 text = text.substring(0, 14999);
 }
 jQuery('#content').val(text);
 }
 });

 jQuery("#content").keyup(function() {
 var text = jQuery('#content').val();
 var count = 15000 - text.length;
 if (text.length <= 15000) {
 if (count >= 0)
 $('#count').html(count);
 }
 });

JQuery datepicker


<!-- jQuery date picker -->
<link rel="stylesheet" media="screen" type="text/css" href="<%=request.getContextPath()%>/display/datatable/support/themes/smoothness/jquery-ui-1.8.4.custom.css" /> 
<script type="text/javascript" src="<%=request.getContextPath()%>/display/jquery-1.3.2.min.js"></script> 
<script src="<%=request.getContextPath()%>/display/datepicker/jquery.ui.datepicker-nl.js"></script>
<script src="<%=request.getContextPath()%>/display/datepicker/jquery.ui.datepicker-en-GB.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/display/jquery-ui-1.8.16.custom.min.js"></script>

 <script>
 //datepicker locale changer 
$(function() {
 var locale = $('#l').val();
 if(locale == 'nl_NL')
 $.datepicker.setDefaults($.datepicker.regional['nl']); 
 $("#datepicker").datepicker({
 yearRange: "-111:-1", // restricting date 
 dateFormat: 'dd/mm/yy',
 changeMonth: true,
 changeYear: true
 }); 
 
});
 </script>
<!-- jQuery date picker -->

JQuery flexigrid example


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!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></title>
<script type="text/javascript" src="<%=request.getContextPath()%>/display/jquery-1.5.2.min.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath()%>/display/flexigrid/js/flexigrid.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath()%>/display/accordion/style.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/display/flexigrid/css/flexigrid.css"/>
<style>
.flexigrid div.fbutton .edit
{ 
background: url('<%=request.getContextPath()%>/display/flexigrid/css/images/magnifier.png') no-repeat center left;
}
.flexigrid div.fbutton .delete
{ 
background: url('<%=request.getContextPath()%>/display/flexigrid/css/images/close.png') no-repeat center left;
}
.titlebg
{
color: #5F5A59;
font-size: 14px;
background-color: #ddffdd;
width:100px!important; /*IE Fix Required*/
border: 1px solid #CCC!important;
background-image:url('<%=request.getContextPath()%>/display/images/main/tb.gif');
}
</style>
<script type="text/javascript">
 
 $(document).ready(function() { 
 //getting parent window val
 var id = parent.document.getElementById("idM").value;
 if(id != 'null' & id !='') {
 readCommand(parent.document.getElementById("idM").value); 
 }
 
 $('#flexme1').flexigrid(
 { 
 url: '<%=request.getContextPath()%>/profile/usermessages.k',
 type: "GET", 
 dataType: "json",
 colModel : [
 {display: 'Row ID', name : 'id', width : 100, sortable : false, align: 'left', hide: true}, 
 {display: 'From', name : 'fromuser', width : 100, sortable : true, align: 'left'},
 {display: 'To', name : 'to', width : 100, sortable : true, align: 'left'},
 {display: 'Subject', name : 'subject', width : 150, sortable : true, align: 'left'},
 {display: 'Advert', name : 'advert', width : 150, sortable : false, align: 'left'},
 {display: 'Date Send', name : 'datesend', width : 150, sortable : true, align: 'left'}
 ],
 buttons : [
 {name: 'Read Message', bclass: 'edit', onpress : doCommand},
 {name: 'Delete', bclass: 'delete', onpress : doCommand},
 {separator: true}
 ],
 sortname: "idmessage",
 sortorder: "desc",
 usepager: true,
 title: 'Your Messages',
 useRp: true,
 rp: 15,
 showTableToggleBtn: true,
 width: 680,
 height: 200,
 singleSelect: true,
 resizable: false,
 preProcess: formatData 
 }
 );
 
 });

 function doCommand(com, grid) {
 var total_count = $('.trSelected', grid).length;
 if(total_count == 0)
 alert('Please first select a message');
 $.each($('.trSelected', grid), function() {
 var id = $('td:nth-child(1) div', this);
 if(com == 'Read Message')
 readCommand(id.html());
 else
 deleteCommand(id.html());
 
 });
 }

 function formatData(data) { 
 var rows = Array(); 
 $.each(data.rows,function(i,row){ 
 //id can be mapped to any attribute of the return object in the list 
 //alert('idadvert type ' + row.idAdvertType);
 if(row.status == '1') {
 if(row.total > 1) { 
 if(row.idAdvertType == 1) {
 rows.push({id:row.idMessage, cell:[row.idMessage,row.fromU + ' (' + row.total + ')',row.toU,row.subject,'<a href="<%=request.getContextPath()%>/room/viewRoom/'+ row.idAdvert+ '/title" style="color: blue !important;text-decoration:none" target="_blank"> View Room Advert</a>',row.dateView]});
 }else if (row.idAdvertType == 2) {
 rows.push({id:row.idMessage, cell:[row.idMessage,row.fromU + ' (' + row.total + ')',row.toU,row.subject,'<a href="<%=request.getContextPath()%>/room/viewRoomWanted/'+ row.idAdvert+ '/title" style="color: blue !important;text-decoration:none" target="_blank"> View Room Wanted Advert</a>',row.dateView]}); 
 }
 } 
 else {
 if(row.idAdvertType == 1) {
 rows.push({id:row.idMessage, cell:[row.idMessage,row.fromU ,row.toU,row.subject,'<a href="<%=request.getContextPath()%>/room/viewRoom/'+ row.idAdvert+ '/title" style="color: blue !important;text-decoration:none" target="_blank"> View Room Advert</a>',row.dateView]});
 }else if (row.idAdvertType == 2) {
 rows.push({id:row.idMessage, cell:[row.idMessage,row.fromU ,row.toU,row.subject,'<a href="<%=request.getContextPath()%>/room/viewRoomWanted/'+ row.idAdvert+ '/title" style="color: blue !important;text-decoration:none" target="_blank"> View Room Wanted Advert</a>',row.dateView]}); 
 }
 } 
 } 
 else {
 if(row.total > 1) { 
 if(row.idAdvertType == 1) {
 rows.push({id:row.idMessage, cell:[row.idMessage,'<span style="color:green">' + row.fromU + ' (' + row.total + ')' + '</span>', '<span style="color:green">' + row.toU + '</span>', '<span style="color:green">' + row.subject + '</span>', '<a href="<%=request.getContextPath()%>/room/viewRoom/'+ row.idAdvert+ '/title" style="color: blue !important;text-decoration:none" target="_blank">View Room Advert</a></span>', '<span style="color:green">' +row.dateView + '</span>']});
 }else if (row.idAdvertType == 2) { 
 rows.push({id:row.idMessage, cell:[row.idMessage,'<span style="color:green">' + row.fromU + ' (' + row.total + ')' + '</span>', '<span style="color:green">' + row.toU + '</span>', '<span style="color:green">' + row.subject + '</span>', '<a href="<%=request.getContextPath()%>/room/viewRoomWanted/'+ row.idAdvert+ '/title" style="color: blue !important;text-decoration:none" target="_blank">View Room Wanted Advert</a></span>', '<span style="color:green">' +row.dateView + '</span>']}); 
 }
 } else {
 if(row.idAdvertType == 1) {
 rows.push({id:row.idMessage, cell:[row.idMessage,'<span style="color:green">' + row.fromU + '</span>', '<span style="color:green">' + row.toU + '</span>', '<span style="color:green">' + row.subject + '</span>', '<a href="<%=request.getContextPath()%>/room/viewRoom/'+ row.idAdvert+ '/title" style="color: blue !important;text-decoration:none" target="_blank">View Room Advert</a>', '<span style="color:green">' +row.dateView + '</span>']}); 
 }else if (row.idAdvertType == 2) { 
 rows.push({id:row.idMessage, cell:[row.idMessage,'<span style="color:green">' + row.fromU + '</span>', '<span style="color:green">' + row.toU + '</span>', '<span style="color:green">' + row.subject + '</span>', '<a href="<%=request.getContextPath()%>/room/viewRoomWanted/'+ row.idAdvert+ '/title" style="color: blue !important;text-decoration:none" target="_blank">View Room Wanted Advert</a>', '<span style="color:green">' +row.dateView + '</span>']}); 
 }
 
 }
 
 } 
 }); 
 return { 
 total:data.total, 
 page:data.page, 
 rows:rows 
 }; 
 } 
</script>
</head>
<body>
 
<table id="flexme1" style="display:none">
<tr><td></td></tr>
</table>
<div id="panelLoading" style="display:none" > 
 <pre style="font-size: 12px;color:green;" ><b>Loading...</b></pre>
</div>
<div id="panelSuccess" style="display:none" > 
 <pre style="font-size: 11px;color:green;" ><b>Message has been sent successfully.</b></pre>
</div>
<table id="messagesTable" border="1px" style="width: 680px;margin-top: 10px;border-color: #568C00;border: thin;" >
 <tbody id="fromTo" style="display: none;"> 
 <tr>
 <td class="titlebg" >From:</td>
 <td style="color: #568C00;font-size: 14px;border: 1px solid #CCC!important;"><span id="from"></span></td></tr> 
 <tr>
 <td class="titlebg" >To:</td>
 <td style="color: #568C00;font-size: 14px;border: 1px solid #CCC!important;"><span id="to"></span>
 <input type="hidden" id="idUser">
 <input type="hidden" id="idTenant">
 <input type="hidden" id="idAdvert">
 <input type="hidden" id="fromU">
 <input type="hidden" id="toU">
 </td>
 </tr>
 </tbody>
 <tbody id="iteratingBody"> 
 </tbody>
 <tr>
 <td colspan="2" style="height:10px;border: 0px "></td>
 </tr>
 <tbody id="reply" style="display: none;"> 
 <tr> 
 <td colspan="2" align="left" style="border: 0px "> 
 <table>
 <tr>
 <td style="color: #568C00;border: 0px;font-size: 14px;" width="60px!important">Subject:</td>
 <td style="color: #568C00;border: 0px;font-size: 14px;" align="left"><input style="width:600px!important;background-color: #FFF6AF;" id="subject" type="text"/></td>
 </tr>
 <tr>
 <td style="color: #568C00;border: 0px;font-size: 14px;" width="60px!important">Content:</td>
 <td style="color: #568C00;border: 0px;font-size: 14px;" >
 <textarea id="content" style="resize: none;width:600px;height:200px;background-color: #FFF6AF;"></textarea>
 </td>
 </tr> 
 </table>
 </td>
 <tr>
 <td colspan="2" align="center" style="color: #568C00;border: 0px">
 <input type="hidden" id="l" value="<%=response.getLocale()%>"/>
 <div id="panelInfo" style="display: none"> 
 <pre id="panelInfoPre"><b>Message is sending, please wait...</b></pre>
 </div>
 <div id="replyButton">
 <input id="searchButton2" name="formNext1" type="button" class="searchbutton" value="Reply" onclick="doAjaxPost()"/>
 </div>
 </td>
 </tr>
 </tbody>
 </table>
</body>
</html>