I'm working on a control panel, and I need to have the output of a command appear live. I have managed to get this to work by having the command output to a file, and loading that file via jQuery. I refresh the output every second using:
<script>
$(function(){
setInterval(refreshFrame, 1000);
});
</script>
and
<script>
document.getElementById("title").innerHTML="Update";
function refreshFrame(){
$("#frame").load("/assets/readfile.php?type=custom#content")
}
</script>
This works and loads the output without refreshing the entire page. However this makes copying impossible as the selection is gone or gets mutated as the contents are loaded again. Is there any way to keep the selection across reloads, and if not, how can I pause the refreshing when there is a selection?
try something like this:
$(function(){
document.getElementById("title").innerHTML="Update";
setInterval(function(){
if(!$('#frame').is(":hover")){
$("#frame").load("/assets/readfile.php?type=custom#content")
}
}, 1000);
});
How about only updating the element's html if the content has changed and the user has not selected anything in #frame?
var lastContent;
$(function(){
setInterval(refreshFrame, 1000);
});
function refreshFrame(){
$.ajax({
url:"/assets/readfile.php?type=custom#content"
}).done(function(content) {
if(!$(window.getSelection().anchorNode).is("#frame") && $(window.getSelection().anchorNode).closest("#frame").length == 0 && content != lastContent) {
$("#frame").html(content);
lastContent=content;
}
});
}
Related
I have the following code which works exactly as I need for refreshing a page using a submit button.
However I have added code in it to make it scroll down to a specific location after updating, the problem is, it scrolls down to the location, then springs back to the top of the page
any ideas why anybody please?
$(".visitpage").on('click', function() {
$('body').append('<div style="" id="loadingDiv"><div class="loader"></div><center><span style="font-size:22px;color:#000000;z-index:99999;"><b>Updating your results...</b></span></center></div>');
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
$('html, body').animate({
scrollTop: $("#search-results").offset().top
}, 2000);
});
function removeLoader() {
$("#loadingDiv").fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$("#loadingDiv").remove(); //makes page more lightweight
});
}
You will surely need the scrollTo method of the window object in javascript. Then I would figure out how far down your element is by getting a reference for that object in pixels on the page. See Retrieve the position (X,Y) of an HTML element for how to do that, since part of your answer would be a duplicate question I will let you read it. And this article is helpful http://javascript.info/coordinates
window.scrollTo(500, 0);
https://www.w3schools.com/jsref/met_win_scrollto.asp
Maybe I'm wrong here; but if you created a div where you want the page to scroll, or if you have on there make sure it's named, then right after the refresh command add
window.location.href = "#YOURDIVTAGHERE"; so
So if this is the part of the page you want it to go down to:
<div id="search-results">
CONTENT
</div>
so then your JS code, maybe try:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(".visitpage").on('click', function(){
$('body').append('<div style="" id="loadingDiv"><div class="loader"></div><center><span style="font-size:22px;color:#000000;z-index:99999;"><b>Updating your results...</b></span></center></div>');
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
$( "#loadingDiv" ).fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$( "#loadingDiv" ).remove(); //makes page more lightweight
});
window.location.href = "#search-results";
}
I am needing to refresh only one element using the JS console, rather than refreshing the whole page. I've got code that already works, but it depends on refreshing the page.
if (document.readyState === "complete") { vote(); }
function vote() {
//Do some stuff
setTimeout(function(){
location.reload();
}, 500);
}
function reload(){
var container = document.getElementById("testDiv");
var newContent = "After reload";
container.innerHTML= newContent;
}
<button>Reload</button>
<br/>
<div id="testDiv">
Before reload.
</div>
Looks like you just want to reload an iframe:
your normal html
<iframe src="page that should be reloaded.html">old browser</iframe>
<script>
function reload(){ document.getElementsByTagName("iframe")[0].reload();
}
</script>
What does refreshing one element mean? If you have a div with an id of element then you can just change the contents of that div using javascript and it will make the changes in your html. If the div contains "HI" then you can use document.getElementById("element").innerHTML and change it to whatever you want. Or you can change its attributes, you can add elements inside that div using javascript as well, what is it you are trying to do exactly? I assume that no matter what it is, you can just grab that element via its id and change it whenever you want it to refresh.
I am running this script on my page to replace mc= to MediaCode= in my url, the script works but it keeps reloading the page over and over.
This is the script:
<script>location.href = location.href.replace('mc=', 'MediaCode=')</script>
when you put
location.href = someHref
you make js to reload the page. Then, I gues, it meets that line again and continues reloading
Why not put this line into an if condition? This will check whether the URL contains the desired string or not and reload based on that:
const mcQueryParam = /mc\=/;
if(location.href.match(mcQueryParam)){
location.href = location.href.replace(mcQueryParam, "MediaCode=");
}
The solution to this is a slight alteration to Xufox's solution
<script type="text/javascript">$(document).ready(function () {
if(window.location.href.indexOf("mc=") > -1) {
location.href = location.href.replace('mc=', 'MediaCode=')
}});
Many thanks to Xufox
I'm trying to force an update of my jQuery page before I want to change the page.
Code looks like this:
function popupOrRedirect2() {
location.reload();
var content = document.getElementById('invisibleDiv').innerHTML;
if (content > 0) {
$.mobile.changePage("http://localhost:8080/application/test");
} else {
$("#popupDialog4").popup("open");
}
}
I need to read a value from a hidden div, but the div gets updated only after the page is getting reloaded. I must ensure to have the latest value.
The problem is, it doesn't work. If I remove the location.reload() it works... but it doesn't have the newest value.
Any hint on how to achieve the behavior that I want?
I'm using jQuery mobile 1.8.3.
A quick and dirty way might be to use URL params to determine whether to reload.
Instead of:
location.reload()
you could do:
if (location.search !== '?reloaded=1') {
location.search = "reloaded=1"; //triggers a reload once
}
I'm trying to use Phantom.JS to do some page automation on this page: https://reserve.apple.com/GB/en_GB/reserve/iPhone
I know how to use document.getElementById('store') = "R363" to choose the first option. But it seems after I've chosen the first option, the DOM element of the original page will change and I don't know how to achieve that using Phantom.JS
Instead of using document.getElementById('store') = "R363" try using jQuery instead like so:
var page = require('webpage').create();
// open the page
page.open('https://reserve.apple.com/GB/en_GB/reserve/iPhone', function() {
//inject jQuery
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
// run the following code in the context of the page
page.evaluate(function() {
// change the value of the combobox
$("#store").val( newval );
// do stuff in the page
});
phantom.exit()
});
});