Simple JS Refresh Div Not Working - javascript

I've found a simple JS script that should refresh a div every 1000 milliseconds however it is not working, any help is appreciated.
Here's the script:
window.setInterval("refreshDiv()", 1000);
function refreshDiv(){
document.getElementById("timer").innerHTML;
}
Here's the div:
<div id="timer">
<div class="progress-bar" style="width:
<?php
echo (Pot::getTime(1) * 100) / 120;
?>%">
</div>
</div>
The script is within a file called script.js and is loaded at the bottom of the page like so:
<script src="/styles/js/script.js"></script>
Thank you in advance for any responses :-)

From the code you've provided it looks like you're not doing anything with the div when refreshDiv is called. If you are trying to change the text with innerHTML it needs to be something like document.getElementById("timer").innerHTML = 'something'
This javascript should work:
window.setInterval(refreshDiv, 1000);
function refreshDiv(){
document.getElementById("timer").innerHTML = 'example';
}
Note: using no quotes with just the function name in setInterval like refreshDiv instead of "refreshDiv()" is the recommended way.

Remove the quotes:
window.setInterval(refreshDiv, 1000);
setInterval expects to get a function, not a string.

Related

Reaload multiple DIVs in various times

I have a PHP+HTML+CSS app, this app has the main dashboard with multiple rows and columns in it (called widgets).
Widget is DIV and have set unique ID and some CSS classes. Like:
<div class="col-2 colstav" id="5">Test 5 velikost 2</div>
<div class="col-6 colstav" id="32">Test 32 velikost 6</div>
<div class="col-4 colstav" id="7">Test 7 velikost 4</div>
In PHP variable i have stored time (in miliseconds) for every ID after i need to reload file (content) of the DIV.
In PHP i have:
$column[5]["file"] = widget5.php;
$column[5]["refresh"] = 4000;
$column[32]["file"] = widget32.php;
$column[32]["refresh"] = 2000;
$column[7]["file"] = widget7.php;
$column[7]["refresh"] = 1000;
I cant find Javascript function for reloading DIVs content in time by PHP variables.
I found this ( http://jsfiddle.net/YVB9F/ ), but I'm failing to update this JS code :(.
Specification / Edit:
I need JS code like this:
<script>
var time_div_5 = 4000;
var time_div_32 = 2000;
var time_div_7 = 1000;
function content(content_file,div_id){
load(content_file) to target(div_id)
}
every(time_div_5){do: content("wg/widget5.php","5")}
every(time_div_32){do: content("wg/widget32.php","32")}
every(time_div_7){do: content("wg/widget7.php","7")}
</script>
I know how to add variables from PHP to script.
After some research ai have this script, but is not working:
<script>
function reload_div(file,iddiv){
$(iddiv).load(file);
}
setInterval(reload_div("widgets/widget1.php",1), 1000);
setInterval(reload_div("widgets/widget2.php",2), 4000);
</script>
<div id="1"></div>
<div id="2"></div>
Many thanks for any help.
As denmch mentioned in the comments you should make asynchronous request using AJAX. The way you are trying to achieve is not a good practice.
Also, I can see you are trying to load content from a file by jQuery.load() but your id selector seems wrong, reload_div("widgets/widget1.php",1) will try to find the elements matching selector $(1) and probably fail. Append # character to your iddiv parameter inside your reload_div function.
I will solve this by generating this code for every widget:
<script>setInterval(function() {$('#1').load('widgets/_blank.php');},5000)</script>
In PHP:
echo "<script>";
echo 'setInterval(function() {'."$('#".$tmp_idwidget."').load('".$temp_path."');},".$tmp_refresh.")";
echo "</script>";
And its works, but i think, not most effective and clean way :D.

How to take a variable from a function in a javascript file, and display it with html in a seperate file

I'm pretty sure this is a very basic question, yet dispite looking through the internet I cannot understand how to do it. Please note that today is my first time ever using javascript and I have very little idea in what I am doing.
Anyway, I have a HTML file and a Javascript file. The javascript file's purpose is to generate a random interger between 1 and 10. I have achieved this with a function which I will display with the rest of my code below. The idea is that with a button press, the function will activate and put it into a "div" tag. Then, the output should display underneath. The problem is I'm recieving no output. Here's a few chunks of my HTML code:
<head>
<script src="japanese.js" type="text/javascript"> </script>
<link rel="stylesheet" type="text/css" href="japanese.css">
</head>
<button onclick="random()">Random integer</button>
<br>
<div id="result"> </div>
And also my javascript code, in a seperate file:
function random() {
var integer = (Math.floor(Math.random() * (10))) + 1;
document.getElementById('result').value = integer;
}
Please just give me a straight up answer rather then redirecting me to a link.
Thank you for your time.
You missed out the closing bracket ) right before +. And also to display the result in div, you should set the value in innerText or innerHTML property, value property is for inputs.
function random() {
var integer = (Math.floor(Math.random() * (10))) + 1;
document.getElementById('result').innerText = integer;
}
<button onclick="random()">Random integer</button>
<br>
<div id="result"> </div>

