JavaScript - How To Reload A Website Without Reloading Of Main Content ?

hi,

I have a google map which shows a car moving along a line that it reads from xml. This is the code that moves the map and the car image:

Code:

     // Returns the bearing in radians between two points.
     function bearing( from, to ) {
       // See T. Vincenty, Survey Review, 23, No 176, p 88-93,1975.
       // Convert to radians.
       var lat1 = from.latRadians();
       var lon1 = from.lngRadians();
       var lat2 = to.latRadians();
       var lon2 = to.lngRadians();

       // Compute the angle.
       var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
       if ( angle < 0.0 )
	angle  += Math.PI * 2.0;
        			if (angle == 0) {crash;}
       return angle;
     }

      function plotcar() {
        var cosa = Math.cos(angle);
        var sina = Math.sin(angle);
        canvas.clearRect(0,0,32,32);
        canvas.save();
        canvas.rotate(angle);
        canvas.translate(16*sina+16*cosa,16*cosa-16*sina);
        canvas.drawImage(img,-16,-16);
        canvas.restore();
      }


//=============== animation functions ======================
function animate(d) {
        if (d>eol) {
          return;
        }
        var p = poly.GetPointAtDistance(d);
		if (k++>=180/step) {
          map.panTo(p);
          k=0;
        }
        map.panTo(p);
        marker.setPoint(p);
		if (supportsCanvas) {
          if (poly.GetIndexAtDistance(d)>lastVertex) {
            lastVertex = poly.GetIndexAtDistance(d);
            if (lastVertex == poly.getVertexCount()) {
              lastVertex -= 1;
            }
            while (poly.getVertex(lastVertex-2).equals(poly.getVertex(lastVertex-1))) {
              lastVertex-=1;
            }
            angle = bearing(poly.getVertex(lastVertex-2),poly.getVertex(lastVertex-1) );
            plotcar();
          }
        }
        setTimeout("animate("+(d+step)+")", tick);
      }

function startAnimation() {
        eol=poly.Distance();
        map.setCenter(poly.getVertex(0),16);
        map.addOverlay(new GMarker(poly.getVertex(0),G_START_ICON));
        map.addOverlay(new GMarker(poly.getVertex(poly.getVertexCount()-1),G_END_ICON));
		if (supportsCanvas) {
          marker = new ELabel(poly.getVertex(0), '<canvas id="carcanvas" width="32" height="32"><\/canvas>',null,new GSize(-16,16));
	        map.addOverlay(marker);
          canvas = document.getElementById("carcanvas").getContext('2d');
          var p0 = poly.getVertex(0);
	        var p1 = poly.getVertex(1);
          angle = bearing(p1,p0);
          plotcar();
        } else {
          marker = new GMarker(poly.getVertex(0),{icon:car});
          map.addOverlay(marker);
        }
        poly2 = new GPolyline([poly.getVertex(0), poly.getVertex(1), poly.getVertex(2)], 0,0);
//        map.addOverlay(poly2);
        setTimeout("animate(0)",2000);  // Allow time for the initial map display
}

It works fine as you can see here

but the problem is that if the user clicks the button again without reloading the page, the map moves but the car remains at its last point.

From what I can figure out, this means that the startAnimation() function has restarted but the animate(d) function has not restarted.

but trying to call the animate(d) function from the button, where the startAnimation() gets called, he

Code:

<input type="button" onclick="startAnimation();return false;" value="show bus route 1">

results in an error that d is not defined.

is there some way of resetting the animate(d) function when the startAnimation() function gets called, so everything goes back to the start? Or is there some other way of "refreshing" everything without reloading the page?

thanks in advance.

hi, everyone, I'm struggling to figure out how to make my image automatically reload. particularly when the image is randomly selected from a folder.

The timing seem to work as the first image disappear after 5 seconds as dictated in the first JavaScript but it simply stays black. Why is the next images not being loaded?

http://www.lost-ear-studio.com
I'm new with JavaScript big time and tonight is the first time I've really dived into it.

Thank you for any advice.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lost Ear Studio</title><link rel="stylesheet" href="style.css" type="text/css" />

  <script type="text/javascript">
    window.onload = startInterval;	
    function startInterval()
    {
        setInterval("startTime();",5000);
    }

    function startTime()
    {
        document.getElementById('time').innerHTML = Date();
    }
</script>

