C C++ Java Data Structure Python JavaScript CSS Ajax PL/SQL PHP Puzzles C programs C++ programs Java programs

Home » Java programming language

Comment Box design in Bootstrap using AJAX, MYSQL and JSP

By: Vanka Manikanth, on 02 MAR 2017

Learn: How to design comment box in Bootstrap using AJAX, MYSQL and JSP (Java Server Page)?

If you are new to AJAX, then read this post first (AJAX Request in JSP - An Example).

This is a Comment Box Design using AJAX, so without any reloading of the page the user can post their comment.

Index.jsp

Here we have created the HttpRequest object and values which are input by the user, sent via the URL.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>AJAX WITH JSP</title>
		<link rel="stylesheet" href="css/bootstrap.css">
	</head>
	<body>
		<div class="container-fluid">
			<div class="panel-primary">
				<div class="panel-heading">
					<h1 class="panel-title">COMMENT BOX USING AJAX THROUGH JSP</h1>
				</div>
				<div class="panel-body">
					<div class="form-group col-md-4">
						<label>YOUR NAME</label>
						<input class ="form-control" type="text" id="username">
					</div>
					<div class="clearfix"></div>
					<div class="form-group col-md-4">
						<label>YOUR EMAIL</label>
						<input class ="form-control" type="email" name="email" id="email" required="required">
					</div>
					<div class="clearfix"></div>
					<div class="form-group col-md-4">
						<label>TOPIC</label>
						<select name="topic" id="topic" class ="form-control" required="required">
							<option value="">Select</option>
							<option value="Programming Languages">Programming Languages</option>
							<option value="Articles">Articles</option>
							<option value="CodeSnippets">CodeSnippets</option>
							<option value="Others">Others</option>
						</select>
					</div>
					<div class="clearfix"></div>

					<div class="form-group col-md-4">
						<label>YOUR COMMENT</label>
						<textarea class="form-control" rows="8" id="comment" required="required"></textarea>
					</div>
					<div class="clearfix"></div>
					<div class="form-group col-md-6">
						<button class="btn btn-primary" type="button" onclick="loadAjax()">POST</button>
					</div>
				</div>
			</div>
			<p id="print"></p>
		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.js"></script>
		<script type="text/javascript">

		function loadAjax(){
			var username= document.getElementById("username").value;
			var email= document.getElementById("email").value;
			var topic= document.getElementById("topic").value;
			var comment= document.getElementById("comment").value;
			if(username.trim() =="" || email.trim()=="" || topic.trim() =="" || comment.trim()==""){
			alert("All fields are Required");
			return false;
			}

			
			var url="ajaxrequestPage.jsp?username="+username +"&email="+email+"&topic="+topic +"&comment="+comment;



			if(window.XMLHttpRequest){
				
				request = new XMLHttpRequest();
				
			}else if(window.ActiveXObject){
				
				request = new ActiveXObject("Microsoft.XMLHTTP");
			}			
			try{
				request.onreadystatechange=sendInfo;
				request.open("POST",url,true);
				request.send();
				
			}catch(e){
			document.write(e);
			}			
		}

		function sendInfo(){
			var p =		document.getElementById("print");

			if(request.readyState ==1){
				var text = request.responseText;
				p.innerHTML="Please Wait...";
				console.log("1");
			}

			if(request.readyState ==2){
				var text = request.responseText;
				console.log("2");				
			}
			if(request.readyState ==3){
				var text = request.responseText;
				console.log("3");				
			}
			if(request.readyState ==4){
				var text = request.responseText;
				p.innerHTML=" Your Comment has been Posted  "+text;
			}
		}
		</script>
	</body>
</html>





ajaxRequestPage.jsp

Here we are handling the request parameters and pushing the values to database, soon as the executeUpdate() we are displaying the values.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1" import ="java.sql.*"%>
<!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>AJAX REQUEST</title>
	<link rel="stylesheet" href="css/bootstrap.css">
	</head>
	<body>
		<div class="container-fluid">
			<%
				String username =request.getParameter("username");
				String email =request.getParameter("email");
				String topic =request.getParameter("topic");
				String comment =request.getParameter("comment");
			%>
			<div class="panel-primary">
				<div class="panel-heading">
					<h4 class="panel-title">COMMENTS</h4>
				</div>
				<div class="panel-body">
					<%
					String message="";
					try {			
						Class.forName("com.mysql.jdbc.Driver");
						Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/MYDB","root","new_password");	
						PreparedStatement ps = con.prepareStatement("INSERT INTO USERDETAILS VALUES(?,?,?,?);");
						ps.setString(1, username);
						ps.setString(2, email);
						ps.setString(3, topic);
						ps.setString(4, comment);
						ps.executeUpdate();
						%>
						<strong><big>USER NAME IS : <%=username %><br>
						EMAIL IS : <%=email %><br>
						ON TOPIC :<%=topic %><br>
						YOUR COMMENT :<%=comment %>
						</strong>
						<%con.close();
					}catch (Exception e) {
						System.out.println(e);		
					}
					%>
				</div>
			</div>
		</div>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/bootstrap.js"></script>
	</body>
</html>

Output:

comment box code using ajax, mysql and jsp

comment box code using ajax, mysql and jsp

COMMENTS