Auto refresh a specific div blogger javascript - javascript
I use a Javascript widget on a blogspot. It include a div with some javascripts that get some "non-statical" strings from a server and print them on the page. Until here everything works fine, the problem is that I would like to update the execution of this div every few seconds in order to have updated strings, without refreshing the whole page, but just the specific widget (div). I have added another script that tries to refresh the specific div, but I had no luck. Please see the code below
<div id="info">
<b>Song:</b>
<script type="text/javascript" src="xxxx">
You appear to have javascript turned off.
</script>
<br />
<b>Listeners:</b>
<script type="text/javascript" src="xxxx">
You appear to have javascript turned off.
</script>
<br />
<b>Server Status:</b>
<img src="xxxxx.gif" alt="Stream status" width="17" height="17" align="absmiddle" />
</div>
Script for refreshing:
<script type="text/javascript">
window.onload = startInterval;
function startInterval()
{
setInterval("startTime();",5000);
}
function startTime()
{
document.getElementById('info').innerHTML = ??? // reload div
}
</script>
Additionally something like this could be used, but this method reload the whole page and not the specific div.
<script>
setInterval(function() {
parent.location.reload(true);
}, 5000);
</script>
Last Update
I try with Ajax and with created element.
With this technique, load the contains of the scripts but the document.write() not function.
Because this write() need the refresh page()!!
Just returning a value from a function does not place that value into an HTML element in any way. One could either use document.write (not recommended), or access the element via its id and write the desired element content via .innerHTML=…
Explain.
If you will be displaying it on page, first create an element with an id "message" (you can write anything you want, but remember, id's have to be unique on the page) like
<div id="message"></div>
and then use
document.getElementById("message").innerHTML = "New title";
or if you are using jQuery:
$("#message").html("New title");
or if you are using a console enabled browser (Firefox, Chrome etc.)
console.log("New title");
instead of
document.write("New title");
THEN document.write only for page loading time.
You have to change the scripts and replace document.write()
I put the my code with createElement and on the comment you look the my work.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body onload="JavaScript:timedRefresh(5000);">
<div id="info">
<b>Song:</b>
<script type="text/javascript" src="http://shoutcast.mixstream.net/js/song/uk23-free:5106">You appear to have javascript turned off.</script>
<br />
<b>Listeners:</b>
<script type="text/javascript" src="http://shoutcast.mixstream.net/js/listeners/uk23-free:5106">
You appear to have javascript turned off.
</script>
<br />
<b>Server Status:</b>
<img src="http://shoutcast.mixstream.net/status/uk23-free:5106.gif" alt="Stream status" width="17" height="17" align="absmiddle" />
</div>
<script type="text/javascript">
function timedRefresh(timeoutPeriod) {
var myVar=setInterval(function(){myTimer()},timeoutPeriod);
function myTimer()
{
document.getElementById("info").innerHTML="";
var b=document.createElement('B');
b.appendChild( document.createTextNode("Song") );
document.getElementById("info").appendChild(b);
// span.innerHTML="";
// span.appendChild( document.createTextNode("hello") );
// document.getElementById('myspan').innerHTML = 'newtext';
var src1 = 'http://shoutcast.mixstream.net/js/song/uk23-free:5106',
script1 = document.createElement('SCRIPT');
script1.type="text/javascript";
script1.src = src1;
document.getElementById("info").appendChild(script1);
var br= document.createElement('BR');
document.getElementById("info").appendChild(br);
document.getElementById("info").appendChild(br);
var b=document.createElement('B');
b.appendChild( document.createTextNode("Listeners") );
document.getElementById("info").appendChild(b);
var src2 = 'http://shoutcast.mixstream.net/js/listeners/uk23-free:5106',
script2 = document.createElement('SCRIPT');
script2.type="text/javascript";
script2.src = src2;
document.getElementById("info").appendChild(script2);
document.getElementById("info").appendChild(br);
var b=document.createElement('B');
b.appendChild( document.createTextNode("Server Status") );
document.getElementById("info").appendChild(b);
var src3 = 'http://shoutcast.mixstream.net/js/song/uk23-free:5106',
script3 = document.createElement('IMG');
script3.src = src3;
script3.alt="Stream status";
script3.width="17";
script3.height="17";
script3.align="absmiddle";
document.getElementById("info").appendChild(script3);
//
// document.body.appendChild(script);
//
// document.body.info.appendChild(b);
// document.getElementsByTagName('b')[1].appendChild( document.createTextNode("Listeners") );
// document.body.info.appendChild(script2);
// var br= document.createElement('BR');
//
// document.body.info.appendChild(br);
}
// // create an object of the head element of current page
// var hdEl = document.getElementsByTagName("song");
//
// //check for previously appended child
// //(it ensures that each time the button is pressed it
// // removes the previously loaded script element)
// if (hdEl.childNodes.length > 1) {
// hdEl.removeChild(hdEl.lastChild);
// }
//
// // Now add this new element to the head tag
//
//
// //Create a 'script' element
// var scrptE = document.createElement("script");
//
// // Set it's 'type' attribute
// scrptE.setAttribute("type", "text/javascript");
//
// // Set it's 'language' attribute
// scrptE.setAttribute("language", "JavaScript");
//
// // Set it's 'src' attribute
// scrptE.setAttribute("src", "http://shoutcast.mixstream.net/js/song/uk23-free:5106");
//
// // Now add this new element to the head tag
// hdEl.appendChild(scrptE);
// // document.getElementsByTagName("song").appendChild(scrptE);
// //This is a old:
// setTimeout("alert("ojk");",timeoutPeriod);
// // This function!!!
// setTimeout("document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;",timeoutPeriod);
// var oHead = document.getElementsByTagName('HEAD').item(0);
// var oScript= document.createElement("script");
// oScript.type = "text/javascript";
// oScript.src="other.js";
// oHead.appendChild( oScript);
}
</script>
</body>
</html>
UPDATE:
THEN....
I change your site and now function!!!
And on the my pc this site is refresh every 5 second!!!
You have always the two particular errors.
This work for you but you have the particular error.
Resource interpreted as Script but transferred with MIME type text/html: "http://xxxx". on the sentence n° 13 and also for sentence n°18.
http://xxxx
This error I find with the tool's chrome (Inspect element).
The solution is on Stackoverflow or prefier the blog.
I have the software is Kubuntu (KDE + Ubuntu) and I don't know for change the value 's registry.
Solution:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body onload="JavaScript:timedRefresh(5000);">
<div id="info">
<b>Song:</b>
<script type="text/javascript" src="xxxx">You appear to have javascript turned off.</script>
<br />
<b>Listeners:</b>
<script type="text/javascript" src="xxxx">
You appear to have javascript turned off.
</script>
<br />
<b>Server Status:</b>
<img src="xxxx.gif" alt="Stream status" width="17" height="17" align="absmiddle" />
</div>
<script type="text/javascript">
function timedRefresh(timeoutPeriod) {
//This is a old:
//setTimeout("location.reload(true);",timeoutPeriod);
// This function!!!
setTimeout("document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;",timeoutPeriod);
}
</script>
</body>
</html>
Or other solution:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body >
<div id="info">
<b>Song:</b>
<script type="text/javascript" src="xxxx">You appear to have javascript turned off.</script>
<br />
<b>Listeners:</b>
<script type="text/javascript" src="xxxxx">
You appear to have javascript turned off.
</script>
<br />
<b>Server Status:</b>
<img src="xxxxx.gif" alt="Stream status" width="17" height="17" align="absmiddle" />
</div>
<script type="text/javascript">
// function timedRefresh(timeoutPeriod) {
// setTimeout("document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;",timeoutPeriod);
// document.getElementById("info").innerHTML=document.getElementById("info").innerHTML
// }
window.setInterval("refreshDiv()", 5000);
function refreshDiv(){
document.getElementById("info").innerHTML = document.getElementById("info").innerHTML;
}
</script>
</body>
</html>
This is a old site but not refresh the site.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="info">
<b>Song:</b>
<script type="text/javascript" src="xxxx">You appear to have javascript turned off.</script>
<br />
<b>Listeners:</b>
<script type="text/javascript" src="xxxx">
You appear to have javascript turned off.
</script>
<br />
<b>Server Status:</b>
<img src="xxxx.gif" alt="Stream status" width="17" height="17" align="absmiddle" />
</div>
<script type="text/javascript">
setInterval(function(){
document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;
}, 5000);
</script>
</body>
</html>
here is a fiddle working example of how i typically declare my set interval functions...
this one is setting the inner html of my #info div to a timestamp just so u can see that it is functional.
fiddle here with set interval
but i think there is another flaw in this process...
it looks like here you are updating the contents of the div to exactly the same html as they were before:
document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;
this is likely your issue, the external scripts you are using are likely writing html, and you are just copying it rather than running those scripts again. what you want to do is run some sort of AJAX call to rerun those scripts.
you can do this more easily with the jquery library if you are interested in going that route. or to maintain strict javascript i would reccomend starting here:
w3 ajax tutorial
Related
Unable to trigger event handler on 'DOMContentLoaded' event
I'm trying to print output to console when a document is loaded. Below is the code I have written. But there's no output displayed.
var div = document.querySelector('#red');
document.addEventListener('DOMContentLoaded',function (){
console.log('event triggered...');
});
Output is displayed correctly when I use below code. Can you please explain me the reason for this behavior?
var div = document.querySelector('#red');
window.addEventListener('load',function (){
console.log('event triggered...');
});
My simple HTML:
<html>
<head>
<title>enlitle</title>
<link href='styleSheet.css' type='text/css' rel='stylesheet' id='linkElement' />
<script async type='text/javascript' src='scripts.js'></script>
</head>
<body>
<div id='blue'>
<div id='red'>
</div>
</div>
</body>
</html>
Before/After Plugin [javascript/jquery] does not load correctly after auto size adjustment
First of all: It's my first time using javascript.
I wanted to implement the Before/After Plugin into Powerpoint. So I created a html file that I loaded with a webbrowser object in Powerpoint. That worked basically but the plugin requires me to define the height and width statically for the pictures I use:
<html>
<head>
<meta charset="UTF-8">
<title>SomeTitle</title>
</head>
<body>
<div id="container">
<div><img alt="before" src="pics1/before.jpg" width="3696" height="1583" /></div>
<div><img alt="after" src="pics1/after.jpg" width="3696" height="1583" /></div>
</div>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
<script type="text/javascript">
$(function(){
$('#container').beforeAfter({
imagePath: 'js/',
showFullLinks: false
});
});
</script>
</body>
</html>
So I wanted to implement the function that the size is statically defined but determined once in the beginning by the size of the screen. After experimenting a bit I found a solution that works partly:
<html>
<head>
<meta charset="UTF-8">
<title>SomeTitle</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
/* <![CDATA[ */
var wi=screen.availWidth-20;
var img1=document.createElement("img");
img1.alt="before";
img1.src="pics1/before.jpg";
img1.height=wi*img1.height/img1.width;
img1.width=wi;
document.getElementById("container").appendChild(img1);
var img2=document.createElement("img");
img2.alt="after";
img2.src="pics1/after.jpg";
img2.height=wi*img2.height/img2.width;
img2.width=wi;
document.getElementById("container").appendChild(img2);
/* ]]> */
</script>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
$('#container').beforeAfter({
imagePath: 'js/',
showFullLinks: false
});
});
/* ]]> */
</script>
</body>
</html>
The problem now is/are following:
Firefox: Does not load the pictures at the first time but after refreshing it works perfectly.
IExplorer: It does not show anything.
Chrome: It does not show aynthing.
Powerpoint WebBrowser: It does not show aynthing.
I already tried to fix by the "$(document).ready(function() {..." part but it does not help at all.
What's wrong here?
jquery not firing at all
Starting a new site and can't get any jquery to fire. I've tried just executing some in the console in browser to test, moved from external jquery to inside the <head> and can't get anything. It isn't even seeing that first function as existing. I've a feeling it's something so stupidly simple I'm overlooking, but I'm just exhausted from looking over the same <100 lines. One of the errors I try when manually getting the width is this.
Failed to execute 'querySelector' on 'Document': '[object Window]' is not a valid selector."
Suggestions?
<!DOCTYPE HTML>
<html>
<head>
<script href="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script href="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<title>Daniel Jenkins</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:700' rel='stylesheet' type='text/css'>
<script>
function set_container_sizes(){
console.log("Setting div sizes");
var window_width = $(window).width();
console.log("Window is "+window_width+"px wide");
var window_height = $(window).height();
console.log("Window is "+window_height+"px tall");
$('#outer_container').css('max-height',window_height+'px');
$('#outer_container').css('max-width',window_width+'px');
}
$( document ).ready(function(){
console.log("Document now ready");
set_container_sizes();
});
$( window ).resize(function(){
console.log("Window resized");
set_container_sizes();
});
</script>
</head>
<body>
<div id="outer_container">
<div id="inner_top">
<div id="top_head">
Daniel L. Jenkins
</div>
</div>Hello there <div id="inner_bottom">
</div>
</div>
</body>
</html>
The issue is that you are using "href" inside the script tag instead of "src".
I think it should be <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
Javascript in separate file not working
I'm just starting out in Javascript, and I'm trying to put my scripts in a separate file. They work just fine when they're in the html file, but as soon as I move them to their own separate file it stops working.
Here's my html file:
<!DOCTYPE html>
<head>
<meta lang = "en">
<link rel="stylesheet" type="text/css" href="css/mainStyle.css">
<script src="js/script1.js"></script>
<title>Web Dev Practice</title>
</head>
<body>
<h1>First JavaScript Example</h1>
<button type="button" onclick="changeText()">ClickMe!</button>
<p id="demo">This is just a test.</p>
</br>
</br>
<h1>Second JavaScript Example</h1>
<img id="lightBulb" onclick="changeImage()" src="res/img/pic_bulboff.gif" width="100" height="180">
<p>Click the light bulb to turn it on or off.</p>
</body>
</html>
And here's my js file:
<script>
function changeText(){
var string_first = "This is just a test.";
var string_second = "Woah, it actually works!";
if(document.getElementById("demo").innerHTML == string_first){
document.getElementById("demo").innerHTML = string_second;
} else{
document.getElementById("demo").innerHTML = string_first;
}
}
<script>
function changeImage(){
var image = document.getElementById('lightBulb');
if(image.src.match("bulbon")){
image.src = "res/img/pic_bulboff.gif";
}
else{
image.src = "res/img/pic_bulbon.gif";
}
}
</script>
The <script> tags are html things, not javascript, so you don't need (and can't have) them in your external files. What browser are you using? Many have a built in console that can help you see what errors, if any, your page is throwing.
Jquery not works for javascript innerHtml
Please have a look on code written below. I am trying to have a multiple timer on one page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="jquery.countdown.css" media="all" type="text/css" />
<style type="text/css">
#defaultCountdown { width: 240px; height: 40px; }
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script language="javascript" type="text/javascript">
function LoadText()
{
document.getElementById('dd').innerHTML = '<div id=\"defaultCountdown\" class=\"countdown\" rel=\"87401\">hjhg</div><br/><div id=\"defaultCountdown\" class=\"countdown\" rel=\"60\">hjgj</div><br/><div id=\"defaultCountdown\" class=\"countdown\" rel=\"1800\">hjhg</div><br/>';
}
</script>
</head>
<body>
<div id="dd">
</div>
<script type="text/javascript">
// Initialization
$(document).ready(function()
{
var date = new Date();
$('div.#defaultCountdown').each(function()
{
$(this).countdown
({
until:parseInt($(this).attr("rel"),10),
format:"DHMS",
expiryText:"Expired"
})
})
});
</script>
</body>
</html>
My code works fine when I create Divs Hardcoded. But when I load it through Ajax (For understanding of code, for the time being I am creating Divs using Function LoadText()), I am not able to get it displayed. Please help me out.
For one, you have this: div.#defaultCountdown which should be: div#defaultCountdown
I don't see you calling your LoadText function anywhere ID's are required to be unique within a document, and your LoadText function does not respect that rule Unrelated, but you don't need to escape those double quotes inside of your single quoted string in LoadText
You should be using a class or unique IDs for the #defaultCountdown div.
Also this would confuse the selector engine since you are telling it to look for a class with a # sign in it:
$('div.#defaultCountdown').each(function()
Try changing it to a class and use:
$('div.defaultCountdown').each(function()
Update: Ok, the reason why your code isn't working is because the LoadText() function is never called. If you update your script to look like this, it will work (demo):
$(document).ready(function() {
// This is needed to simulate the ajax call
LoadText();
// set up countdown timers
var date = new Date();
$('div.countdown').each(function() {
$(this).countdown({
until: parseInt($(this).attr("rel"), 10),
format: "DHMS",
expiryText: "Expired"
});
});
});
sounds like a timing issue. your jQuery code runs when the data is rendered to the page not after your ajax query completes. Make that a function rather than something to run on ready and call it after the ajax finishes.
Your $('div.#defaultCountdown').each(function() loop runs once when the document is ready - if you subsequently add new divs using Ajax then you need to make sure you re-run your $('div.#defaultCountdown').each(function() code again now that new divs have been added.
The jQuery live() function is good for this.
The working Code if I am not using Ajax Response Text or JavaScript innerHTML. Any solution in this direction will be appriciated. Please find below the modified code that is working. In this code I have created the divs hardcoded. Both the codes can be tested by copying this codes and saving it to html file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Count Down Timer</title>
<link rel="stylesheet" href="jquery.countdown.css" media="all" type="text/css" />
<style type="text/css">
#defaultCountdown { width: 240px; height: 40px; }
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script language="javascript" type="text/javascript">
**//function LoadText()
// {
// document.getElementById('divo').innerHTML='<div id="defaultCountdown" class="countdown" rel="87401">aaa</div><br/><div id="defaultCountdown" class="countdown" rel="60">bbb</div><br/><div id="defaultCountdown" class="countdown" rel="1800">ccc</div><br/>';
// }**
// Initialization
$(document).ready(function()
{
var date = new Date();
$('div.countdown').each(function()
{
$(this).countdown
({
until:parseInt($(this).attr("rel"),10),
format:"DHMS",
expiryText:"Expired"
})
})
});
</script>
</head>
<body>
<div id="divo">
<div id="defaultCountdown" class="countdown" rel="87401">aaa</div><br/><div id="defaultCountdown" class="countdown" rel="60">bbb</div><br/><div id="defaultCountdown" class="countdown" rel="1800">ccc</div><br/>
</div>
</body>
</html>