Hide a button every 10 seconds - javascript

I have searched it on google, and I have found some examples.
I have tried to do my code based on this example here
I'm trying to generate a random number between 0 and 100 by clicking a button,
then hide the button and show it again after 24h.
For my example, I have inserted 5 secs for testing purposes,
But I'm getting an error from the var variable.
I have just edited it, but the button is hidden and no random number is shown.
and is not showing again
What I'm missing here?
<html>
<input type="submit" value="Submit" onclick="validate();" name="windaily" id="windaily">
<?php $randn = rand(0,100);?>
<?php echo($randn); ?>
<script>
function validate() {
var windaily= document.getElementById('windaily');
windaily.style.visibility='hidden';
setTimeout (function(){
windaily.style.visibility ='visible';
},5000);
return false;
}
</script>
</html>

I think this is what you need.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<?php
require_once 'hide-button.php'; // to reset button when 24 hours has expired
if(empty($_SESSION['hide_button'])) {
?><input type="submit" value="Submit" onclick="validate();" name="windaily" id="windaily"><?php
}
$randn = rand(0,100);
?>
<div id="display-number"></div>
<script>
function validate() {
let windaily = document.getElementById('windaily');
windaily.style.visibility='hidden';
document.getElementById("display-number").textContent = '<?php echo $randn ?>';
$.ajax({
method: "GET",
url: "/hide-button.php", //to use php session to hide button for 24 hours
}).done(function( msg ) {
});
return false;
}
</script>
</body>
</html>
Then inside hide-button.php
<?php
if(!session_id()) {
session_start();
}
$expire = 86400; // 1 day
if(empty($_SESSION['timestamp'])) {
$_SESSION['timestamp'] = time();
$_SESSION['hide_button'] = true;
} else {
if(time() > ($_SESSION['timestamp'] + $expire)) {
unset($_SESSION['timestamp']);
unset($_SESSION['hide_button']);
}
}
?>

You can't use php tags to override scripts.. Use the script tag and then you can place your php variables
Substitute <? Php to

Related

Refresh a div with PHP variable using Jquery

I would like to refresh a div every second with a PHP variable using Jquery.
I have a simple PHP file with a variable date:
<?php
$date = date('d/m/Y H:i:s');
?>
I have a HTML file with the following code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
function request() {
$.ajax({
url: "date.php",
dataType: "text",
cache: false,
success: function(data) {
var json = $.parseJSON(data);
$('#result').html(json.date);
}
});
}
setTimeout(request, 1000);
});
</script>
</head>
<body>
<div id="result">
</div>
</body>
</html>
But the result is a blank page. I can not make it work. I would like your help.
I would like to refresh every second a PHP variable using Jquery.
You need to print date variable:
<?php
$date = date('d/m/Y H:i:s');
echo $date;
?>

HTML Form Text to Speech speaks the file name and PHP, Doubles Form

I am working on a webpage that takes HTML form input, processes it on a loop using PHP, then displays the PHP echo output in a div using jQuery, then TTS speaks a message using ResponsiveVoiceJS.
The problem that is visible right now is that, upon loading of the page, the TTS starts speaking the webpage file name and some random PHP on a loop, then displays the form twice.
It shouldn't do any of that!
Since I am not sure which part of the code is causing the issue, here is the code in its entirety:
<html>
<head>
</head>
<body>
<form action="<?php
echo $_SERVER['PHP_SELF'];
?>" method="post">
What is your URL? <input type="text" name="pastedurl"><br>
What is your minimum interval? <input type="text" name="interval"><br>
<input type ="submit">
</form>
<?php
set_time_limit(18000);
if (isset($_POST['submit']))
{
// echo "stopped here";
// die; //THIS DOESN'T WORK EITHER
$pastedlink = $_POST['pastedurl'];
$pastedlink2 = $_POST['pastedurl'];
$rate = $_POST['interval'];
parse_url($_POST['pastedurl'], PHP_URL_HOST);
if (parse_url($_POST['pastedurl'], PHP_URL_HOST) == 'www.instructables.com')
{
for ($z = 0; $z < 2880; $z++)
{
$tutorial_json = file_get_contents($pastedlink);
$tutorial_array = json_decode($tutorial_json, true);
$oldviews = $tutorial_array['views'];
sleep(30);
$tutorial_json2 = file_get_contents($pastedlink);
$tutorial_array2 = json_decode($tutorial_json2, true);
$currentviews = $tutorial_array2['views'];
$viewcount1 = (int) $oldviews;
$viewcount2 = (int) $currentviews;
$change = $viewcount2;
$change -= $viewcount1;
$rateasint = (int) $rate;
if ($change >= $rateasint)
{
$sayit = "Alert! Your Tutorial has gained " . $change . " more views";
echo $sayit;
}
}
}
else
{
exit("Error: URL submitted was not from www.instructables.com");
}
}
?>
<script src="http://code.responsivevoice.org/responsivevoice.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script>
$(document).ready(function(readyEvent) {
speakInnerHTML();
});
function speakInnerHTML() {
var speek = document.getElementById("load_updates");
responsiveVoice.speak(speek.innerHTML);
}
</script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_updates').load('<?php
echo $_SERVER['PHP_SELF'];
?>',speakInnerHTML).fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
<div id="load_updates"> </div>
</body>
</html>
Sorry about the poor formatting, I am a noob and don't know the methods of formatting these programming languages!
Here is a video of the error in action:
youtube
1.
die; //THIS DOESN'T WORK EITHER
die() is a function, and despite the wonders of echo, all functions are called with parentheses.
2.
isset($_POST['submit'])
This doesn't work because there are variables with the name submit.
To fix that, add the name attribute to your submit control, like this:
<input type="submit" name="submit">
3. You are loading the page itself with jQuery, even though it contains... well... itself. It's going to recursively fill the page with its own instances every 10000ms. And every one of that instance is going to do that too. You need to query the page with the data from the form, not just load it. And add a conditional so that if there is $_POST data, the page does not display all the HTML.

