I am trying to run JS function from Java using google gwt Frame as shown :
frame.setUrl("javascript:foo('jack!');void(0);");
Then the iframe automaticaly changes src attribute to be as shown :
<iframe class="gwt-Frame" src="javascript:foo('jack!');void(0);">
<html>
// html page contain foo method and other styles
</html>
</iframe>
What happens is that after the function is executed the iframe reset itself with an empty html document in Chrome and Safari but it works fine in FireFox.
I noticed that those lines are triggered in Jquery just before the document is reset :
// Used for iframes
// See setDocument()
// Removing the function wrapper causes a "Permission Denied"
// error in IE
unloadHandler = function() {
setDocument();
},
Can you help ?
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>
I have spring mvc application
Sometimes on our site we can see that in html exists img tag but actually url is broken.
Now we want show default image for all these situations.
How can we handle it in single place and we should hit at this place only when we want to load image.
You can get it using jQuery. On the document.ready you can check the url of all images, and check if the images are valid. If not you can just change for your image.
Here is the jQuery code (you must add it on all your pages):
$(document).ready(function(){
var images = $('img').each(function(i, image){
checkSrc(image);
});
});
function checkSrc(image){
$.get($(image).attr('src'), function() {
//succes, we do nothing
}).fail(function() {
$(image).attr('src','https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Cristiano_Ajax.jpg/220px-Cristiano_Ajax.jpg');
});
}
Here the html:
<img src="notexisting.jpg"/>
Working fiddle: http://jsfiddle.net/bx5kkoun/
WARINING
I don't recommend to do this because you have to request twice the images.
You can achieve it as well using Java Filter, but you must check as well the url of all images from server, but it's the same situation.
How about this:
<img src="image.gif" onerror="loadDefaultImage()">
This solution is cross-browser, but not IE8 and below.
You have many options for the loadDefaultImage function, you could use the jQuery method already suggested (just use the fail part), here is another suggestion, or just google "image tag onerror example" and select an option that works for you.
I think resolving it on the client side is the most efficient way to go. It will only attempt an extra request if there is a failure. If you attempt a solution on the server side, you would have to test for success/failure and then modify the markup sent to the browser. The browser will have to load even the successful images again as the page is rendering.
Here is a possible implementation:
function loadDefaultImage(element) {
$(element).attr(
'src',
'https://placehold.it/100x100'
);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="width:100px;margin-right:100px;display:inline-block;">
<img src="image.gif">
</div>
<div style="display:inline-block;">
<img src="image.gif" onerror="loadDefaultImage(this)">
</div>
I use Primefaces 3.4 with Apache MyFaces 2.1.8 on WebSphere Application Srever 8.
I have some charts. Now I want to make it possible to save the chart as image.
With PF comes the export function for charts.
In PF showcase they export the image in a new dialog:
look here
I want to get the typical "save as" dialog when I push the button.
Can someone give me a hint how to write the javascript for this?
It's something like this:
<script type="text/javascript">
//
function exportChart() {
//export image
$('#chart').exportAsImage();
}
//
</script>
Best regards
I am late but hope it will help others to solve the problem.
Make sure that "chart" and "dlg" are javascript variable
<script type="text/javascript">
//
function exportChart() {
//export image
$('#output').empty().append(chart.exportAsImage());
//show the dialog
dlg.show();
}
//
</script>
The image exported is an image base 64. You can use next:
yourInputText.value = chart.exportAsImage().src;
I am using Dojo library. How can I replace all the content of my jsp/html content. I am trying to dynamically reload my page when a data is updated.
Here is my dojo code:
function reloadPage() {
var thisUrl = '/CBS/a/customer/' + customerId + '/profile';
dojo.xhrGet({
url: thisUrl,
load: function (data) {
document.body.innerHTML = data;
},
error: function (data, ioArgs){
document.body.innerHTML = "unknown error";
}
});
}
The server returns a complete html code including the html tags. The data variable holds all the html tags. In my code I did document.body.innerHTML = data;which is wrong because the content of body is replaced by a whole html page. It looks like ajax is working because its updated dynamically but my buttons are not working anymore. Please help.
Why do you use AJAX if you want to update the whole page? Purpose of using of AJAX - update part of content(page), not updating the whole page. If you want to update the whole page, may be it will be more appropriate to use reload?