JavaScript - Content Not Updating In Ie

Hi,
I am creating a web page which automatically updates one image every 5 seconds. I use ajax to fetch a new img url every 5 seconds, and then update the image by changing img.src.

I tested the same (in IE8, firefox) and it worked without any issues in my development server. But, when I try to put it on production server, many people are complaining that they are not able to see any image at all.
Code:

if (url_received){
	var path = url.substring(url.indexOf("/"));
	var img = document.getElementById("testimage");
	img.src = "/test/media/" + path;
}

I cannot think of a reason why this is failing for others. Is this due to any security issues? If someone helps me out, I would be very thankful.

Hi - I am updating a site for a friend as the original designer has gone missing.. I am no developer by any means but know basic html etc..

I want to change a link in the drop down menu.js file, have opened it in my text editor and changed the link that needs changing to a diff page but it isn't updating on the site - arghhh!!

I have notice at the top of the page it has:

// QuickMenu Pro, Copyright (c) 1998 - 2003, OpenCube Inc. - http://www.opencube.com

does this have anything to do with it?

I can't find anything on google - any advice is greatly appreciated.
Thanks

Is there any way that I can make my HTML website STAY updated from a javascript innerHTML or value change? I've only used it a little...

I've done some googling and have come across some information, but I'm not quite sure how to apply it to my problem.

I have a PHP page saturna.php with six frames on it using the frameset commands. I would like to somehow make it so that when I click on something in one frame (with one PHP page loaded in it - game.php), it automatically/dynamically updates one of the other PHP pages (inventory.php) in another frame. What will happen is when the thing is clicked on in game.php, an entry will be added to the database, and the second PHP page (which retrieves information from the database) will notice that there is a new relevant record, and will add it to the inventory.php page in the table I have constructed there.

From my googling it seems I need to use JavaScript to do this, but I'm not quite sure how - any ideas ?

Thanks very much!

Hello Guys,

I have a question here..

I have a scroller on my pages that basically reads a text file and displays.. The problem that I am having is it doesn't update until I reload the page(even though the .txt file updates about every 3 minutes).. I would like it to update when the file has been changed..

Here is my page.

PHP Code:
<link rel="stylesheet" href="../../css/li-scroller.css"  type="text/css">
<script src="../../js/jquery.li-scroller.1.0.js" type="text/javascript"></script>
 <script type="text/javascript" src="../../jquery-1.6.1.min.js"></script>
   <script type="text/javascript">
       $(function(){
    $("ul#ticker01").liScroll();
    }); 
</script>

<?php 
 $file = file_get_contents ('playingnow.txt'); 
 
 ?> 
<div class="scrollpos">
    <ul id="ticker01">
    <li><a href="#"><?php Echo $file;?></a></li>
    
    <!-- eccetera -->
    </ul> 

</div>

What can I add to make it go out and reload just the div not the entire page?

Please advise..

All, first post on the forum. I hope this is relatively simple. I've looked around for the answer, but I thin think the search terms (update onchange event) are a bit too common...

Code:

document.getElementById("tester").innerHTML= "hello";
document.getElementById("tester").onmouseover = "alert('hello')";

You see I'm trying to change an event like I'd change a property. The first will change the text to hello. I'd like the second to change the onmouseover event to display a hello world alert... but it doesn't seem to do anything.

How can I change events?

Jason

I am fairly new to JS so please have patenience with me.

What I am codeing is essentialy some digital signaage for my office. I will have a calender that updates through several screens with information in them.

The basic page stays the same but the content is loaded into a large iframe in the center of the page and each html file loaded into the iframe is changed using meta tags.

This is a touch screen so I want control along the bottom of the screen.

I have did this very crudely with css and html. But I would like to refine it a little more with javascript.

I want javascript to control the content of the iframe and javascript to control the buttons along the bottom to manual switch to a diffferent screen along with a button that stops the auto reloading of the page.

Here is where I am so far. I have the javascript to automatilly change the iframe src but I need help with the nav buttons and the stop button. Right now the nav buttons are still using the regular <a> tags targeting the iframe.