php password script and javascript refresh conflicting, gives off form resubmit message that i would like to eliminate

I have a bug but everything works great otherwise.
The dialog 'Confirm Form Resubmission' pops up every time the refresh happens. I use a javascript refresh which works without bugs in Chrome, but when I manual refresh I get that dialog. With firefox I need to resend no matter what. The refresh is unavoidable as it is my way to poll a text file that's updated by another computer every minute.
What can I do, to get rid of that dialog?
Here is my php variable
<?php
$password = 'aaf4c61ddcc5e8a2dabede0f3b482cd9aea9434d';
session_start();
if (!isset($_SESSION['loggedIn'])) {
$_SESSION['loggedIn'] = false;
}
if (isset($_POST['password'])) {
if (sha1($_POST['password']) == $password) {
$_SESSION['loggedIn'] = true;
} else {
die ('Incorrect password');
}
}
if (!$_SESSION['loggedIn']):
?>
<html><head><title>Login</title>
<style>
#formenclosure {
width: 300px;
height:300px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
color:fff;
}
</style>
</head>
<body>
<div id="formenclosure">
<fieldset>
<legend>You need to login</legend>
<form method="post">
Password: <input type="password" name="password"> <br />
<input type="submit" name="submit" value="Login">
</form>
</fieldset>
</div>
</body>
</html>
<?php
exit();
endif;
?>
here is my refresh code and the require that goes on top of all the documents that you need protected.
<?php
require('access.php');
?>
<script>
function refresh() {
setInterval(function () {
location.reload(true)
}, 60000); // reload page every 60 seconds
}
</script>
You can avoid page refresh entirely, and get the exact same result, with a slightly different method:
<script>
var first_run=true, oldDT='';
function refresh() {
setInterval(function () {
$.ajax({
type: 'post',
url: 'file_check.php',
success: function(d){
if (first_run){
oldDT = d;
first_run = false;
}else{
if (d != oldDT) window.location.reload(); //refresh page
}
}
});
}, 60000); // reload page every 60 seconds
}
</script>
file_check.php
<?php
$filename = 'path_to_file/target_file.xml';
$newDT = date("ymdHis", filemtime($filename));
echo $newDT;
Simple AJAX explanation/examples

Auto reload div contents with data from separate page with jquery