Javascript code to open a url on click in the same window

Im' stuck in a probably easy problem. Sorry I'm a beginner !
I have this
<div class="icon-1"></div>
<div class="icon-2"></div>
<script>
$(function() {
onclick('icon-1').openurl('http://acdefg.com');
onclick('icon-2').openurl('http://ghijkl.com');
}
</script>
...I mean, that if I click on "icon-1", then I go to URL "...."
If i click on "icon-2" then I go to URL "..."
etc.
Could you please help me ?
Well, you could define something like:
document.getElementByClassName("icon-1").onclick=function(){
window.location.href = 'http://abcdef.com';
};
You could also pull in an elements attribute (for examle, data-href) to full in the variable (instead of setting it specifically in JS, then you would only need 1 JS function for all occurrences).
However, can I ask - why don't you just use HTML a tags with href values?
Try this using jQuery (which is bundled with WordPress): https://jsfiddle.net/wu24bnbc/2/
<div class="icon-1">Icon 1</div>
<div class="icon-2">Icon 2</div>
<script>
jQuery(function() {
jQuery('.icon-1').click(function() {
window.location.href = 'http://acdefg.com';
});
jQuery('.icon-2').click(function() {
window.location.href = 'http://ghijkl.com';
});
});
</script>
Edit: I think you need to use jQuery instead of the $ shorthand with WP.

Javascript or css onclick function hide

I have the href: <a class="like_counter_wrap fl_l" onclick="openFullList();">
I need to hide the function openFullList();. How to do this?
Ok, the code:
<!--Vk.com-->
<div class='scVK scSB'>
<script type='text/javascript' src='http://userapi.com/js/api/openapi.js?49'></script>
<script type='text/javascript'>VK.init({apiId: 2010456, onlyWidgets: true});</script>
<div id='vk_like'></div>
<script type='text/javascript'>
VK.Widgets.Like('vk_like', {type: 'button', height: 20});
</script></div>
is forms <a class="like_counter_wrap fl_l" onclick="openFullList();">. The idea is to prevent function "openFullList();"
JavaScript is client side code, meaning ALL code is viewable by somebody in a browser, as long as they dig deep enough. Sure, you could minify it like tyme suggests, but be aware one can still use a tool like the Chrome web inspector to find the exact line number and snippet of code run for the click event.
Basic answer: if the flow of how your code runs must not be "visible" to the end client, JavaScript is not the language you want to be using.
You can change your markup to this
<a class="like_counter_wrap fl_l">
now you wrap your function in a script tag and place it before the closing tag body (for performance)
<script>
function openFullList(){
//do something
}
var button = document.querySelector(".like_counter_wrap");// document.querySelector("a");
button.addEventListener("click",openFullList,false);
<script>
or put it in a file and bind it to your HTML like this
<script src="script/myscript.js"></script>
Hi what if you do like below,
<a class="like_counter_wrap fl_l" onclick="openFullList(true);">link1</a>
<a class="like_counter_wrap fl_l" onclick="openFullList(false);">link2</a>
then script as follows,
function openFullList(val) {
var showList = val;
if (showList)
{
//allow your function to execute
}
else
return false; //dont allow the function to execute simple by returning false
}
So, If you want to show list if user clicks on the link then pass true while calling the function or else pass false...hope it helps...

Calling a function when anything in the HTML body changes without using onclick or setInterval

I have a HTML code as :
<body>
<div id = "mypage">
<svg>....</svg>
<div>Hello all, how are you?</div>
<img>........</img>
</div>
</body>
When I highlight any part on this page (highlighting "how are") a span is attached to this part in the body and the resulting code becomes:
<body>
<div id = "mypage">
<svg>....</svg>
<div>Hello all, <span class="highlight">how are</span> you?</div>
<img>........</img>
</div>
</body>
This means a change has occured in the HTML body. Now, when this happens I want to trigger a javascript function. i.e. the function should be called whenever any change in the body happens.
I know this can be done by running the function via setInterval and continuously checking for any changes. Can I avoid it and trigger the function just when any change occurs?
did you try this in your JS(Jquery is required).
$(body).change(function() {
yourFunction();
});

Categories