JavaScript - Ajax Image Refresh Problem

Hi,

Need some help please. I have the following function:

Code:

<script type="text/javascript">
function getVote(int)
{
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  document.getElementById("ajax").innerHTML=xmlhttp.responseText;
}
}
 
var questionid = document.question.questionid.value;
 
xmlhttp.open("GET","result.php?id="+questionid+"&vote="+int,true);
xmlhttp.send();
}
</script>

I then have the following onClick:

Code:

<input type="radio" name="vote" value="1" onClick="getVote(this.value);" />
<input type="radio" name="vote" value="2" onClick="getVote(this.value);" />

Currently, all is good and works perfectly, the div 'ajax' refreshes ajax style with 'result.php' and I can take the value. But what I now need to do is refresh two divs. I have tried everything from putting two onClicks on the radio button, within the 'getVote' function calling in the second function and many more alternatives.

The second function is pretty much the same, just a different div ID:

Code:

<script type="text/javascript">
function getTotal(int)
{
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  document.getElementById("total").innerHTML=xmlhttp.responseText;
}
}
   
xmlhttp.open("GET","total.php?id="+questionid+"&vote="+int,true);
xmlhttp.send();
}
</script>

The problem I have, I think, is that both functions need to use 'xmlhttp.open', and it seems once one has ran, the functions end.

Any ideas gratefully received.

Thanks.

I want the images to change in sequence when the page is refreshed not random like i have below. Can someone help me with this please? Also I also need text to change on refresh to because I am going to have a descritption of the image below. Thanks


[CODE]
<script type="text/javascript" language="JavaScript">

var imgs = new Array('<a href="VW_1.shtml"><img border=0 src="img/samples/VW/large_1.jpg" width=165 height=109" class="thumbnail_img">',
'<a href="fortshelby1.shtml"><img border=0 src="img/samples/Fort Shelby/image1-large.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="jaguar1.shtml"><img border=0 src="img/samples/Jag_of_Novi/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="harley1.shtml"><img border=0 src="img/samples/wolverine_harley/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="bc1.shtml"><img border=0 src="img/samples/BC_Coney_Island/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="mama1.shtml"><img border=0 src="img/samples/Pozios_Retail_Mama_Vickys_Coney_Island/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="children1.shtml"><img border=0 src="img/samples/Detroit_Childrens_Museum/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="harper1.shtml"><img border=0 src="img/samples/Harper_Woods_Library/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="dps1.shtml"><img border=0 src="img/samples/DPS_Facilities_building/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="lakeland1.shtml"><img border=0 src="img/samples/Lakeland_School_Huron_Valley/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="auto1.shtml"><img border=0 src="img/samples/Manhattan_Auto_Group/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="maxey1.shtml"><img border=0 src="img/samples/Maxey_Ford/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="benz1.shtml"><img border=0 src="img/samples/Mercedes_Benz_of_St_Clair_Shores/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="metro_lofts1.shtml"><img border=0 src="img/samples/Metro_Lofts/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="mtclemens1.shtml"><img border=0 src="img/samples/Mt_Clemens_Library/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="st_gertrudes.shtml"><img border=0 src="img/samples/st_gertrudes/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="rayconnect1.shtml"><img border=0 src="img/samples/Rayconnect/large 1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="faulhauber1.shtml"><img border=0 src="img/samples/Faulhauber/large1.jpg" width=165 height=109 class="thumbnail_img">');

var max = imgs.length;
var num = Math.floor((Math.random() * max));

document.writeln(imgs[num]);

</script>
[CODE]

Hello. I need some help with refreshing an image(cgi chart) onclick. This is because the chart changes every minute(due to database update) and i want whenever you click on it to refresh.
My code so far is:
HTML:
Code:

<label for="choseChart">Change chart!</label>
<select id="choseChart" onchange="changeChart('choseChart');"> 
<option value="0" selected="selected">Chart of Months(column)</option> 
<option value="1">Chart of Branches(column)</option> 
<option value="2">Chart of Months(pie)</option> 
<option value="3">Chart of Branches(pie)</option> 
</select><br/> 
 
<img id="chartType" style="cursor: pointer; cursor: hand" onclick="" alt="Chart" src="1.cgi"/>

Javascript:
Code:

function changeChart(chartid) 
{  
	var chart = document.getElementById(chartid).selectedIndex; 
	document.getElementById("chartType").src=changeImage[chart];
}

Hello, my name is Paula an I am making a website where I have an image changing on my homepage each time it is reloaded.

