I am working on web project where I have to generate image and display it on JSP page when it gets load. Now the problem is that I am have to use same image name and hence browser is using cached image always and not the new one.
Display.jsp
<html>
<head>
<script type="text/javascript">
updateImage(){
var img1 = document.getElementById("text");
img1.src="sun.png?time=".new Date().getTime();
}
</script>
</head>
<body onload="updateImage()">
<form action="com.CheckName" method="get">
<input type="button" value="submit" name="submit" />
<img src="sun.png" id="text">
</form>
</body>
</html>
By clicking on button same jsp page gets loaded again.
I am using above code but still I am getting cached(old) image only on next page load. Where I am going wrong.
Please help.
Thanks
Since you're using JSP, you could append the current time using System.currentTimeMillis().
Replace this:
<img src="sun.png" id="text">
with this:
<img src="sun.png?time=<%=System.currentTimeMillis()%>" id="text">
I wouldn't suggest you to avoid caching it all the times. Instead of appending the current time, you could append the current version number (or the last time it has changed), so users won't have to download it again everytime they open this page.
You could also do that with javascript, but yours didn't work cause it had an error. Use + instead of . to concatenate strings.
img1.src="sun.png?time=".new Date().getTime(); //wrong
img1.src="sun.png?time=" + new Date().getTime(); //ok!
Just pay attention because onload is only executed when all content (including images) has been loaded. That means you'll get the cached version when you open the page (but the non-cached version will load after a while).
There are also other approaches, like setting no-cache headers to the HTTP response, but I guess that is not the point of this question.
Related
This is the code, it seems very simple and it's kind of a prototype of something I want to achieve. I simply want the top 10% or so of my screen to have a button or something along these lines that opens a random link in the iframe that takes up the rest of the screen below. But I'm having trouble getting this to open in the target iframe. So here's the code before I began messing with it too much. I don't know javascript at all, so I'm surprised I got this far at all.
<body>
<script>
<!--
/*
Random link button- By JavaScript Kit (http://javascriptkit.com)
Over 300+ free scripts!
This credit MUST stay intact for use
*/
//specify random links below. You can have as many as you want
var randomlinks=new Array()
randomlinks[0]="http://houvv.deviantart.com/art/Water-Spirit-498202921"
randomlinks[1]="https://www.artstation.com/artwork/b08Jr"
randomlinks[2]="http://leekent.deviantart.com/art/Night-Stalker-505269510"
randomlinks[3]="http://joshtffx.deviantart.com/art/Firekeeper-Dark-Souls-3-609065320"
function randomlink(){
window.location=randomlinks[Math.floor(Math.random()*randomlinks.length)]
}
//-->
</script>
<form method="post">
<center><p><input type="button" name="B1" value="Dreamquest" onclick="randomlink()"></p> </form></center>
<!--Uncomment below to use a regular text link instead
Random Link
-->
<p>
<iframe src="stumble.html" frameborder="0" noresize="noresize" name="iframe" style="position:relative; background:transparent; width:100%;height:100%;top:40px;padding:0;" />
</body>
You could do
var randomlinks = ['http://houvv.deviantart.com/art/Water-Spirit-498202921','https://www.artstation.com/artwork/b08Jr','http://leekent.deviantart.com/art/Night-Stalker-505269510','http://joshtffx.deviantart.com/art/Firekeeper-Dark-Souls-3-609065320'];
instead of creating an array and defining its elements, since you can define things dynamically in JavaScript.
There is also an error here on these lines
<form method="post"><center><p><input type="button" name="B1" >value="Dreamquest" onclick="randomlink()"></p> </form></center>
since you ended your center element after your form element,
<form method="post"><center><p><input type="button" name="B1" >value="Dreamquest" onclick="randomlink()"></p></center> </form>
this would be the correct code.
But anyway, your code seems to work even with the errors so I don't see the problem.
Edited:
I tweaked with your code a little https://jsfiddle.net/xxmq68e9/
function randomlink(){
var iframe = document.getElementById('iframe');
iframe.setAttribute('src','https://www.artstation.com/artwork/b08Jr');
}
seems to work, but it seems the websites have disallowed loading of their webpages in an iframe since I keep getting the error
Refused to display URL in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
How to set 'X-Frame-Options' on iframe?
I am trying to get the value of a range slider after it moves and then update my page. I have approached this by using "onchange" and calling some javascript to set a value to a text box and using php to get that value. The php does not even grab the value from the text area on load and I am not sure why. It says the id of the input text box is an "unidentified index." There might be a simple thing wrong or I may be approaching it completely wrong. I am new to this...
Here is the code for the slider.
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
function printValue(sliderID, textbox) {
var x = document.getElementById(textbox);
var y = document.getElementById(sliderID);
x.value = y.value;
}
window.onload = function() { printValue('slider1', 'rangeValue1')};
</script>
</head>
<body>
<form action='slider.php' method='get'>
<input id="slider1" type="range" min="100" max="500" step="10" onchange="printValue('slider1','rangeValue1')">
<input id="rangeValue1" type="text" size="2">
</form>
<?php
echo $_GET['#rangeValue1'];
?>
</body>
</html>
The js function does set input text box, but the php script doesn't happen. I need to get the value in PHP because the page I'm including it in is written in PHP. I don't know if, or how, the page has to be reloaded. I tried using location.reload() in the onchange function and it just continuously loaded the page.. Please help! Any input will be helpful! Thanks!
It looks like you might be getting Javascript and PHP mixed up.
PHP is run solely on your server when a browser accesses a php file. The output of the php file (like when you use echo) is sent as a webpage. However, Javascript is run solely in the browser. To make them communicate, you will need to load another webpage (or reload the current webpage). You can either use a form or directly craft the URL (probably easier in this case).
So you could do something like this inside printValue():
location.querystring="?value=" + x.value;
This will create a GET argument, which you can access with $_GET['value'], and reload the page.
EDIT: Performance Warning!
Every time the slider is moved, your server will end up resending the webpage, which could slow down the server. You might want to only send the new value after the user has clicked a button or something, in which case it would be easier to use a form.
I've seen several ways to display image preview but none of them seem to work or they work only in FF/Chrome.
Trying to keep it simple:
Markup:
<input type="file" id="logo-upload" onchange="changePreview();"/>
<br/>
<img src='#Url.Image("logo.png")' alt="Preview" id="logo-preview"/>
Javascript:
<script type="text/javascript">
function changePreview() {
var input = $('#logo-upload').val();
$('#logo-preview').attr('src', input)
.width(150)
.height(50);
}
</script>
When debugging input shows the correct local image path but preview never shows up.
Why and how can I get this to work (in all browsers ) ?
Thanks.
Try setting the $('#logo-upload').change(function(){}) instead of using onChange. I think that's a good start. Then put the jQuery inside $(document).ready(function(){}). That could be another issue, if you're setting the script before the elements exist on the page.
If you can post more code, it would be beneficial.
Also, for IE, you're going to run into permissions issues that are on the user, which you don't have control over (at least in this situation). So, in those cases, you'll either have to upload the image first, to get the image from the server, OR they'll have to change their security settings to allow for this type of content to be accessed.
<input type="file" id="logo-upload" />
<br/>
<img src="#Url.Image('logo.png')" alt="Preview" id="logo-preview"/>
<script type="text/javascript">
$(document).ready(function() {
$('#logo-upload').change(function() {
var input = $(this).val();
$('#logo-preview').attr('src', input).width(150).height(50);
})
});
</script>
I have a page with an iframe that has no source on page load and just uses hardcoded html like this:
<iframe id="theframe" src="">
<html>
<body>
<form name="theform" action="http://domainB.com/new" method="POST">
<input type="text" />
</form>
</body>
</html>
</iframe>
The form is then submitted in jQuery using
$('#theform').submit();
This causes the source of the iframe to change from nothing (same domain) to domainB.com where the form data is sent and stored.
I then delay 1s to show success msg and then wish to set the frame back to it's original contents by changing the source back to nothing (same domain) and appending the original form, like this:
$('iframe').attr('src', '');
$('iframe').contents().find('body').empty();
$('iframe').contents().find('body').append('<form name="theform" action="http://domainB.com/new" method="POST"><input type="text" /></form>');
However it's not working... Is this cross site scripting even though I'm not trying to access the inner content of domainB, I'm just setting the src of the iframe back to domainA??
If so, is there anyway to set the src once it's been changed to a different domain?
(As I wrote the last sentence I realized I could just delete the iframe and replace it with a new one, I think?, but I'd still like to know if changing the source is considered cross site and thats why it's not working?)
This just returns true or false.
$('iframe').attr('src') == '';
Maybe you're looking for this:
$('iframe').attr('src', '');
Can an onsubmit event insert an image into the page before the page submits/transfers control to the next page?
I am using classic asp.
Of course. The function resolves before the form is submitted.
(Although… while an img element may be inserted into the page, it might not load before the browser has gone to the next one, and even if it does, the user might not have time to see it clearly)
Yes . You can insert the HTML code (through javascript):
<img src="imgsrc">
But it takes a little time for loading the image. The form send the user to another page in new window or in the same window? Why would you want to insert an image in the current window if the page will be replaced with the new one?
Yes you can do this. It would be easier (for me to write) if you used jquery:
html:
<form id="myForm" action="">
<input type="text" id="someId" />
<input type="submit" id="submit" value="submit" />
</form>
and then JavaScript would be:
$(document).ready(function() {
$("#myForm").submit(function() {
$(this).append('<img src="someImage.jpg" alt="" />');
});
});
http://jsfiddle.net/rYUbQ/
But like others have said it might not be loaded and displayed before the form submits so you might want to instead look in to preloading the image and then just setting it to visible before the page submits.