<script type="text/javascript">
	function resizeToMax(id){
    myImage = new Image() 
    var img = document.getElementById(id);
    myImage.src = img.src; 
    if(myImage.width > myImage.height){
        img.style.width = "100%";
    } else {
        img.style.height = "100%";
    }
}
</script>

</head>

<body>

<div id="time">

<script type="text/javascript" language="JavaScript">
NumberOfImagesToRotate = 107;
FirstPart = '<img id="bg" src="images/bg/bg_';
LastPart = '.jpg" onload="resizeToMax(this.id)">';
function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.write(FirstPart + r + LastPart);
}
</script>

<script type="text/javascript" language="JavaScript">
printImage();
</script>

</div>

I started on the following page (part of an asp.net solution), but the damned thing keeps reloading. Anyone able to spot the problem?

Cheers!
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
	Untitled Page
</title></head>
<body>
    <form name="form1" method="post" action="jstest3.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMjYxNzg2NjFkZMc95XPGgLBVJLhpE9SpA+WIaf+s" />
</div>

<div>

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKUmIGgCgLs0bLrBgKM54rGBm+z7+T68pYhg8H9O6b/Ex0HpZ0A" />

</div>
    <div>
        <input name="TextBox1" type="text" id="TextBox1" />
        <input type="submit" name="Button1" value="Button" id="Button1" />

        <script language="javascript" type="text/javascript">
            if (parent != null) {
                tb = parent.document.getElementById("TextBox");
                tbLocal = document.getElementById('TextBox1');
                if (tb != null)
                    tbLocal.value = tb.value;
                btn = document.getElementById('Button1');
                if (btn != null)
                    btn.click();
            }
        </script>

    </div>
    </form>
</body>

</html>

Hi,
I have a script that writes to an IFRAME, it writes dynamically and then needs to reload it server side. Anybody knows how to do it? I'm joining the code of my attempt but it appears to be reloading the IFRAME on the client side therefore causing an activeX error since I am running this in FireFox:
PHP Code:
    var frTraductionID = document.getElementById("frTraduction");
    frTraductionID = (frTraductionID.contentWindow) ? frTraductionID.contentWindow : (frTraductionID.contentDocument.document) ? frTraductionID.contentDocument.document : frTraductionID.contentDocument;
    var x=frTraductionID.document.getElementById("hCount").value;
    var ifrm = document.getElementById("ifUPDATE");
    ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
    ifrm.document.open();
    ifrm.document.write('<scr' + 'ipt language=javascript type="text/javascript" runat=server>');
    ifrm.document.write('var fso = new Active' + 'XObject("Scripting.FileSystemObject"); ');
    ifrm.document.write('var f = fso.OpenTextFile("' + sFileName + '", 2, true); ');
    for (var i=0;i<x;i+=1) {
        var sString="";
        sString +="f.WriteLine('";
        sString +=frTraductionID.document.getElementById("h"+i).value;
        sString +='="';
        sDetail=frTraductionID.document.getElementById("d"+i).value.replace('"', ' ');
        sDetail=sDetail.replace("'", "`");
        sString +=sDetail;
        sString +='"';
        sString +="')";
        sString +="; ";
        alert("i = " + i + " str = " + sString);
        ifrm.document.write(sString);
    }
    ifrm.document.write("f.Close();");
    ifrm.document.write("</Scr" + "ipt>");
    ifrm.document.close();
    document.getElementById('ifUPDATE').contentWindow.location.reload(true); 


any help would be appreciated.

Hi there.

I am not all that great at coding, but would like to put together a windows sidebar gadget that keeps track and logs specific activities. Some daily, some weekly, some monthly, ect.

I need to find a way to refresh a small imported java script every time a button is pressed without refreshing the entire form. Would also like to have it refresh automatically every hour if possible.

The line of code to reload is <script src="http://www.dgdevelco.com/quotes/quotestxt.js"></script>.

Here is the entire code:

<html>
<head>
<title>Form</title>

<style>
body
{
margin: 0;
width: 130px;
height: 400px;
background-image: url(bg.jpg);
}
</style>

<script type="text/javascript">
/*Enable Gadget Setting Functionality.*/
System.Gadget.settingsUI="settings.html";
</script>

</head>

<g:background style="position:absolute;top:0;left:0;z-index:-999;no=repeat;" />

