Menu
I have read various sources here and have created the following ways to redirect a user after 10 seconds. Not employed at the same time.
First attempt in PHP:
header("refresh:10;url=?switch=1")
Then, second attempt in JavaScript:
window.setTimeout(function () {
location.href = '?switch=1';
}, 10000);
They both work nearly all of the time. They are used on a page using reveal.js (like this one). Sometimes when the URL fragments change, the page no longer redirects at all - though, more often than not, the redirection does indeed work.
Can anyone let me know what the issue might be, or a good resource to read about the issue?
Edit: Changing to setInterval in the JavaScript version results in it trying again.
858
The root cause of this error is that php redirect header must be send before anything else. This means any space or characters sent to browser before the headers will result in this error. Like following example, there should not be any output of even a space before the headers are sent.
Answer: Use the PHP header() Function You can simply use the PHP header() function to redirect a user to a different page. The PHP code in the following example will redirect the user from the page in which it is placed to the URL http://www.example.com/another-page.php . You can also specify relative URLs.
It is quite simple to do a page redirect using JavaScript at client side. To redirect your site visitors to a new page, you just need to add a line in your head section as follows.
A quiz/memory game that moves from one question to another every ten seconds?
Rather reloading the application every x amount of seconds, build a one-page app that pulls in the data from your PHP script and then displays it every x seconds.
A very quick example (non-tested):
<!doctype html>
<html>
<head>
<title>Example</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
Question #<span id="question_number"></span><br />
<p id="question"></p>
<script>
var questionCounter = 0;
function loadQuestion(questionNumber) {
questionCounter++;
$.get( "<your_php_script_url>?question="+questionCounter, function( data ) {
$( "#question_number" ).html( questionCounter );
$( "#question" ).html( data.question );
setTimeout(function() {
loadQuestion(questionCounter);
}, 10000);
});
}
loadQuestion(questionCounter);
</script>
</body>
</html>
When setting headers with php you must do so before any output is generated, it's possible that you are generating some kind of output in certain circumstances before the php header is set.
"It is important to note that headers are actually sent when the first byte is output to the browser. If you are replacing headers in your scripts, this means that the placement of echo/print statements and output buffers may actually impact which headers are sent." - from http://php.net/manual/en/function.header.php You may find that page to be useful reading (If you haven't already gone through it), I have found it useful when encountering header related problems.
I would add more context (and relevant code) to your question if you want more in-depth answers. We cannot know what's wrong with code we cannot see. If you include the code which utilizes the URL fragments you are setting we may have a better understanding of what your code is actually doing, and may be able to catch errors which you have missed. Here's a wikki on fragments. just for completeness. https://en.wikipedia.org/wiki/Fragment_identifier
Finally, with the JavaScript example I'm at a loss. It works fine on my system. (although the reload may be a few microseconds off). You could try using setInterval() instead?
33
<!doctype html>
<html>
<head>
<title>Example</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
Question #<span id="question_number"></span><br />
<p id="question"></p>
<script>
var questionCounter = 0;
function loadQuestion(questionNumber) {
questionCounter++;
$.get( "<your_php_script_url>?question="+questionCounter, function( data ) {
$( "#question_number" ).html( questionCounter );
$( "#question" ).html( data.question );
setTimeout(function() {
loadQuestion(questionCounter);
}, 10000);
});
}
loadQuestion(questionCounter);
</script>
</body>
</html>
this is a good example, I have used this code too.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
