</div>
</div>
<div class="grid--cell mb0 mt8">Closed <span title="2012-10-19 00:20:58Z" class="relativetime">7 years ago</span>.</div>
</div>
</aside>
Possible Duplicate:
How to use Servlets and Ajax?
I have the following code:
public class IndexServlet extends HttpServlet {
MoodService moodService;
public IndexServlet() {
moodService = new MoodService();
}
/**
* Accepts the request and sends it to the dispatcher which takes the database data and presents it as HTML
*/
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
List<Mood> moodList = moodService.findLastMoods(25); //my way of getting data from database
req.setAttribute("moodList", moodList);
RequestDispatcher requestDispatcher =req.getRequestDispatcher("index.jsp");
requestDispatcher.forward(req, resp);
}
}
and the index.jsp file:
<html>
<head>
<title>Previous 25 entries:</title>
<style type="text/css">
#container {width:1200px; margin-left:auto; margin-right: auto;}
#tableheader {width:900px; text-align: center;}
.field {text-align:center; width:300px;}
</style>
</head>
<body style="background-color: black;">
<div id="container">
<table border="1" bordercolor="#FFCC00" width="900" height="80" cellpadding="3" cellspacing="3" style="border-top-left-radius: 15px; border-top-right-radius: 15px; text-align: center; margin-left:auto; margin-right: auto; background-color:#FFFFCC; font-size: 33px; font-family: Monotype Corsiva ">
<tr>
<td style="border-top-left-radius: 10px; border-top-right-radius: 10px;">PREVIOUS 25 ENTRIES:</td>
</tr>
</table>
<%
List<Mood> moodList = (List<Mood>) request.getAttribute("moodList");
for (Mood mood : moodList) {
Integer a = mood.getMoodId();
String moodId = new String();
switch (a) {
case 1:
moodId = "Happy";
break;
case 2:
moodId = "Sad";
break;
case 3:
moodId = "Lonely";
break;
case 4:
moodId = "Angry";
break;
case 5:
moodId = "In Love";
break;
case 6:
moodId = "Content";
break;
} %>
<table id="table" border="1" bordercolor="#FFCC00" width="900" cellpadding="3" cellspacing="3" style="text-align: center; margin-left:auto; margin-right: auto; background-color:#FFFFCC;">
<tr>
<td class="field"> <%=mood.getUserId()%></td>
<td class="field"> <%=moodId%></td>
<%Date date = new Date(mood.getTime());
SimpleDateFormat sdf = new SimpleDateFormat("dd:MM:yyyy hh:mm:ss");
String sDate = sdf.format(date);
%>
<td class="field"> <%=sDate%></td>
</tr>
</table>
<%
}
%>
</div>
</body>
</html>
My problem is:
How do I implement AJAX into this so that every 30 seconds, the table is refreshed with the new data, showing the last 25 entries into the database? I would prefer to use jquery, seeing how everything I did with it so far was far simpler than doing it without jquery...
I know nothing about AJAX, this is literally my first time working with it (I am just starting with my learning), so I would really appreciate it if someone would give me a step-by-step tutorial on how to do this. (or at least show me the code that would do what I want, I could reverse engineer it, probably :) )
MoodService is my own class that deals with the database (how it works is irrelevant to this situation, the only important thing is that I need to reload the data into the table after I load the site).
Thanks for the help! :)
</div>
I suggest you to take a look at this really simple and useful tutorial:
There are 3 things you would need:
Make an AJAX call again after 30 seconds, empty the table you already have in your JSP and paint it again with the new response.
$.ajax({ type: "POST", url: "some.php", data: { name: "John", location: "Boston" } }).done(function( msg ) { alert( "Data Saved: " + msg ); });
Guide here: http://www.mkyong.com/java/jackson-streaming-api-to-read-and-write-json/
For painting your page, you need to create elements in Javascript. You can do that by using .append(), etc from jQuery.
I'm having a hard time formatting it, can anybody help please?