<form name="Form">
<table width="128" style="position: absolute; left: 1px; top: 1px;">
<tr>
<td><input type="checkbox" name="item" value="01"></td>
<td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 1</td>
</tr>
<tr>
<td><input type="checkbox" name="item" value="02"></td>
<td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 2</td>
</tr>
<tr>
<td><input type="checkbox" name="item" value="03"></td>
<td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 3</td>
</tr>
<tr>
<td><input type="checkbox" name="item" value="04"></td>
<td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 4</td>
</tr>
<tr>
<td><input type="checkbox" name="item" value="05"></td>
<td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 5</td>
</tr>
<tr>
<td><input type="checkbox" name="item" value="06"></td>
<td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 6</td>
</tr>
<tr>
<td><input type="checkbox" name="item" value="07"></td>
<td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 7</td>
</tr>
<tr>
<td><input type="checkbox" name="item" value="08"></td>
<td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 8</td>
</tr>
<tr>
<td><input type="checkbox" name="item" value="09"></td>
<td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 9</td>
</tr>
<tr>
<td><input type="checkbox" name="item" value="10"></td>
<td style="font-family: 'Arial Narrow'; font-size: 10px;">Item 10</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit" style="font-family: 'Arial Narrow'; font-size: 10px; float: left;">
<input type="reset" value="Reset" style="font-family: 'Arial Narrow'; font-size: 10px; float: right;">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="button" name="Report" value="Report" style="font-family: 'Arial Narrow'; font-size: 10px;">
</td>
</tr>
<tr>
<td colspan="2">
<font style="font-family: 'Arial Narrow'; font-size: 10px; text-align: center;">
<script src="http://www.dgdevelco.com/quotes/quotestxt.js"></script>
</font
</td>
</tr>
</table>

</body>
</html>


I have tried iframe and while it looks nice for text wrapping, it will still reload the entire gadget. Any suggestions (preferably simple so my little mind and wrap around it) would be great! Thanks for looking. :)

I have an application I'm working on and here is what I'm trying to do:

I want users to work from a main application. Certain things will need to be done but the users wont want to see the main screen go away while doing these certain things. So my idea is to just open a new window with the content they need, they'll make their changes, the new window will close but then I want the main page to reload.

What I've done now is at the end of the script that will be run prior to the new window closing is added this (its a php app):
Code:

echo "<script>window.close();</script>";
echo "<script>window.opener.location.reload(true);</script>";

Sometimes this works in IE and Firefox but never in Chrome. I know I've seen this done before on other sites, but I cant think of what they are.

Can anyone tell me a reliable way that works in all browsers?

I have a set of tabs that are set with an href that adds a query string to the url such as "?t=1", meaning the first tab is selected.

Technically it works just fine but every time I click a tab it reloads the page and I'm not entirely sure how to stop this.

I'm using a jquery plugin to handle the query strings. Here's the plugin.

Here's the piece of the code that matters:

Code:

        var url = location.search;
	var tab = $.query.get('t');
	
	init(tab);

	function init(tab){
		$("div.tab").hide(); //hides all the content boxes related to the tabs
		$("div#tab"+tab).fadeIn("fast"); //Shows the selected tab's content box
		setInactive();  //Styles unselected tabs
		setActive(tab); //Styles selected tab		
	}

Any help would be greatly appreciated.

Hey all,

I'm trying to make it so that when a user clicks on a radio button, the image that is related to the radio button is displayed next to it (without reloading the page). At the moment all it shows is the image related to the currently saved option, which I'd like to keep on page load. Is this possible? If so, I'd appriciate any help.

Here is my code for the radio buttons.

Thanks.

Code:

