CODEWITHSUNDEEP
jqueryajaxservlets
user1549053
user1549053

Reputation: 109

simple AJAX with jquery

I need to do something rather simple:

I have a servlet that gets a request, then contacts a database, gets the information from it and displays it as an HTML table (so far, all this is working perfectly). This is the command in the servlet:

RequestDispatcher requestDispatcher = req.getRequestDispatcher("index.jsp");
requestDispatcher.forward(req, resp);

index.jsp is where I wrote the HTML and javascript to display the data.

Now, what I need is for that data to be refreshed every 30 seconds or so via AJAX, so that I don't reload the whole page. Also, I should use jquery for this whole operation.

What is the easiest way to do this? I have been looking at some examples around the site, but I haven't managed to get them to work, so I'm posting my own question. I don't need it to be fancy, I just want it to display my table and refresh the data in it every 30 seconds (in case someone put in some new data in the database in the meantime)...

Thank you all! :)

Edit:

Here's the entire 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:

<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>

Now, I want this whole table part to be reloaded (along with the new data that might have been put into the database) every 30 seconds and displayed as html, readable by the browser.

Upvotes: 0

Views: 1403

Answers (2)

Rahul P
Rahul P

Reputation: 1113

Add your jquery ajax code to one of the javascript function say

drawDataTable();

and then set interval for that 

setInterval(drawDataTable, 30000); //30 sec

update
again posting exact code which will explain my point more clearly.
Still you don't understand it please post your code first.

<script type="text/javascript">

function drawDataTable(){
 $.ajax({
      url : "NameServlet",
      dataType : 'json',
      error : function(){
      alert("Error Occured");
      },
      success : function(data) {
      //here you will get your data from servlet
      //set data to your table  
      }     
    });
}

setInterval(drawDataTable, 30000);

<script>

Upvotes: 2

rai.skumar
rai.skumar

Reputation: 10675

As you want to make a request every 30 seconds so your approach to use AJAX is perfect.

You will have to send a dummy request every 30 seconds to the same servlet; and servlet can send back response in JSON format. Ajax call using jquery

Also you can use Jquery(or plain javascript) timer for sending request at regular intervals.

So the way it will work is : browser will send request to the servlet every 30 seconds and after receiving the request; servlet will perform appropriate business logic and then return the response back to client assynchronously.

Upvotes: 0

Related Questions