I found a code that lets me do this.
This is the script:

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = '1.gif'
theImages[1] = '2.gif'
theImages[2] = '3.gif'
theImages[3] = '4.gif'

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}
</script>
</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
showImage();
// End -->
</script>

It worked fine, with four images.
The thing is I wanted to put up to 16 in it.
So I tried ad up to 16 numbers with images but as soon as I put more than four, it would not work.

Finally what I did was to copy four times the same numbers and then it worked (0-3 , four times)...
so then I had many images shown randomly but the problem now is that the random is very uneven among the images.
Meaning, I get variation among very few, and many time repeating one.

This is what my script looks like now:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Alacenaconcajadegalletes-pgWShadow3.jpg'
theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/AltarinGasStation-pgSH.jpg'
theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/AltaroftheDeadwithEmbroideredTablecloth-pgSH.jpg'
theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Altarsobreparedverde-pgSH.jpg'
theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/BricksandClotheslineSH-pg.jpg'
theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Cocinaamarilla-pgSH.jpg'
theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/LatadeTecateconenchufes-pgSH.jpg'
theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/LedgewithTecates-wcSH.jpg'
theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Mesaamarilla-pgSH-pg.jpg'
theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/MosaicwithPhotographofVictorianInterior-pgSH.jpg'
theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Paredrojaconjualas-pg.jpg'
theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/red_cupboardSH.jpg'
theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/RoomwithLandscapeofBurgundy-pgSH.jpg'
theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Cocinaamarilla-pgSH.jpg'
theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/YellowandRedPorch-wcSH.jpg'
theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/LedgewithTecates-wcSH.jpg'

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

// End -->
</script>

So my question is:
How can I manage with this script to have all my images showing up equally when they change in refresh?

I don not mind if they are not random, I also tried to remove the random property but could not manage either.

Any ideas?
Thank you so much, I really appreciate your help.
Paula

Hi Frnds,

I have faced some problem i.e I have 2 jsp pages.In that I want to go one jsp to another jsp.In 2nd jsp i can show my captcha code,but unfortunately it is not visible first page is reloaded in IE6.Once you refresh the page it's visible in IE6.So please help me to avoid this problem.

Thanks,

I'm making a chess game and I have a couple of problems. one, for some reason I need to refresh the page for it to fully load

http://ktownsend.shorelinevct.net/chess/

two, hiding the available moves only works when I click on a different piece. when clicking on the same piece I get an err.message which says that the pieces this.availMoves[i] = null. which doesn't make sense. I get the same err.message when I click on a different piece but it works anyway. when I click on the same piece it doesn't work at all.

Any help would be appreciated

Hi all!

My first post here, searched around for a good website to get some assistance and chose CodingForums.com! I'm a graphic designer, and trying my best at web design too although it's not my profession so I'm still beginner level in a sense I guess.

Anyway, my dilemma at the moment is that I have produced a site where the client would like the logo colour/image to change on refresh which I have achieved by scouring the net for codes and altering them. Now, the client wants the shapes behind the sub-headings to match the current logo colour/image on refresh as well. This would mean if the logo changed to the blue logo, I'd need all the sub-headings to be blue, and vice versa for another 3 colours.

I'm struggling to understand how I can achieve this. At the moment, I have a javascript inside the code of the index page allowing logo image change on refresh but need the sub-headings to change in sync too.

Can anyone help me out here?

Any help is greatly appreciated.

Thanks all!

WxMx

Hi. I am new here.
I wanted help for a JavaScript code.
You might think I'm lazy for not writing it myself, but the truth is I am not a JavaScript coder. I just have a really simple website and I am trying to do something for which I know JS is required but I don't know how to do it. I've also searched around but couldn't find the appropriate code.