Code:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="created" content="Thu, 21 Jul 2011 15:16:57 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript">
var frames = Array('cal11,html/', 10,
'cal22.html/', 10,
'cal33.html/', 10,
'cal55.html/', 10
'cal66.html/', 10,
'cal77.html/', 10,
'cal44.html/', 15,);
var i = 0, len = frames.length;
function ChangeSrc()
{
if (i >= len) { i = 0; } // start over
document.getElementById('frame').src = frames[i++];
setTimeout('ChangeSrc()', (frames[i++]*1000));
}
window.onload = ChangeSrc;

</script>


	<title>Calender</title>
  </head>
  <body>


<div align="center"><iframe src="" name="frame" id="frame" width="900" height="476" frameborder="0" scrolling="no"></iframe>
	 </div>
<ul class="solidblockmenu">
<li><a href="calstart.html">Instructions</a></li>
<li><a href="cal11.html" target="frame">Month View</a></li>
<li><a href="cal22.html" target="frame">Week View</a></li>
<li><a href="cal33.html" target="frame">Agenda</a></li>
<li><a href="cal55.html" target="frame">Current Projets</a></li>
<li><a href="cal66.html" target="frame">Bidding Projects</a></li>
<li><a href="cal77.html" target="frame">Open Service Calls</a></li>
<li><a href="cal44.html" target="frame">General Information</a></li>
<li><a href="??????????" target="frame">Stop Scroll</a></li>
</ul>



</body>

</html>

In a form I have two input boxes (ids of return1 and return2) with default values of 0 and a span element (id return3). The span's value is initalized to 0 on page load, and it updates when a button is clicked that calculates x - value of return1 - value of return 2, where x is calculated elsewhere.

Form code:

Code:

Month 1: <input size="7" type="text" value="0" id="return1" name="return_1">
<input type="button" value="Calculate Remaining Amount" onClick="thirdReturn();">
Month 2: <input size="7" type="text" id="return2" value="0" name="return_2">
Month 3: <span style="color:black; font-size:14px;" id="return3"></span>

ThirdReturn code:

Code:

function thirdReturn()	{
	var first_return = document.getElementById("return1").value;
	var second_return = document.getElementById("return2").value;
			
	first_return = first_return.replace(/\,/g,'');
	second_return = second_return.replace(/\,/g,'');
			
	var combined = Number(first_return) + Number(second_return);
			
	if (typeof this.remaining_pipp_amount == "undefined") {
		alert('Please select a Flex option');
	}
	else{
		if (combined > this.remaining_pipp_amount){
			alert('Return Amount Exceeds Credit Amount');
		}
		else{
			var temp = this.remaining_pipp_amount - combined;
			var third_return_amount = document.getElementById("return3");
			third_return_amount.innerHTML = addCommas(Math.round(temp));
		}
	}
}

I am trying to change it so that if return2 is zero when the button is clicked, return2 = x - return 1. Here is what I have:

Code:

function thirdReturn()	{
	var first_return = document.getElementById("return1").value;
	var second_return = document.getElementById("return2").value;
			
	first_return = first_return.replace(/\,/g,'');
	second_return = second_return.replace(/\,/g,'');
			
	var combined = Number(first_return) + Number(second_return);
			
	if (typeof this.remaining_pipp_amount == "undefined") {
		alert('Please select a Flex option');
	}
	else{
		if (combined > this.remaining_pipp_amount){
			alert('Return Amount Exceeds Credit Amount');
		}
		else{
			var temp = this.remaining_pipp_amount - combined;
			if (second_return == 0){
				var new_second = document.getElementById("return2")
				new_second.innerHTML = Math.round(temp);
			}
			else{
				var third_return_amount = document.getElementById("return3");
				//alert (temp);
				third_return_amount.innerHTML = addCommas(Math.round(temp));
			}
		}
	}
}

Does anyone know why this doesn't work or what can be done to fix it?

Thank you!

Hi guys,

I've had a little trouble with this and haven't been able to find answers on google. I'm trying to set up a new window that contains a button. Then, if the user clicks the button, the window would display new information accordingly. I have written a simple test that won't seem to work:

Code:

