setInterval with jQuery.html only updates once? - javascript

<?php
echo '
<script type="text/javascript">
$(function() {
var refresh = setInterval(function() {
$("#content").html("'.rand().'");
}, 3000);
});
</script>
<div id="content"></div>
';
?>
This will update the div "content" with a random number after 3 seconds, however it only updates once. Why does it not continually generate a new number every three seconds, and how can I make it do precisely that?
Thank you in advance for any assistance rendered.

Ha. PHP is run on the SERVER side. JS is on the client.
you need to generate the rand on the JS side not he php side...
js code:
<script type="text/javascript">
$(function() {
var refresh = setInterval(function() {
var randomnumber = Math.floor(Math.random()*11);
//where 11 dictates that the random number will fall between 0-10
$("#content").html(randomnumber);
}, 3000);
});
</script>
<div id="content"></div>

Related

PHP - Reading text from textfile creating nested <div>

Good morning everyone,
I am reading a textfile from our server which changes its content every 10 seconds. I am displaying it using this code:
<div id="textfile">
<?php
$file = $_SERVER['DOCUMENT_ROOT'] . "/resources/file.txt";
$content = file_get_contents($file);
echo $content;
?>
</div>
I am using jquery in updating the content and displaying it.
setInterval(function() {
$('#textfile').load(document.URL + " #textfile");
}, 10000);
However if it is updated, it creates another < div >.
Previously it looks like this..
<div>Content</div>
But after it refreshes, it looks like this..
<div>
<div> Content </div>
</div>
Can anyone tell me what is wrong with this code and please help me so that it won't create another < div > after it refreshes..
You can load the text file directly, and reload it every 10 seconds.
<div id="textfile"></div>
<script src="path/to/the/jquery/lib.js"></script>
<script>
$(function() {
setInterval(function() {
$('#textfile').load('path/to/the/text/file.txt');
}, 10000);
});
</script>

Knob JQuery get value from textfile

I have been trying to make a script that would allow Knob to get a value from a text file every 3 seconds.
I had JS refresh a div that had php check the file and set the value to a variable. The issue was flickering and kept doubling the knob until it crashes chrome.
I tried this with PHP and didn't get far. Anyone have any ideas?
<script>
var dataFile = Server.MapPath("count.txt");
Array userData = File.ReadAllLines(dataFile);
function clock() {
$h = $(".hour");
d = new Date(),
h = "";
$h.val(h).trigger("change");
setTimeout("clock()", 1000);
}
clock();
</script>
<input class="knob hour" value="0" data-fgColor="#EB4B4E" data-thickness=".2" readonly data-min="0" data-max="50" data-width="300" data-height="300">
<script>
setTimeout(function(){
$('.dial')
.val(<?php echo file_get_contents("count.txt"); ?>)
.trigger('change');
},3000);
</script>

Refresh div with button click using random javascript string element