What I want to do is to make an html page load a different background image every time it refreshes.
I will have a list of background images and I want to be able to add in this list, without having to change anything else in the codes after I do this (I think this is made by making an array of images and by putting .length somewhere in the codes, but I don't know exactly how I should do this).

I already know how to do an external file (.js) and link to it from my .html page.
Now I want the code to put in the .js file, and the code to put in the <body> of my .html file.

Please help me
Thanks

Hi,

I'm having a problem with my page not resetting to the point where the user clicked on an element. I believe this to be a javascript problem, however, if it is not I would be glad to move it to the proper forum.

What I have is a page with a div that contains a large image (a map). the dims are 1237 x 1550. I am using a browser window resized to approx. 800 x 600 so that I can simulate a smaller screen viewport. The page has links that are scattered about the map (positioned with css) and what I want to do is launch a video using the HTML5 video tag when the user clicks on a link. The video is supposed to open in the center of the users viewport and then dim the map div, which it does, however the page resets its position after the js function and aligns the page back to the upper left corner of the browser window. If the user had scrolled (both x and y) to the max of the scroll bar, then this will be fairly frustrating to have to keep moving back, thus my dilemma.

I tried using scrollto to reset the scroll back to where the user was, but this is not working. What's funny is if I put an alert at the very end of the function, the page displays properly (video is centered on the screen where the user was in their viewport) but resets as soon as the alert is closed. I then tried using location.reload(false), but this keeps the function from running properly (the page shows properly for a fraction of a second then resets back to a newly launched page).

Below is the code. Also, this has only been tested with FF and Chrome on my local drive. It is not anywhere on the web right now. In chrome, the page resets to the top only. I'm really not interested in making this work with IE since this is for personal/family use. Your help is greatly appreciated.

Code:

CSS
	body {
		background: black;
		text-align: center;
		vertical-align: middle;
	}	
	div#bkg {
		position: absolute;
		text-align: center;
		z-index: 1;
	}
        p#day1 {
		position: absolute;
		top: 800px;
		left: 1000px;
		font-weight: bold;
		width: 50px;
		background: white;
	}

Javascript
function showVid(srcVid) {
// set the proper filename of the vid
	srcVid = srcVid + ".ogv";
// create the video tag
	var vidWin = document.createElement("video");
	vidWin.id = "movie";
	vidWin.setAttribute("width", "320");
	vidWin.setAttribute("height", "240");
	vidWin.setAttribute("controls", "controls");
// pic size is 1237 x 1550
	var vpw = window.innerWidth;
	var vph = window.innerHeight;
	var xPosOff = window.pageXOffset;
	var yPosOff = window.pageYOffset;
	var leftNum = ((vpw/2) + xPosOff) - 160;
	var topNum = ((vph/2) + yPosOff) - 120;
	vidWin.setAttribute("style", "position: absolute; left: " + leftNum + "px; top: " + topNum + "px; z-index: 255;");
// create the source tag
	var vidSrc = document.createElement("source");
	vidSrc.src = "videos/" + srcVid;
	vidSrc.type = "video/ogg";
	vidSrc.codecs = "theora, vorbis";
	vidWin.appendChild(vidSrc);
	document.getElementById('bkg').style.opacity = 0.5;
	document.body.appendChild(vidWin);
	window.scrollTo(xPosOff, yPosOff);
// tried this, it didn't work
//	location.reload(false);
}

HTML
<body>
<div id='bkg'>
<img src="images/pic1.jpg" />
<p id="day1"><a href="#" onclick="showVid('oggtest')">Day 1</a></p>
</div>
</body>

I am trying to follow this article on doing a POST request with AJAX and PHP and it works fine, but as soon as I switch from the default submit button to an image I get an error. I would really appreciate any assistance on why switching the submit button to an image would affect it.

Thanks

http://www.hiteshagrawal.com/ajax/form-post-in-php-using-ajax/comment-page-1

When performing an Ajax request I want to change the submit button into a loading image and then swop it back again when the Ajax request is complete.

I don't want a loading image anywhere else as on mobile phones it can't always be seen due to small screen size.

I have grabbed the event (which references the form, is that right?) and I have something like this:

Code:

<button type="submit" name="name_can_vary">Search</button>
event.name_can_vary.style.visibility = 'hidden';
//(obviously this isn't complete code but no doubt explains what I am talking about)

..which would hide the button and works exactly as I want to this point, but of course it does;t return when Ajax has completed or show the loading image.

Ideally, instead of just hiding the button I want JavaScript to swop the button for the loading image. I suppose I could have extra HTML on every page that is made visible with the loading image but I would rather have JS do everything from here (saves editing all pages with submit buttons on).

Thanks for any help.

I have the following ajax code:

Quote:
.............
.............
.............
XHR.createXMLHttp();
XHR.open("POST", "/cgi-bin/addpost.cgi", true);
XHR.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
XHR.onreadystatechange = function() {
if (XHR.readyState == 4) {
if (XHR.status == 200) {
alert("Operazione effettuata con successo");
}
else {
alert("Operazione non riuscita");
}
}
}
XHR.send(url);
The function send data, but it don't return never alert windows. Where is the problem?