<html>
<head>
<script language="Javascript" type="text/javascript">
var count = 0;
function Window() {
	MyWindow = window.open('', 'myWin', 'height=250,width=250')
	MyWindow.document.write('<html>')
	MyWindow.document.write('<head>')
	MyWindow.document.write('<\/head>')
	MyWindow.document.write('<body>')
	MyWindow.document.write('<FORM method="post" name="aname">')
	MyWindow.document.write('<INPUT type="button" onclick="newfunc()" name="test" value="Click Me"\/>')
	MyWindow.document.write('<\/FORM>')
	MyWindow.document.write('<\/body>')
	MyWindow.document.write('<\/html>')
	MyWindow.focus()
}
function newfunc() {
	count++
	MyWindow.document.write(count)
}
</script>
</head>
<body>
<FORM method="post" name="me">
<INPUT name="opendis" value="Open Window" type="button" onclick="Window()"/>
</body>
</html>

I am probably doing something very wrong. Is there a way for this to work? Thanks!

In the code below I have an iframe that acts as a WYSIWYG editor. On load a link is loaded inside the iframe. When you click the link a div opens that displays the URL of that link. Upon changing the link inside the DIV I want to update the href tag that I clicked.

I've experimented with pasteHTML/execCommand("inserthtml") however this only updates the link when you select the text before clicking (as opposed to just clicking on the link), otherwise it inserts a whole new link.

I'm trying to get this working across IE, Firefox, Opera, Chrome and Safari.

I'd happily pay someone (Paypal) to help me with this.

Code:

<html>
<body>

<script language="JavaScript">

// Initialize WYSIWYG
function initialise() {

	// HTML code to paste
	var html = "<a href='http://www.google.com'>Click Me</a>";
	
	if (detectBrowser() == "ie") {
	
		// IE
		editorContent.document.designMode='on'; // turn on design mode
		editorContent.document.attachEvent("oncontextmenu", showContextMenu); // add listener for context menu
		editorContent.document.attachEvent("onclick", showContextMenu); // add listener for context menu
		
		// Paste the HTML code in iframe
		document.editorContent.focus();
		range  = editorContent.document.selection.createRange();
		range.pasteHTML(html);
		document.editorContent.focus();
		
	} else {

		// FF, Saf, Chr, Op
		document.getElementById("editorContent").contentDocument.designMode='on'; // turn on design mode
		editorContent.document.addEventListener("contextmenu", showContextMenu, true); // add listener for context menu
		editorContent.document.addEventListener("click", showContextMenu, true); // add listener for context menu
		
		// Paste the HTML code in iframe
		editorContent.focus();
		editorContent.document.execCommand("inserthtml", false, html); 
		editorContent.focus();
			
	}
}

// Show Context Menu
function showContextMenu(e) {

	// Get the URL from the clicked link
	if (detectBrowser() == "firefox") {
	
		url = e.target.href;
	
	} else {

		url = document.getElementById('editorContent').contentWindow.event.srcElement.href;
	}
	
	// Set the URL in the pop-up and load it
	document.getElementById("theUrl").value = url;
	document.getElementById("popUp").style.visibility = 'visible';
	document.getElementById("popUp").style.display = '';

	if (navigator.appName != "Microsoft Internet Explorer") {
		e.stopPropagation();
		e.preventDefault();
	}

	return false;
}

// Update the URL
function updateUrl() {

	newUrl = document.getElementById("theUrl").value;

	alert('Update the URL to '+newUrl);
	
	/*******************************************/
	/* WHAT TO DO HERE TO UPDATE URL IN EDITOR */
	/*******************************************/
	
	document.getElementById("popUp").style.visibility = 'hidden';
	document.getElementById("popUp").style.display = 'none';

}

// Detect browser
function detectBrowser() {

	var userAgent = navigator.userAgent;
	var browser;

	if (userAgent.indexOf("MSIE") !=-1)
		browser = "ie";
	if (userAgent.indexOf("Firefox") !=-1)
		browser = "firefox";
	if (userAgent.indexOf("Chrome") !=-1)
		browser = "chrome";
	if (userAgent.indexOf("Safari") !=-1)
		browser = "safari";
	if (userAgent.indexOf("Opera") !=-1)
		browser = "opera";

	return browser;
}

</script>

<div id="popUp" style="width:250px; height:60px; border: 1px solid black; visibility:hidden; display:none; position: absolute; left: 300px; background-color:yellow; padding: 10px">
<form>
<input type="text" id="theUrl" size="30">
<p><input type="button" value="Update" onClick="updateUrl()">
</form>
</div>