There are several similar questions, so I hope this is a unique problem. None of the proposed solutions on those similar questions have solved my issue. Humble apologies from this beginner if I messed up somehow.
I have an empty div on my page with I am loading using javascript with strings from an array. Currently, I have a script running on a button which reloads the entire page. I would like for that button to just reload the div with items from my javascript array.
Here is my code:
<html>
<head>
<link rel="stylesheet" href="obliqueStyle.css">
<style></style>
</head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<body>
<div id="wrapper">
<div id="strategyBox"></div>
<div id="button">
<a class="againbutton" onclick="buttonReload()">Again</a>
<script>
var buttonReload = function() {
document.getElementById("strategyBox").innerHTML = '<p id="strategyText">' + randomStrategy + '</p>';
}
</script>
</div>
</div>
<script src="os.js"></script>
</body>
Here is a snippet of my array and the JS (coming from the os.js file referenced in index.html) I am using to load the div initially/on refresh:
var obliqueStrategy = ["Abandon normal instruments",
"Accept advice",
"Accretion",
"A line has two sides"];
var randomStrategy = obliqueStrategy[Math.floor(Math.random() * obliqueStrategy.length)];
document.getElementById("strategyBox").innerHTML = '<p id="strategyText">' + randomStrategy + '</p>';
I've tried calling the same javascript as a function in script in the html like this:
<div id="button">
<a class="againbutton" onclick="buttonReload()">Again</a>
<script>
var buttonReload = function() {
document.getElementById("strategyBox").innerHTML = '<p id="strategyText">' + randomStrategy + '</p>';
}
</script>
</div>
I've tried using the jQuery AJAX load function like this:
<script>
$(function() {
$("#againbutton").on("click", function() {
$("#strategyBox").load("index.html")
return false;
})
})
</script>
I've played around with variations of the above and tried a couple other things that I'm forgetting exactly how and what I did, so I can't include them. I've really hit a wall on this even though it seems profoundly simple.
Thanks in advance for any help.
Here's one method: http://jsfiddle.net/kxqcws07/
HTML
<div id="wrapper">
<div id="strategyBox"><p id="strategyText"></p></div>
<div>
<input type="button" class="againbutton" value="Again">
</div>
</div>
Javascript
//wrapping your logic in a namespace helps reduce the chances of naming collisions of functions and variables between different imported js files
var localNameSpace = function() {
//private array containing our strings to randomly select
var obliqueStrategy = [
"Abandon normal instruments"
, "Accept advice"
, "Accretion"
, "A line has two sides"
];
var api = {
//bindButtonAction binds the generateRandomStrategy function to the click event of the againbutton
bindButtonAction: function() {
$('#wrapper .againbutton').click(api.generateRandomStrategy);
}
, generateRandomStrategy: function() {
//get the position of one of the string randomly
//Math.random() returns a float value < 1 so multiplying it by 100 gets us a range of (0.* - 99.*)
//then we Math.floor() that to get rid of the float value and keep just the integer part
//finally we modulus it with the length of the string array
//if you are unfamiliar with modulus, what it does is gives you the remainder of a division. for instance 10 / 3 gives you 3 with a remainder of 1, so 10 % 3 would be just 1.
//what this does for us is keeps the random offset of our within the bounds of the array length (0 to length -1)
var randomOffset = Math.floor(Math.random() * 100) % obliqueStrategy.length;
//finally once we have the offset, we set the html to the string at the position in the array
$('#wrapper #strategyBox #strategyText').html( obliqueStrategy[randomOffset] );
}
};
return api;
}();
$(document).ready(function() {
//here we call the bind action so the button will work, but we also explicitly call the generateRandomStrategy function so the page will preload with a random string at the start
localNameSpace.bindButtonAction();
localNameSpace.generateRandomStrategy();
});

Inappropriate use of setInterval

<html>
<head>
<script type="text/javascript" language="JavaScript">
var inter;
var seconds = 1;
function recharge()
{
inter = window.setInterval( "printA()" , 1000 );
}
function printA()
{
document.write( "you are here: " + seconds + " seconds" );
seconds++;
}
</script>
</head>
<body>
<button onclick="recharge();"> Start </button>
</body>
</html>
my problem is... recharge() contains a setInterval() that contains a function printA() this
function that does is print whit a document.write a variable that sum one every time that recharge
is called.. but just print 1 and doesnt print the next number. I tried whit a alert instead of document.write
and its work so I don't know what i am doing wrong. i am a noob. Thanks for your help.
So as I'm understanding your question and comments, you want to print something like this:
you are here: 2 seconds
you are here: 3 seconds
you are here: 4 seconds
I would recommend doing something like this:
<html>
<head>
<script type="text/javascript" language="JavaScript">
var inter;
var seconds = 1;
function recharge()
{
inter = window.setInterval( "printA()" , 1000 );
}
function printA()
{
document.body.innerHTML += "<div>you are here "+seconds+" seconds</div>";
seconds++;
}
</script>
</head>
<body>
<button onclick="recharge();"> Start </button>
</body>
</html>
The += will keep appending html to the document.
When you document.write(), the whole page is re-written, meaning all your JavaScript is lost. alert() should work however - what did you try? The innerHTML method by winhowes works probably best. Also I don't see what 'recharge();' is supposed to achieve.

Refreshing a div every 30 seconds [duplicate]

I'm working with a nice little Jquery that auto loads and refreshes a div every bla bla Seconds.
Works perfectly on all browsers then I load up IE and bang what a surprise no luck! :(
Index.html
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load').load('reload.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
<body>
<div id="load"> </div>
</body>
</script>
reload.php
<?
echo time(); //just a timestamp example..
?>
Any ideas guys?
Add a random value at the end of the url to avoid caching.. That should solve your problem. ex: $('#load').load('reload.php?_=' +Math.random()).fadeIn("slow");
Try closing your script tag before having your body tag.
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load').load('reload.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
</head>
<body>
<div id="load"> </div>
</body>
body {text-align:center; background-image: url('http://cdn3.crunchify.com/wp- content/uploads/2013/03/Crunchify.bg_.300.png')}
$(document).ready(function() {
auto_refresh();
});
function auto_refresh(){
var randomnumber = Math.floor(Math.random() * 100);
$('#show').text('I am getting refreshed every 3 seconds..! Random Number ==> '+ randomnumber);
}
var refreshId = setInterval(auto_refresh, 1000);

Categories

Resources