|
JavaScript - Onload / Auto Refresh
I have some sample ajax code i have been toying around with.
I have it updating & working properly, but you have to click a button first. How can I set it so that it automatically reads the contents of the text file on page load, and updates every 1000ms? I was trying Code: onload=setinterval(JavaScript:xmlhttpPost("status.php"),1000)
but had not luck Any suggestions? Code below. PHP Code: <? $myFile = "testFile.txt"; $fh = fopen($myFile, 'r'); $theData = fread($fh, 3); fclose($fh); echo $theData; ?> Code: <html>
<head>
<title>Simple Ajax Example</title>
<script language="Javascript">
function xmlhttpPost(strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepage(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(getquerystring());
}
function getquerystring() {
var form = document.forms['f1'];
var word = form.word.value;
qstr = 'w=' + escape(word); // NOTE: no '?' before querystring
return qstr;
}
function updatepage(str){
document.getElementById("result").innerHTML = str;
}
</script>
</head>
<body>
<form name="f1">
<p>word: <input name="word" type="text">
<input value="Go" type="button" onclick='JavaScript:xmlhttpPost("status.php")'></p>
<div id="result"></div>
</form>
</body>
</html>
Similar TutorialsBeen trying to get this auto refreshed instead of clicking to refresh <center><iframe src="http://orange.citrus3.com:8338/played.html" width=800 height=400 frameborder=0 scrolling=no id="myiframe"></iframe></center><br> <center><b><BIG><body link="#FF0000"><a href="javascript:myiframe.document.location.reload()">Refresh Current Song</a></BIG></b></center> I'm replacing the shoutbox on my site. Everything works and looks great. Now I'd like to make it auto refresh. Here's the update function. PHP Code: function updateShoutbox(){ //send the post to shoutbox.php $.ajax({ type: "POST", url: "shoutbox.php", data: "action=update", complete: function(data){ loading.remove(); messageList.html(data.responseText); } }); } And here is what I've tried to add to make it auti refresh, but it doesn't work. PHP Code: setTimeout('updateShoutbox()', 4000); I know very little about js, so any help is appreciated. <HEAD><TITLE>main</TITLE> <meta http-equiv="refresh" content="5;url=http://localhost/php_basic/short_pro/php/main.php"> <!--<script language="JavaScript"> var i=0; function validat() { setTimeout("moretext()",5000); alert("santosh"); } function moretext() { if(i==0) { alert(window.location); window.location.reload(); i++; } else { } } </script>--> </head> <BODY onload="validat();"> i hav written dis code to auto refresh page only once but it is refreshing after every 5 seconds. Earlier i hav wriiten meta tag but it is refreshing page after every 5 seconds & after that i hav wriiten script to auto reffresh page only once but they both r doin the same work,so can u plz help me in solvin my problem I have a web page that loads and Auto scrolls to the end. I need to either auto scroll up, or when it reaches the bottom auto refreshes back to the top. I have had to define a length longer than the document or I get scroll bars and the Iframe won't scroll. Here is the code. [Code] <html> <head> <script type="text/javascript" language="JavaScript" ></script> <title>How to Scroll the Page With JavaScript</title> <meta name="description" content="How to scroll the page automatically using JavaScript." /> <meta name="keywords" content="javascript, page, scroll" /> <script type="text/javascript"> function pageScroll() { window.scrollBy(0,25); scrolldelay = setTimeout('pageScroll()',5000); // scrolls every 1000 milliseconds } </script> </head> <iframe src="file:///D:/PrivateDocs/WorkflowPage/Stinkyxml.htm" name="frame1" scrolling="auto" frameborder="no" style="float:left" height="4500" width="100%"> <body onLoad="pageScroll()"></body> </iframe> <body> <body onLoad="pageScroll()"></body> </body> </html> [icode] Hello, I am fairly new to Javascript, but so far I have managed to have the page auto scroll when you browse. I was also able to get a button that toggles the start/stop of the scrolling. What I need to happen is when the scrolling reaches the bottom of the screen, I need it to refresh. Is this possible? Thank you in advance!!! Guy help me for the solution... how to refresh the markers only every x... below are my full scripts.... Code: <?php
define('INCLUDE_CHECK',1);
include "dbconnect.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="host_entry/js/jquery-1.7.1.min.js"></script>
<!-- Google Map JS -->
<script src="http://maps.google.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false" type="text/javascript"></script>
</head>
<div id="map_canvas" style="top:55px;left:13px;"> <!-- Map will display -->
<div id="map"> <!-- Fullscreen Loading & Fullscreen Buttons area -->
</div>
<!-- Fullscreen Loading & Fullscreen Buttons area Ends -->
</div><!-- Map Ends display -->
<script type="text/javascript">
/**function show_data()
{
$('#map').load('index.php');
}
setInterval('show_data()', 60000);
**/
var locations = [
<?php
$query="SELECT * from host_entry";
$result=mysql_query($query)or die(mysql_error());
{
if ($num=mysql_numrows($result))
{
$i=0;
while ($i < $num)
{
$id=mysql_result($result,$i,"id");
//$host_type=mysql_result($result,$i,"host_type");
$host_name=mysql_result($result,$i,"host_name");
$host_server=mysql_result($result,$i,"host_server");
$host_status=mysql_result($result,$i,"host_status");
$host_lapt=mysql_result($result,$i,"host_lapt");
$host_long=mysql_result($result,$i,"host_long");
$host_circuit=mysql_result($result,$i,"host_circuit");
$host_hotline=mysql_result($result,$i,"host_hotline");
if($host_status==0)
echo "['<div class=container style=width:400px;><div class=page-header><h4>$host_name</h4></div>', $host_lapt, $host_long],";
$i++;
}
}else {
echo "<h3 align='center'><font color='#ff0000'>No Content Found</font></h3>";
}
}
?>
];
// Setup the different icons and shadows
var iconURLPrefix = 'host_entry/img/';
var icons = [
iconURLPrefix + 'p_red_alert.png'
]
var icons_length = icons.length;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: -5,
center: new google.maps.LatLng(3.1215681, 101.71180140000001),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
disableDefaultUI: true,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
var marker;
var markers = new Array();
var iconCounter = 0;
var infowindow = new google.maps.InfoWindow({
maxWidth: 400,
maxHeight: 350,
});
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2], locations[i][3], locations[i][4], locations[i][5]),
map: map,
animation: google.maps.Animation.BOUNCE,
icon : icons[iconCounter],
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(
locations[i][0]
);
infowindow.open(map, marker);
setTimeout(function(){infowindow.close();}, '5000');
}
})(marker, i));
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if(iconCounter >= icons_length){
iconCounter = 0;
}
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
</script>
</body>
</html>
do i need to apply setInterval on the marker? how to apply it on the marker so it refresh every X second... please help for the solution.... I'm using meta refresh to refresh my web page. I have a small compose email window that appears via ajax when the user clicks on a name. Is there a way I can disable the screen refresh in my ajax code while they are composing their message? I currently have this on my companies website and it's having a bit of trouble sometimes where it will only work after a refresh. Is it possible to do a refresh of this div and script as soon as the site loads, instead of using the auto refresh. I tried using auto refresh and it works but whatever time interval I put for the auto refresh is the time that the script pops up, so it kind of just makes it worst. Code: <script type="text/javascript">
$(document).ready(function() {
$("#twitter").getTwitter({
userName: "lubellrosen",
numTweets: 4,
loaderText: "Loading Events...",
slideIn: true,
slideDuration: 750,
showHeading: false,
headingText: "Latest Tweets",
showProfileLink: false,
showTimestamp: false
});
});
</script>
If you go to a Youtube video by Justin Bieber or Rebecca Black, comments are constantly being posted and it seems like the autorefresh for the comments kicks in every half second. I don't plan on having millions of users viewing my page, but still, wouldn't having every user make a [mysql] request to the server every half second really take a toll on the server (especially since I don't plan to ever have the resources that Youtube has)? Facebook also seems to have instantaneous auto-refreshes, be it in comment boxes or their chat interface. So what would be the best method to implement a near-instantaneous autorefresh system with minimal resource usage? I've a web page when a user logs in, it will have a link that shows the "username" and a link for "logout". After the user logs out, the "username" and the "logout" links will change to "login" and "register" links, respectively. The page uses javascript to check a user cookie, if the user cookie exists, it will show the "username" link and the link for "logout". If no user cookie exists, "login" and "register" links will replace the "username" and "logout" links. Here's the problem: When a user who has log in, clicks the "logout" link, a perl script will delete the user cookie, and redirects back to the same page. The page does not show "login" and "register" links AUTOMATICALLY. Both links will appear ONLY after the user MANUALLY Refreshes the page. It appears that I need a system to refresh the page automacally ONLY one time. How can this be done? A noob needs some help. I'm using a combination of Yahoo Pipes and rssdisplayer.js to display some snippets from several RSS feeds on a new site I'm building. The trouble I'm having is that (i) the feeds don't update when I refresh the page, I think because a cached version of the page is being loaded, and (ii) I'd like to have the div containing the feeds auto-refresh at a given time interval. I've got a Twitter javascript working that does both these things, but can't work out how to get the rssdisplayer.js working this way. The rssdisplayer code is: Code: google.load("feeds", "1") //Load Google Ajax Feed API (version 1)
function rssdisplayer(divid, url, feedlimit, showoptions){
this.showoptions=showoptions || "" //get string of options to show ("date" and/or "description")
var feedpointer=new google.feeds.Feed(url) //create new instance of Google Ajax Feed API
feedpointer.setNumEntries(feedlimit) //set number of items to display
document.write('<div id="'+divid+'">Loading feed...</div>')
this.feedcontainer=document.getElementById(divid)
var displayer=this
feedpointer.load(function(r){displayer.formatoutput(r)}) //call Feed.load() to retrieve and output RSS feed
}
rssdisplayer.prototype.formatdate=function(datestr){
var itemdate=new Date(datestr)
return "<span style='color:gray; font-size: 90%'>"+itemdate.toLocaleString()+"</span>"
}
rssdisplayer.prototype.formatoutput=function(result){
if (!result.error){ //if RSS feed successfully fetched
var thefeeds=result.feed.entries //get all feed entries as a JSON array
var rssoutput="<ul>"
for (var i=0; i<thefeeds.length; i++){ //loop through entries
var itemtitle="<a href=\"" + thefeeds[i].link + "\">" + thefeeds[i].title + "</a>"
var itemdate=/date/i.test(this.showoptions)? this.formatdate(thefeeds[i].publishedDate) : ""
var itemdescription=/description/i.test(this.showoptions)? "<br />"+thefeeds[i].content : ""
rssoutput+="<li>" + itemtitle + " " + itemdate + itemdescription + "</li>"
}
rssoutput+="</ul>"
this.feedcontainer.innerHTML=rssoutput
}
else //else, output error
alert("Error fetching feeds: "+result.error.message)
}
//USAGE SYNTAX: new rssdisplayer("divid", "rssurl", numberofitems, "displayoptions")
//new rssdisplayer("adiv", "http://www.cssdrive.com/index.php/news/rss_2.0/", 5, "date, description")
Hey helpful people. I'm looking for a better solution to refreshing a page of mine, which currently single page (no frames) using meta refresh. To convert it something where it (using frames) would either: a. keep trying to refresh untill a var is recieved from the content, or b. present the browser with a button to refresh and a message that loading failed. But honestly i am a noob at javascript, to an extend i dont have much idea where to start on such a project. but learned this is not possible with regular html that is widely supported anyways. i suspect the:.. window.xx.location='url' ..is useful in this regard, but other than that i am blank on where to start. Any help is appresiated. Thanks in advance Jilli I'm attaching my php test file but this is a JS problem. When I scroll down in the web page and the meta refresh hits, in Windows Safari and IE6/7/8 browsers, the web page re-positions back to the top. In Opera and FF the page refreshes but it stays where it is. Can someone look at my test script and see why it is not working in IE and Win Safari? My goal is to have the web page not re-position to the top on the auto refresh. Thanks... Most of the Javascript I see has some sort of time limit on page reload and is not really what I am trying to accomplish: Code: <meta http-equiv="Refresh" content="10; URL=http://coffeeandtealtd.com/buynow.html" /> I am trying to make our buy page reload after clicking the Paypal "continue shopping" button in Paypal Website Standards. The pop up Paypal shopping cart window closes after clicking the button but our buy page doesn't reload. It doesn't reload in Safari although it seems to be fine in FF and IE. I am new to javascript coding and am not quite sure how to make the page reload in this specific instance only. Any sug's?? I have a php file lets say file1.php, that printing a variable, its dynamic numbers output that already always increasing, like private message numbers that coming or others : PHP Code: <?php echo $variable ?> i want to put that variable output, in another files page title, lets say file2.php or file3.html, in the front of the another files page titles, and auto refresh every x seconds, maybe like this : Quote: (1) - another text in the page title after x seconds, get a private message Quote: (2) - another text in the page title after another x seconds, get another private message Quote: (3) - another text in the page title or its ok if just like this, only the variable, without the another text in the page title Quote: (1) please share your knowledge to make it, maybe using javascript, jquery or others Hello Can anyone help with the following problem On the following page http://www.stroudskittles.co.uk/signingon.html I have a Body onload event (to load the chained Menu) and a windows.onload event (to load the IFrame Ticker) If I open the page in Internet explorer both scripts function; however in Firefox I'm having problems. The Chained Menu works, however the IFrame Ticker does not display. Both events ahave ben placed on the boady tag. Can anyone advise how I can get both to display in Firefox Can anyone Hi, I have the below code: Code: <script type="text/javascript">
function loadQuickMessageCheck(File,ID){
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
eucalyptus = setInterval(function(){loadQuickMessageCheck(File,ID)},20000);
}
}
xmlhttp.open("POST",File,true);
xmlhttp.send();
}
</script>
But I am overloading the server and crashing it. I've googled the issue and have found people with similar problems who talk about the need to cancel the last refresh request before they send the next refresh. I even found this nice piece of code which worked for someone else. Quote: try{window.clearTimeout(tRefresh)} catch(err) {} tRefresh = setInterval(setContext, varInterval*60*1000); } I am not sure if this is the solution that I am looking for but if it is all my attempts at applying this code has been a bit of a disaster. Hello, I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible. I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading: Code: <td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script. The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue.. http://watch-movies-online.anyfilman...-Movie-17.html To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com. If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required. Please feel free to ask any questions, i'll be happy to answer. Thanks in advance. Best Regards, Jonathan. Hi all I would like the img src to be populated after page load I'm not sure this is doing what I would like it to do. I have done this. (tag shortened for post) Code: <img src="" id="testImg2" onload="(this.src='images/USA.jpg')"/> Is this populating the img src after page load or when the img tag is loaded? LT Hi, I'm looking to create a box that shows to IE6 users or lower, to tell them that my site does not render properly in the IE6 browser and that they should therefore upgrade to a newer version or alternative browser. Basically I would put whatever the code to show the box into these tags: Code: <!--[if lte IE 6]> INSERT HERE <![endif]--> to enable it to only appear to IE6 or below users. Preferably when this box appeared, it would be nice if it could fade the page behind it. Does anyone have a script for this or know of a tutorial I could use? The box would also need buttons at the bottom that said "Ok, upgrade me" (this would load another window with links to alternative browsers) or "No thanks" (or "Close") Thanks in advance. |
|||||||