I have a basic html file which is attached to a java program. This java program updates the contents of part of the HTML file whenever the page is refreshed. I want to refresh only that part of the page after each interval of time. I can place the part I would like to refresh in a div, but I am not sure how to refresh only the contents of the div. Any help would be appreciated. Thank you.
Use Ajax for this.
Build a function that will fetch the current page via ajax, but not the whole page, just the div in question from the server. The data will then (again via jQuery) be put inside the same div in question and replace old content with new one.
Relevant function:
http://api.jquery.com/load/
e.g.
$('#thisdiv').load(document.URL + ' #thisdiv');
Note, load automatically replaces content. Be sure to include a space before the id selector.
Let's assume that you have 2 divs inside of your html file.
<div id="div1">some text</div>
<div id="div2">some other text</div>
The java program itself can't update the content of the html file because the html is related to the client, meanwhile java is related to the back-end.
You can, however, communicate between the server (the back-end) and the client.
What we're talking about is AJAX, which you achieve using JavaScript, I recommend using jQuery which is a common JavaScript library.
Let's assume you want to refresh the page every constant interval, then you can use the interval function to repeat the same action every x time.
setInterval(function()
{
alert("hi");
}, 30000);
You could also do it like this:
setTimeout(foo, 30000);
Whereea foo is a function.
Instead of the alert("hi") you can perform the AJAX request, which sends a request to the server and receives some information (for example the new text) which you can use to load into the div.
A classic AJAX looks like this:
var fetch = true;
var url = 'someurl.java';
$.ajax(
{
// Post the variable fetch to url.
type : 'post',
url : url,
dataType : 'json', // expected returned data format.
data :
{
'fetch' : fetch // You might want to indicate what you're requesting.
},
success : function(data)
{
// This happens AFTER the backend has returned an JSON array (or other object type)
var res1, res2;
for(var i = 0; i < data.length; i++)
{
// Parse through the JSON array which was returned.
// A proper error handling should be added here (check if
// everything went successful or not)
res1 = data[i].res1;
res2 = data[i].res2;
// Do something with the returned data
$('#div1').html(res1);
}
},
complete : function(data)
{
// do something, not critical.
}
});
Wherea the backend is able to receive POST'ed data and is able to return a data object of information, for example (and very preferrable) JSON, there are many tutorials out there with how to do so, GSON from Google is something that I used a while back, you could take a look into it.
I'm not professional with Java POST receiving and JSON returning of that sort so I'm not going to give you an example with that but I hope this is a decent start.
You need to do that on the client side for instance with jQuery.
Let's say you want to retrieve HTML into div with ID mydiv:
<h1>My page</h1>
<div id="mydiv">
<h2>This div is updated</h2>
</div>
You can update this part of the page with jQuery as follows:
$.get('/api/mydiv', function(data) {
$('#mydiv').html(data);
});
In the server-side you need to implement handler for requests coming to /api/mydiv and return the fragment of HTML that goes inside mydiv.
See this Fiddle I made for you for a fun example using jQuery get with JSON response data: http://jsfiddle.net/t35F9/1/
Usefetch and innerHTML to load div content
let url="https://server.test-cors.org/server?id=2934825&enable=true&status=200&credentials=false&methods=GET"
async function refresh() {
btn.disabled = true;
dynamicPart.innerHTML = "Loading..."
dynamicPart.innerHTML = await(await fetch(url)).text();
setTimeout(refresh,2000);
}
<div id="staticPart">
Here is static part of page
<button id="btn" onclick="refresh()">
Click here to start refreshing every 2s
</button>
</div>
<div id="dynamicPart">Dynamic part</div>
$.ajax(), $.get(), $.post(), $.load() functions of jQuery internally send XML HTTP request.
among these the load() is only dedicated for a particular DOM Element. See jQuery Ajax Doc. A details Q.A. on these are Here .
I use the following to update data from include files in my divs, this requires jQuery, but is by far the best way I have seen and does not mess with focus. Full working code:
Include jQuery in your code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Create the following function:
<script type="text/javascript">
function loadcontent() {
$("#test").load("test.html");
//add more lines / divs
}
</script>
Load the function after the page has loaded; and refresh:
<script type="text/javascript">
$( document ).ready(function() {
loadcontent();
});
setInterval("loadcontent();",120000);
</script>
The interval is in ms, 120000 = 2 minutes.
Use the ID you set in the function in your divs, these must be unique:
<div id="test"></div><br>
Here is my function. I am trying to get the data from the JSP page below. Both files are at the same location. What is my mistake?
sample.js(included in some file):
function getUnits(){
$.ajax({
url:"../js/addunits.jsp",
success: function(returndata){
alert(returndata);
}
});
}
JSP Page addunits.jsp:
<%
out.print("hi");
>%
In a HTML page, I have a select list.
On change, this function getunits will be called.
$("#select").change(function() {
getUnits();
var e = document.getElementById("select");
var SelValue = e.options[e.selectedIndex].text;
document.getElementById('crs').innerHTML = SelValue;
});
You forgot to flush a buffer.
<%
out.print("hi");
out.flush();
%>
EDIT:
It was an assumption at the first place in case if you have a success status code for the ajax call and it might be in particular scenario like yours but not in all cases because if you used that javascript included in some file, then you might make the same mistake twice. When building some URL on the page don't use a relative path in the code, especially if the page is dispatched/included from different places. Next in the absolute path you should include a context path either ${pageContext.request.contextPath} or use JSTL's <c:url> tag. You can do it for loading sample.js but not inside it because you can use the JSP stuff only on JSP page. So, you can build the URL in the JSP and pass it as parameter to js function like that
sample.js:(included in some file)
function getUnits(theUrl){
$.ajax({
url: theUrl,
success: function(returndata){
alert(returndata);
}
});
}
So, in JSP page (you should use jsp folder where you should keep JSP pages) use
<script>
...
getUnits('${pageContext.request.contextPath}/jsp/addunits.jsp');
...
</script>
How can pass json values from jsp to javascript as object via ajax?
I can not use global js variables in jsp because this will lead to json content to be visible in page's source
Here is the scenario that I want to achieve:
url of jsp is opened in browser.
Data is being created in scriptlet and coverted to JSON format
json is "sent" to javascript as object
From above scenario, i understand that javascript must initiate the ajax call to jsp.
The issue with this, that jsp's code will be invoked 2 times:
When page is opened in browser - data is prepared
on each ajax call same code will be called again
Constrains: No jquery, no other libs, no servlets, no additional jsps. :(
EDIT:
There is additional problem, I need to pass multiple json objects to javascript.
I wont be able to do it with response.getWriter().write();
I don't think concatenating all json objects and sending is the correct solution.
The parsing of the received object in javascript http.responseText will be overwhelming.
Why do you need ajax here? If you know that you need to populate some things from server onto jsp page you can do that through scriplets itself:
EX
<%# page import="com.mypackage.PersonDAO" %>
<html>
<body>
<table>
<th>Name</th><th>Email</th><th>Contact</th>
<%
List<Person> myList = PersonDAO.getAllPersons();
for(Person person:myList)
{
%>
<tr>
<td><%=person.getName()%></td>
<td><%=person.getEmail()%></td>
<td><%=person.getContact()%></td>
</tr>
<%}%>
</table>
</body>
</html>
This is a very simple example. You can do more complex things using JSTL.. :)
So there is no jquery, no Servlets, no ajax and no extra jsp's :)
UPDATE
Since you want data in your javascript before page loads you can use jQuery's holdReady() method.
$.holdReady( true );
$.get( url, function() {
// Perform something
$.holdReady( false );
});
See but all modern browsers have developer tools like firebug for mozilla, so any ajax call made will be trapped by them. The only way you can secure them is my encrypting them.. which will complicate things for you... IF you can explain the scenario you are trying to implement may be I can come up with it..
i have some.jsp file which also contains javascript/jquery. i need to do below check in javascript part of some.jsp file.based on the condition i need to display a message/ forward the request to servlet which in turn servlet forwards to other.jsp.
I wrote below code:
<script type="text/javascript">
$(document).ready(function() {
var isInIframe = (parent !== window);
if (!isInIframe) {
$.ajax({
type: "GET",
url: "./screenInitializer",
success: function() {},
error: function(ob,errStr) {
alert("Failed. Try Again.","error");
}
});
}else{
$("#accessDenied").text('Access Denied');
}
});
</script>
I can call a servlet using jquery ajax. forward request to jsp is not working.it is displaying a blank page instead of other.jsp. forwards request to other.jsp as below.
//Keeps some values using request.setAttribute() then forward the request
request.getRequestDispatcher("/WEB-INF/other.jsp").forward(request, response);
Basically i dont want any response from ajax call. it just need to call the servlet which in turn servlet forwards to the jsp and displays other.jsp.all My jsps are in WEB-INF folder. Am i doing anything wrong?
Thanks!
I have a application that invokes a servlet through the URL
> "http://server:port/context-root/myservlet"
The servlet then calls the Java Class which returns the query result back to servlet.The servlet then renders the data to the user through a JSP page(response.redirect)
Now it hapens so, when all this happens Page Cannot be displayed is rendered to the useruntil the JSP page is ready to show the data.
How can I show a loading gif or a messgae as soon as the servlet is invoked until the JSP page is loaded with all the required data:
NOTE: As mentioned above, I am first calling the servlet, then Java Class, then JSP.
#Sankalp - The invoking application (HTML page ) is solely responsible for making an AJAX Call to your servlet. If you dont have control over the invoking application here is a little trick you can do - Ask the invoking application to re-direct to an html file say an index.html file of your application . In the index.html file , export jQuery javascript library and make appropriate ajax call , show a loading image , and upon success you may re-direct the page to desired jsp. There is a lot of work to be done here.
Question : Does the invoking application pass you any parameters ?
Does it POST data to you ?
Does your application open in an IFRAME of the invoking application or its a pure re-direct ?
All these answers , would help you decide your next course of action. There are lots of post on AJAX calls and showing images on stack overflow but that does not solve your essential problem . You have to decide on the flow and where to put the AJAX code. The AJAX part would be the easiest one. :)
----- Editing after the last comment
Visit : jQuery
In your HTML
<html>
<head>
<script src="jquery.min.js"></script> <!-- where you keep your resource file -->
<script language="javascript" type="text/javascript">
$(document).ready(function() { //This call will be made when DOM
//hierarchy has been fully constructed
// Handler for .ready() called.
//Make AJAX Call here so that this simple HTML page
///directly calls the AJAX
// and decide the future action based on AJAX success / failure
});
</script>
</head>
<body>
</body>
</html>