CODEWITHSUNDEEP
javajsp
Arun
Arun

Reputation: 140

How to refresh only a division of jsp page

I am developing a web application and I have a jsp page in which I have a table and few other things.All I want is to refresh the contents of table every 5 seconds.Below is my code of jsp page.Can anyone help me solve my problem.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"       "http://www.w3.org/TR/html4/loose.dtd">

<%@ page language="java" %>
<%@ page import="java.sql.*" %>
<%@ page import="java.util.Calendar" %>
<%@ page import="java.text.DateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<HTML>
<HEAD>
    <TITLE>Welcome to Crevavi </TITLE>

</HEAD>

<div style="width:950px; height:900; padding:10px; border:10px ridge black;">
<body bgcolor="white"; border="3px">
<img src="Crevavi_Plain.jpg" background-color="white"  width="100" height="25" style=float:right;/>
<h1 style=margin-left:2px;><font size="5">  Crevavi  Web  Application</font></h1>
<hr color="black">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var auto = setInterval(    function ()
         {
              $("#result").load("NewTable.html #result");
         }, 5000); // refresh every 5000 milliseconds
        </script>

//I want only the below division to refresh every 5 seconds.



  <div id="result" style="width:930px; height:500; padding:5px; border:5px ridge black;">
 <% 
    int rowCount = 0;
    /*Calendar cal = Calendar.getInstance();
    Date date1=cal.getTime();
    DateFormat dateFormat = new SimpleDateFormat("dd/MM/yy,HH:mm:ss");
    String formattedDate=dateFormat.format(date1);
    System.out.println("Current time of the day using Calendar - 24 hour format: "+ formattedDate);
    String[] values = formattedDate.split(",");
    String date = values[0];
    String time = values[1];*/

Class.forName("com.mysql.jdbc.Driver");
        Connection connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/students","root","root");

        Statement statement = connection.createStatement() ;

       /* String sql = "INSERT INTO TEXTDATA (MachID,Date,Time,Text1,Text2,Text3,Text4,Text5,Text6,Text7,Text8,Text9,Text10,Text11,Text12) VALUES  ('123','"+date+"','"+time+"','My','hello','thankyou','welcome','visit again','haha','good morning','sweet dreams','hi','hello','night','work')";
          ((java.sql.Statement) statement).executeUpdate(sql);*/

        ResultSet resultset = statement.executeQuery("select * from textdata order by Date desc, Time desc"); 
        while(resultset.next()){
            rowCount++;
        }
        int firstrow = rowCount-10;
        System.out.println(firstrow);
        if(rowCount > 10){
         resultset = statement.executeQuery("select * from textdata where Rowcount>'"+firstrow+"' order by Date desc, Time desc");  
        }else{
         resultset = statement.executeQuery("select * from textdata order by Date desc, Time desc");    
        }

    %>



    <TABLE BORDER="1">
        <TR>
            <TH>Mach ID</TH>
            <TH>Date</TH>
            <TH>Time</TH>
            <TH>Text1</TH>
            <TH>Text2</TH>
            <TH>Text3</TH>
            <TH>Text4</TH>
            <TH>Text5</TH>
            <TH>Text6</TH>
            <TH>Text7</TH>
            <TH>Text8</TH>
            <TH>Text9</TH>
            <TH>Text10</TH>
            <TH>Text11</TH>
            <TH>Text12</TH>
        </TR>
        <% while(resultset.next()){ %>

        <TR>
            <TD> <%= resultset.getInt(1) %></td>
            <TD> <%= resultset.getString(2) %></TD>
            <TD> <%= resultset.getString(3) %></TD>
            <TD> <%= resultset.getString(4) %></TD>
            <TD> <%= resultset.getString(5) %></TD>
            <TD> <%= resultset.getString(6) %></TD>
            <TD> <%= resultset.getString(7) %></TD>
            <TD> <%= resultset.getString(8) %></TD>
            <TD> <%= resultset.getString(9) %></TD>
            <TD> <%= resultset.getString(10) %></TD>
            <TD> <%= resultset.getString(11) %></TD>
            <TD> <%= resultset.getString(12) %></TD>
            <TD> <%= resultset.getString(13) %></TD>
            <TD> <%= resultset.getString(14) %></TD>
            <TD> <%= resultset.getString(15) %></TD>

        </TR>
        <% } %>
    </TABLE>
    </div>
    </br>

    <form name = "Field_Details" action = "ServletApp" method= "get">
    <fieldset style="float: center; width:900px; height: 75px;background-color:ivory; border-color:black;">
    <font size = "2">Output Field :</font> <input type="text" name="Text1" maxlength="50"  style="height:15px; width:100px; border-color:black"><font size = "2"></font>
    <font size = "2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MachId :</font> <input type="text" name="Text2" maxlength="15"  style="height:15px; width:100px; border-color:black"><font size = "2"></font>
    <font size = "2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;From Date(dd/mm/yy) :</font> <input type="text" name="Text3" maxlength="8"  style="height:15px; width:100px; border-color:black"><font size = "2"></font>
    <font size = "2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To Date(dd/mm/yy) :</font> <input type="text" name="Text4" maxlength="8"  style="height:15px; width:100px; border-color:black"><font size = "2"></font><br><br>
    <input type= "submit" value="Send" style="height:30px; width:80px; margin-left:15px">
    <input type= "submit" value="Search" style="height:30px; width:80px; margin-left:700px" onclick="form.action='FirstServlet';">

</BODY>
</HTML>

Upvotes: 1

Views: 4912

Answers (2)

Arun
Arun

Reputation: 140

I altered code as below in my NewFile.jsp 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
        var auto = setInterval(    function refresh()
         {
              $("#result").load("DemoFile.jsp");

         }, 5000); // refresh every 5000 milliseconds
         refresh();
</script>

then created new jsp file named DemoFile.jsp and copied part of code of NewFile.jsp division which I wanted to refresh.

Upvotes: 0

ewanc
ewanc

Reputation: 1334

JSP is a server side technology, which means that if you want to refresh the page you will have to perform a request to the server which will return the new page. It is not possible to just return part of a page through normal JSP mechanisms.

If you want to just refresh the table you will need to use javascript to make an ajax call to the server to get the data you need, and repopulate the table with this data.

Upvotes: 2

Related Questions