hi everyone..
i am using ajax to change the banner background while pressing on refresh
Note:it must be a background image because i will display data from database...


http://www.graphicano.com/isis/nile_crown2.php

please look at this link...

my problem is:
when i press refresh button in Firefox browser it changes the background and on pressing refresh again the background will change

but in internet explorer 8.0 it changes the background only for the first time and on pressing refresh again the background will not change.

how i can fix this problem ?? i want the user to press refresh at any time and the background will change.. not only for the first time?
at the same time it must be a background image because i will display text from database...

Hi Chaps,

I'm trying to get a AJAX script to work, but am having problems.

I have a page with two dropdown menus, the idea is that the first dropdown [customers] will then filter the options of the second [contacts]:

//DROPDOWN.PHP
PHP Code:
<form method="post" action="">
<select name="customer" onChange="ContactGrab('."'".'ajaxcalling.php?id='."'".'+this.value);">
    <option value="">Select Customer</option>
    <?php
do {  
?>
    <?php echo "<option value=".'"'.$row_rsCustomer['custid'].'" >'.$row_rsCustomer['custname']."</option>";?>
    <?php
} while ($row_rsCustomer = mysql_fetch_assoc($rsCustomer));
  $rows = mysql_num_rows($rsCustomer);
  if($rows > 0) {
      mysql_data_seek($rsCustomer, 0);
      $row_rsCustomer = mysql_fetch_assoc($rsCustomer);
  }
?>
  </select><br />
<div id="details">
  <select name="details">
  <option value="">Select Contact</option>
    <?php
do {  
?>
    <option value="<?php echo $row_rsContact['contactname']?>"><?php echo $row_rsContact['contactname']?></option>
    <?php
} while ($row_rsContact = mysql_fetch_assoc($rsContact));
  $rows = mysql_num_rows($rsContact);
  if($rows > 0) {
      mysql_data_seek($rsContact, 0);
      $row_rsContact = mysql_fetch_assoc($rsContact);
  }
?>
  </select>
  </div>
</form>

The OnChange action should call the AJAXCALLING.PHP page, where the other select options are filtered, by column [FK_custid]

//AJAXCALLING.PHP
PHP Code:
<select name="details">
<option value="">Select Contact</option>
  <?php
do {  
?>
  <option value="<?php echo $row_rsContact['contactid']?>"><?php echo $row_rsContact['contactname']?></option>
  <?php
} while ($row_rsContact = mysql_fetch_assoc($rsContact));
  $rows = mysql_num_rows($rsContact);
  if($rows > 0) {
      mysql_data_seek($rsContact, 0);
      $row_rsContact = mysql_fetch_assoc($rsContact);
  }
?>
</select>

This is powered by the AJAXSCRIPT.JS page
Code:

function CreateXmlHttpObject() { //fuction to return the xml http object
		var xmlhttp=false;	
		try{
			xmlhttp=new XMLHttpRequest();//creates a new ajax object
		}
		catch(e)	{		
			try{			
				xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");//this is for IE browser
			}
			catch(e){
				try{
				req = new ActiveXObject("Msxml2.XMLHTTP");//this is for IE browser
				}
				catch(e1){
					xmlhttp=false;//error creating object
				}
			}
		}
		 	
		return xmlhttp;
	}
	

  function CategoryGrab(strURL)
    {         
     var req = CreateXmlHttpObject(); // fuction to get xmlhttp object
     if (req)
     {
      req.onreadystatechange = function()
     {
      if (req.readyState == 4) { //data is retrieved from server
       if (req.status == 200) { // which reprents ok status                    
         document.getElementById('details').innerHTML=req.responseText;//put the results of the requests in or element
      }
      else
      { 
         alert("There was a problem while using XMLHTTP:\n");
      }
      }            
      }        
    req.open("GET", strURL, true); //open url using get method
    req.send(null);//send the results
     }
    }

My problem is that when I open the dropdown.php page, the browser status says 'Done, but with errors on the page' and the second dropdown isn't filtering. I can get rid of the status warning by removing:
Quote:
...onChange="ContactGrab('."'".'ajaxcalling.php?id='."'".'+this.value);">
But obviously that is something that is needed to pass the [custid] in the URL parameter....
Can anyone help me on this, as I haven't got a clue what I'm missing or where I have gone wrong!

i have used a an ajax xml ticker script in my webpage
here's the link to the page where i got the script : http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm

The problem is as soon as it reaches the end of the content, It does not cycle up to the first news item immediately there is a gap of few seconds before starts showing the items again.