I am trying to reload a page and retrieve data automatically after 10 seconds or preferably less than that. Please i tried so many codes and it didn't work.
Here is what i am using now...
// script //
<script>
$(document).ready(function(){
// setInterval(function() {
// $("#load_msgs").load("load.php");
// }, 10000);
//var updateInterval = setInterval(function() {
//$('#load_msgs').load('load.php?p=<?php echo $username; ?>');
//},1000);
//});
var autoLoad = setInterval(
function ()
{
$('#load_msgs').load('load.php').fadeIn("slow");
}, 10000);
});
</script>
// php / html div id panel
<div class = 'container me' id = "load_msgs"> </div>
// php load.php file
<?php
include('config.php');
include('func.php');
//$username = $_GET['q'];
$o = "--DATABASE QUERY--";
$z = mysql_query($o) or die(mysql_error());
while ($roow = mysql_fetch_array($z)) {
$date = $roow['date'];
echo $roow['message']. " <span class = 'lil'>" . time_elapsed_string($date)."</span> \n <br />";
}
?>
I'm assuming from your comments that you can navigate directly to load.php and the data is echo'd. If that is the case, here's how I would set it up:
(It's not clear if you trying to load a file every X seconds, or just once after X seconds, Here is an example of both)
index.php:
<?php
$username='someUser'
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Load From PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var username = encodeURI( <?php echo isset($username) ? "'".$username."'" : ''; ?> );
$(function(){
var url='load.php?username='+username;
// load once after 2 seconds
setTimeout(function(){ $.get(url, function(response){ $('#load_msgs').html(response); } ); }, 2000);
// load every 2 seconds
setInterval(function(){ $.get(url, function(response){ $('#load_msgs_repeat').append(response+'<br>'); } ); }, 2000);
});
</script>
</head>
<body>
<h4>Div loaded once</h4>
<div id="load_msgs"></div>
<br>
<h4>Div loaded every 2 seconds</h4>
<div id="load_msgs_repeat"></div>
</body>
</html>
load.php:
<?php
$username= isset($_GET['username']) ? $_GET['username'] : null;
echo $username ? 'here is some data loaded from load.php for user: '.$username : 'here is some data loaded from load.php, but no user was provided' ;
?>
Here is a functioning example
The problem may be in config.php or func.php. Are you connecting to the database before running your query?
Add these two lines to the start of load.php:
ini_set("display_errors", "On");
error_reporting(E_ALL);
Then visit load.php in your browser. You should get some helpful error messages.
window.setTimeout(function(){window.location.replace("page.php")},5000);

How do I pass a variable from one php file to a javascript file?

I am currently trying to make a site where I put in info in on my html side, it send the info to the php file and grabs info from another site depending on what you put in on the html side.
To make this more clear this is how it works:
You put in your username in the html site(where the javascript code
is).
Then it sends your username to the php file.
The php file gets the information, puts it in a link and request it.
It grabs information from this request (highscores page).
This is where it stops.
I don't know how to return the information to my javascript file.
This is my code:
html/javascript page:
<html>
<head>
<script type="text/javascript" src="./aloticcalc_files/jquery.min.js"></script>
</head>
<body>
<script>
function test() {
var username = "Exzib";
window.location.href = "grabinfo.php?username=" + username;
}
</script>
</body>
</html>
This is my php file: (grabinfo.php)
<html>
<head>
</head>
<?php
$username = $_GET['username'];
include_once('simple_html_dom.php');
if(isset($_GET['name'])) {
$html = file_get_html('https://alotic.com/hs/?name='.$username);
$xp = $html->find('td', 10);
$formatxp = $result=str_replace(array('$',',','.',' '),'',$xp);
echo $formatxp;
}
?>
<body>
</body>
</html>
So how do I proceed to send the $formatxp to my javascript?
Thanks
So what you do is execute:
window.location.href = "grabinfo.php?username=" + username;
This causes the browser to navigate to grabinfo.php and display the information that you want. Except that you don't want the information to be displayed, you want to retrieve it into a JavaScript variable, right?
To do so, don't set window.location.href. Instead call your script using AJAX. You'll find plenty of tutorials on AJAX out there. This will allow you to capture the output of your PHP script.
Change the following line
$formatxp = $result=str_replace(array('$',',','.',' '),'',$xp);
to
$formatxp = str_replace(array('$',',','.',' '),'',$xp);
And to pass the variable to Javascript you can do something like this.
<script type="text/javascript">
var $formatxp = '<?php echo $formatxp; ?>';
</script>
Write a script tag and set the variable equal to your PHP variable.
<script>
var thing = '<? echo $formatxp; ?>';
</script>
This is going to be easy as you already include jQuery. (Using ajax)
Look
<html>
<head>
<script type="text/javascript" src="./aloticcalc_files/jquery.min.js"></script>
</head>
<body>
<label>Type your username:<input id="username" type="text"></label>
<input id="submit-button" type="button" value="Get my highscores!">
<p id="response"></p>
<script>
//When user clicks "submit-button" button
$("#submit-button").on('click', function() {
var username = $("#username").val();
//We request our php with the username
$.get("grabinfo.php?username=" + username, function(xpValue) {
//When we receive the response from php then we add it to a "p" tag
$("#response").text("LOL your xp is: "+xpValue+". NOOOOOOOB!!");
});
});
</script>
</body>
</html>
And that's it!
More info at http://api.jquery.com/on/
And http://api.jquery.com/get/
http://api.jquery.com/text/
http://api.jquery.com/val
And well the whole jQuery API documentation http://api.jquery.com
EDIT:
OH. You have to change grabinfo.php. It should only have this:
<?php
$username = $_GET['username'];
include_once('simple_html_dom.php');
if(isset($_GET['name'])) {
$html = file_get_html('https://alotic.com/hs/?name='.$username);
$xp = $html->find('td', 10);
$formatxp = $result=str_replace(array('$',',','.',' '),'',$xp);
if(empty($formatxp)) {
echo "ERROR: Invalid could not find xp with username {$username}";
}
else {
echo $formatxp;
}
}
else {
echo "ERROR: Invalid arguments";
}

Categories