<tr valign="top">
	<td id="community-legal-services-logo-selection">
		<p><label><?php _e('<strong class="table_tags">Display the following Community Legal Services logo:</strong>'); ?></p>
		<p><label for="cls-mono">
			<input class="" id="cls-mono" name="cls_logo" type="radio" value="cls_mono" <?php if($general_options['cls_logo'] === 'cls_mono'){ echo 'checked="checked"'; } ?> />
			<?php _e('Mono'); ?></label>
		</p>
		<p><label for="cls-color">
			<input class="" id="cls-color" name="cls_logo" type="radio" value="cls_color" <?php if($general_options['cls_logo'] === 'cls_color'){ echo 'checked="checked"'; } ?> />
			<?php _e('Colour'); ?></label>
		</p>
		<p><label for="cls-none">
			<input class="" id="cls-none" name="cls_logo" type="radio" value="cls_none" <?php if($general_options['cls_logo'] === 'cls_none'){ echo 'checked="checked"'; } ?> />
			<?php _e('None'); ?></label>
		</p>
		<p>
			<label><?php _e('<span class="table_tags">Link to the Community Legal Services website<span>'); ?></label>
		</p>
		<p>
			<input class="large_input_box" id="cls-link" name="cls_link" type="text" value="<?php echo $general_options['cls_link']; ?>" /></label>
		</p>
	</td>
	<?php if($general_options['cls_logo'] && $general_options['cls_logo'] !== 'cls_none'){ ?>
		<td>
			<img id="community-legal-services-logo-preview" class="image-preview" src="<?php echo $general_options['cls_logo_path']?>" />
		</td>
	<?php } ?>	
</tr>

he everyone please i want to know how to submit a form using ajax every 5 minutes without reloading page

i have a huge form for exams and i need to submit the form without the need to wait until pressing submit because the user may wait to think about the answer a very long time..


so i want to submit the form and at the same time i cant reload the page as it is in normal submit form..

so how i can submit form in the background without letting the user knows that the form is submitted???

This is my dilemma and I am not sure if I am handling the right way, so please suggest a new way or provide a valid answer so that I may achieve my goal. Thanks in advance for your help in solving this matter.

In short I have a single "A.html" page that uses AJAX to reload in "B.php" into a <DIV id='bDiv'> every second and "C.php" into another <DIV id='cDiv'> with no reloading.

The code in B.php generates a random number between 1 and 100.
If the number generated is less than 10, I want <DIV id='cDiv'> to refresh its content.

I have tried a number of tricks, I could not find anything in jQuery so if there is please point me to the correct function calls.

hello im working on my senior design project for my electrical engineering class. and part of the project is to upload an image via php (which ive written and it works great) but when the image is loaded into the same directory as the html file (which is supposed to display the image everytime a new image is uploaded) the image stays the same it doesnt show the new image. but i kno the new image has been uploaded because i can see it my web server. this is the code

Code:

<html>
<head>
	<title>Human Cam</title>
	<script type = "text/javascript">
		function refresh() {
			var refreshTime = 5*1000;                //5000ms
			var thisImage = "Lighthouse.jpg";	//the image location
			var today = new Date(); 		//the current time 
			//add the time to the end of the image string
			//to make a unique url:
	document.images["pic"].src=thisImage+"?"+today;
	//reload if the images are loaded:
	if (document.images) {
	window.onload=refresh;
	}

	//IF the time is up reload the image
	t=setTimeout('refresh()', refreshTime);
	}
  </script>
  </head>
<body onload="refresh()">
	<center>
		<h2>human cam</h2>
<img src="Lighthouse.jpg" id="pic">
  </center>
</body>
</html>

I have a index page on which there are several iframes which point to pages from a tomcat server. Sometimes when the index page loads, most of the iframes display session expired error. When I refresh the page, all iframes load properly. I want to
reload the page twice whenever I come to that page initially. I also want to reload that page twice when I come to it from another page. Any ideas are welcome.

I have tried the following in the onload event

-----------------
if(window.location.search.indexOf('reload')<0) window.location.replace(window.location.href+'?reload');

---------------

function loaded()
{ if (!navigator.fudge) {
navigator.fudge = 0;
}
navigator.fuge++;
if (navigator.fudge>1){navigator.fudge=0}
else{location.reload()};
}

-------------

if(readCookie('reloaded')!='Yes')
{
createCookie('reloaded','Yes',1);
window.location.reload();
}
else
eraseCookie('reloaded');

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/"; }

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

---------------------------
several meta tags to get the page each time from the server

e.x.
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

Hi all, I'm new to javascript and html so this may be a silly question, and I'm sorry if I'm posting this in the wrong forum section.

Anyway, I need some kind of javascript that will work in a framed page. Right now when I try to navigate to another framed page located elsewhere on my website it's pulling it up in that frame, so it's an ever expanding framed webpage. I need it to simply open the new page up in the whole browser, and not in the individual frame..

Any help is appreciate, (There may as well be an html solution but I couldn't find one)... Thanks.

topic has been answered

If multiple pages reference the same external JS sheet, does the sheet reload every time you go to a new page or does it stay in memory?