remove and append iframe when src refreshes - javascript

The code below creates a 10 second delay, and then draws the captcha iframe to the page.
<script>
$(document).ready(function() {
$("#contain").delay(10000).queue(function(next) {
$(this).append('<iframe src="captcha.php"></iframe>');
});
});
</script>
<div id="contain"></div>
When the correct captcha is entered, the iframe captcha page refreshes and a new captcha is presented.
What I would like to happen is every time captcha.php is refreshes, I would like the iframe removed from source again, and the then readded again after 10 seconds.
Originally I was just using a switch inside the captcha to toggle the parent iframe for 10 seconds, but that is relatively easy for the user to just set the display without waiting for the timer - so I am seek a better solution.
It seems the best way, if I can manage to get it working, would be to add and remove the iframe with a 10 second delay on the add.

Related

Trying to refresh div inside Iframe

I have a section of my site im working on where i have a certain div, the div "comments" needs to be checked for blank comments being posted and remove them, it works fine the first time but after the div is refreshed it stops working. I'm trying to get this script to reload every second along with the div so the results stay consistent. Here are my 2 scripts:
<script type="text/javascript">
function doRefresh(){
$("#comments").load("comment.txt");
}
$(function() {
setInterval(doRefresh, 1000);
});
</script>
<script>
setTimeout(refreshData, 1000);
function parent()
{ $(".comment_name:empty").parent().hide()};
refreshData();
</script>
For future reference you should have a look into websockets. This will enable you to have data refresh as it is entered from one browser to another and will always keep it up to date without refreshing.
Here is a reference for you to get started. https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
It is a starting point and will help you a lot in future for dynamic content on multiple end points.

JavaScript Timers and Page Navigation

Hopefully a simple question; if I create a timer using JavaScript embedded within my page, and I then navigate away from that page, will the timer be automatically cancelled or will it continue to run?
EDIT
Expanding the question, if that page were to perform a post-back (in my case, this is ASP.NET Forms), and the script is rendered as a part of the page markup, would the original timer created when the form is first displayed be cancelled during that post-back or would a second timer be created?
Example (rough typed):
<body>
...
<script type='text/javascript'>
function doSomething() { ... }
x = setInterval(doSomething(), 60000);
</script>
...
<button type="submit" />
...
</body>
Following the post-back, a new timer will be created as a result of the page being re-rendered, how many timers are now running (assuming the post-back was within the interval specified by the timer)?
It'll be automatically cancelled. JavaScript code is executed within the context of a page.
Think about a page like an application. Switching to other page is like closing an application and opening a new one. This also applies to a full page refresh (i.e. when you press F5).

How can a page be refreshed every 5 secconds only when tab/window has focus?

I have a iframe that I would like to refresh every 5 seconds, but only if the window or tab is active.
I was doing this with META Refresh, but I cant figure out a way to make this conditional to the page being active, so I have tried javascript, but without success. This is what I have tried, but it is not working:
<SCRIPT>
$(window).focus(function(){
setTimeout(function(){
window.location.reload(1);
}, 5000);
});
<SCRIPT>
Am I headed in the right direction, or is there a cleaner way to do this?
You may use the page visibility API and check every 5 seconds the visibility state of your page: if it's not hidden then refresh the page
$(function() {
window.setInterval(function() {
if (!document.hidden) {
window.location.reload(1);
}
}, 5000)
});
where hidden here means
the page content is not visible to the user. In practice this means
that the document is either a background tab or part of a minimized
window, or the OS screen lock is active.

jQuery Auto refresh div messing up

I have a script that auto-refreshes a certain div on the page (That I got from another post on here)
<script type="text/javascript">
var auto_refresh = setInterval(
function(){
$('#refresh').load('index.php?_=' +Math.random()).fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
...............
<div id="refresh">
<!-- Some PHP Code -->
</div>
This refreshes, however when it does, I takes the entire html document and puts it into the div. Like this:
As you can see, the refreshed div (the one marked in red) is getting the body shouved into it. Any ideas???
You are loading entire page to the div.
Modify the code to use only part of the document that is fetched:
<script type="text/javascript">
var auto_refresh = setInterval(
function(){
$('#refresh').empty();
$('#refresh').load('index.php?_=' +Math.random()+' #refresh').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
First off, you are loading the entire page into the divider, thus causing the file to reload entirely. Instead, you should be having the Recent Posts divider load from a single file, even on the first page load. Then have that consistently refresh over time.
Secondly, you should be transferring as little data as possible from your server to your clients. At most, you should use a minimalistic checksum of sorts (number of messages, for instance) to confirm that the client and server are synced up.
Lastly, if you choose to use this format, aim to transfer your data in something such as JSON or XML and have the client display it on the page. Transferring the styled HTML increases network overhead and is not the best practice.

Forcing page to refresh after its content has changed

I have a button which acts as an indicator, so has two states; pressing it toggles the state, and moves on to the next page.
Pressing the button calls a JavaScript function which handles this.
Having changed a button's 'src' image, using jQuery, I wish for the user to see the image change, pause for a fraction of a second, and only then see the next page displayed.
I am finding that the image does not visibly change until the JavaScript function returns, but this is after the pause, and after the page change. I.e. the browser does not show the page changes until the button's function has exit.
So I wish to cause the page to repaint in the browser, before the pause.
All the solutions I have tried refresh the page to its state on the server, and any changes I made to it in jQuery are lost.
Is there a way to force the page or button to be repainted, which will honor the changes I made to it in JavaScript/jQuery?
$("#YourButtonWhichTriggersChanges").click(function() {
// page repaint code, image change, etc.
setTimeout(function(){
window.location.reload();
// use window.location.href = "my/new/url.html";
// or window.location.replace("my/new/url.html");
// to change the page instead of just reloading.
}, 1000);
});
Where 1000 is the number of milliseconds you want to wait before refreshing the page.
Edit: I think you want this code instead:
$("#ApproveButton").css('backgroundImage', 'url(\'img/but/proof/ApprovePageButton.png\')');
The extra backslashes are in there to escape out the single quotes in the url parameter.
Another edit: Here's a combination of the two solutions I supplied which should work:
$("#ApproveButton").click(function() {
// actually repaint the button's background image
$(this).css('backgroundImage', 'url(\'img/but/proof/ApprovePageButton.png\')');
// change the page after 1000 milliseconds have gone by.
setTimeout(function(){
window.location.reload();
/* use window.location.href = "my/new/url.html";
* or window.location.replace("my/new/url.html");
* to change the page instead of just reloading.
*/
}, 1000);
});

Categories