<iframe id="editorContent" name="editorContent" width="200" height="200" frameborder="1" onLoad="initialise();"></iframe>

</body>
</html>

Hello all, and thanks in advance for the help.

I want to update a div using innerHTML and take the data from an external HTM file residing on my server. The purpose is to have a series of links in the div content_left that when clicked dynamically change the div content_right. That will allow me to create individual pages for the dynamic content rather than including it all on the original page.

Any help is appreciated.

What am I doing wrong here? I am trying to make it where the user can name the link whatever he/she wants.... I think it might be this part... links[i] = name.linkPosition.value; Where linkPosition is a variable. Can I do this? Or is there another way?


Code:

<div id="navBar">
	<ul>
    	<li><a href="#" id="link0"><script>document.write(links[0]);</script></a></li>
    	<li><a href="#" id="link1"><script>document.write(links[1]);</script></a></li>
    	<li><a href="#" id="link2"><script>document.write(links[2]);</script></a></li>
    	<li><a href="#" id="link3"><script>document.write(links[3]);</script></a></li>
    	<li><a href="#" id="link4"><script>document.write(links[4]);</script></a></li>
	</ul>	

</div><!--end navBar -->


<form>
<label style="color: #FFF;">Change name of links! You can only change them once!</label><br />
<input type="text" class="customLink" size="15" name="link0"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link1"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link2"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link3"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link4"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="button" onclick="replaceLinks(this.form)" value="Replace Link Names!"  />
</form>

Code:

<script>

var links = new Array("home", "portfolio", "stuff", "about me", "contact");

function replaceLinks(name){

	for (var i=0; i<=4; i++) {
		var linkPosition = "link"+i;
	links[i] = name.linkPosition.value;
		changeLink(i);
	}
	
}

function changeLink(number) {

document.getElementById("link"+number).innerHTML="<span style=\"text-transform: capitalize;\">" + links[number] + "</span>";	
}
</script>

ANY HELP WOULD BE AWESOME!!!

I just replaced the functions to look like this...

Code:

function replaceLinks(name){

	for (var i=0; i<=4; i++) {
	links[i] = name.linker+i.value;
		changeLink(i);
	}
	
}

function changeLink(linkNumber) {

document.getElementById("link"+linkNumber).innerHTML="<span style=\"text-transform: capitalize;\">" + links[linkNumber] + "</span>";	
}

Now the links are updating but I get NaN for each link.

I just wrote some javascript with a counter to call an ajax call of many records, but when it is around the 50th record the counter variable is not updating in time for the next ajax call resulting in duplicate results cause ajax is pullin the previous query again

hi,

I want to create a litebox with one or two inputs in it and submit button.
These inputs would work in jQuerry to update information in main page..

I see many websites are using them, but i am not so good in javascript

if you know any examples of simple litebox which could work with jQuerry, please inform me.

All suggestions are welcome.

Kind regards, Aurimas.

Hello guys,

Could you please help me with JavaScript that updates input by onKeyUp event.

By updating input name products_data[XXXXXX][purchase_price] or
input name products_data[XXXXXX][av_factor] shoul be updates
input name products_data[XXXXXX][price] by formula:

products_data[XXXXXX][purchase_price] * products_data[XXXXXX][av_factor] = products_data[XXXXXX][price]

Because form has alot of integer values for each id: XXXXXX it need to be changes price for exactly id, not all.

Code:

function updatePrice() {
  var purchase_price = 100
  var av_factor = 3;

  price = purchase_price * av_factor
}



<form name="product">
<input type="text" name="products_data[29796][purchase_price]" onKeyUp="updatePrice()" />
<input type="text" name="products_data[29796][av_factor]" onKeyUp="updatePrice()" />
<input type="text" name="products_data[29796][price]" />

<input type="text" name="products_data[29797][purchase_price]" onKeyUp="updatePrice()" />
<input type="text" name="products_data[29797][av_factor]" onKeyUp="updatePrice()" />
<input type="text" name="products_data[29797][price]" />

<input type="text" name="products_data[29798][purchase_price]" onKeyUp="updatePrice()" />
<input type="text" name="products_data[29798][av_factor]" onKeyUp="updatePrice()" />
<input type="text" name="products_data[29798][price]" />

...

</form>

Thank you for any suggestion
Best Regards