JavaScript - Php Ajax / Image Refresh Bug

hello, can anyone help me with a javascript-php-ajax problem?

I have created a table with checkboxes and whenever an ajax function is called to refresh, the checkboxes that were highlighted and checked get reset, here is my javascript for the check function:

$(document).ready(function()
{
$("#checkall").live('click',function(event){
$('input:checkbox:not(#checkall)').attr('checked',this.checked);

//To Highlight
if ($(this).attr("checked") == true)
{

//$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#FF3700");
$("#policy").find('tr:not(#chkrow)').css("background-color","#FC9A01");
}
else
{

//$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#fff");
$("#policy").find('tr:not(#chkrow)').css("background-color","#FFF");
$("#policy").find('tr.alt:not(#chkrow)').css("background-color","#EAF2D3");
}

});

$('input:checkbox:not(#checkall)').live('click',function(event)
{
if($("#checkall").attr('checked') == true && this.checked == false)
{
$("#checkall").attr('checked',false);
$(this).closest('tr').css("background-color","#ffffff");
}
if(this.checked == true)
{
$(this).closest('tr').css("background-color","#FC9A01");
CheckSelectAll();
}
if(this.checked == false)
{
$(this).closest('tr').css("background-color","#ffffff");
$(this).closest('tr.alt').css("background-color","#EAF2D3");
}
});

function CheckSelectAll()
{
var flag = true;
$('input:checkbox:not(#checkall)').each(function() {
if(this.checked == false)
flag = false;
});
$("#checkall").attr('checked',flag);
}

});

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 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

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.

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.

Hi,

I am hoping I just need to be pointed in the right direction with this.

I have Page1.

When Page1 body onloads it uses Ajax to call PartA

Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh.

So the order of events would look like this:
Page1
|
onload call
|
v
PartA
/ \
V V
PartA[1] PartA[2]
(loads once) (constantly refreshes)

What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway).

I do not want the user to have to click a button or do anything to call up PartA[2].

So my question is how would I get PartA[2] to automatically load within PartA?

I hope I have made this clear, but if I haven't let me know and I will try again.

Hi

I need some help. I have a link that opens in a new window which allows the user to perform an update to a record. On submit I want it to obviously update (which it does), then close the page and update the main page (where we opened the link from initially).

I seem to have this working using an function which is called off the submit button using onclick........the function is:

<script type="text/javascript">
function windowclose() {
window.opener.location.href = window.opener.location.href;
window.close()
}
</script>


Now, the update happens as I say, and the page closes, and the main page looks like it refreshes but the update is not reflected....if I hit f5 the update appears. Is it to do with the speed of writing to the database and updating the screen? I have also been playing around with trying to add a settimeout to add a delay between update and close/refresh but couldnt get it to work.

Any help would be appreciated.

Cheers!

Well first off all I would appricate any help that you could give me because I've been looking all over the internet for the solution without any result.

So off to my problem, I made this text-based online game and let's say the user does a crime, he did this crime 17:04:30 and has to wait till 17:06:30 before he can do a crime again (this is printed in the MySQL database).
Getting the value from the database and changing it into the right format mm:ss is no problem. The problem comes to when its about refreshing... I've tried meta refresh and javascript location.refresh with good results, i sat the timer to 1 sec and it refreshed.
The problem comes to when it refresh the mouse cursor and the tab (in firefox and chrome) gets that look, like when u refresh a page normally u can see an hourglass and all that. Is there anyway to disable that? And i think it really slows the browser down after a while (because after like 30 min or more firefox used 600 mb of my RAM).

So yeah here's my Iframe code:

Code:

print <<<ENDHTML
<IFrame Src= "right_timer.php" Scrolling=No Frameborder=0 
Marginheight=0 Marginwidth=0 Width=100% Height=160> 
  <p>Your browser does not support iframes.</p>
</iframe>

Also here's the right_timer.php:

Code:

<?php
  include("config.php");
  $dbres = mysql_query("SELECT *,UNIX_TIMESTAMP(`crime`) AS `crime` FROM `users` WHERE `login`='{$_SESSION['login']}'");
  $data	= mysql_fetch_object($dbres);  
  if(! check_login()) {
    print"<link rel=stylesheet type=text/css href=style.css>";exit;
  }
if ($data->status == dead) { print"<link rel=stylesheet type=text/css href=style.css>";exit; }
?>
<html>
  <head>
    <meta http-equiv="refresh" content="1">
  </head>
<body>
<?php
$dbres = mysql_query("SELECT * FROM `users` WHERE `activated`='1'");
$users= mysql_num_rows($dbres);
$dbres = mysql_query("SELECT * FROM `users` WHERE `status`='alive' AND `activated`='1'");
$levend = mysql_num_rows($dbres);
$dbres = mysql_query("SELECT * FROM `users` WHERE  UNIX_TIMESTAMP(NOW())-UNIX_TIMESTAMP(`online`) < 300");
$online = mysql_num_rows($dbres);

$dbres = mysql_query("SELECT * FROM `users`");
while($blah = mysql_fetch_object($dbres)){
$time = time();
$crime = gmdate('i:s',($data->crime - $time));
if (($data->crime - $time) < 0) { $crime = Now; }
}
print <<<ENDHTML
<tr><td>Crime {$crime}</td></tr>
ENDHTML;
?>
</body>
</html>

I need help with a javascript refresh button. I'm having trouble linking the feed fetcher section to the refresh button section.
I think code lines 81 through 87 are the problem.

[code]

// create table view data object
var data = [];

var xhr = Ti.Network.createHTTPClient();
xhr.open("GET","http://rss.news.yahoo.com/rss/business");
xhr.onload = function()
{
try
{
var doc = this.responseXML.documentElement;
var items = doc.getElementsByTagName("item");
var x = 0;
var doctitle = doc.evaluate("//channel/title/text()").item(0).nodeValue;
for (var c=0;c<items.length;c++)
{
var item = items.item(c);
var thumbnails = item.getElementsByTagName("media:thumbnail");
var media;
if (thumbnails && thumbnails.length > 0)
{
media = thumbnails.item(0).getAttribute("url");

}
else
{
media="blue.png";
}

var title = item.getElementsByTagName("title").item(0).text;
var row = Ti.UI.createTableViewRow({height:80});
var label = Ti.UI.createLabel({
text:title,
left:72,
top:5,
bottom:5,
right:5
});
row.add(label);
var img;
if (Titanium.Platform.name == 'android')
{
// iphone moved to a single image property - android needs to do the same
img = Ti.UI.createImageView({
url:media,
left:5,
height:60,
width:60
});

}
else
{
img = Ti.UI.createImageView({
image:media,
left:5,
height:60,
width:60
});

}
row.add(img);
data[x++] = row;
row.url = item.getElementsByTagName("link").item(0).text;

}
var tableview = Titanium.UI.createTableView({data:data});
Titanium.UI.currentWindow.add(tableview);
tableview.addEventListener('click',function(e)
{
var d=Titanium.Platform.openURL(e.row.url);

});

// START REFRESH code
var refresh = Titanium.UI.createButton({
systemButton:Titanium.UI.iPhone.SystemButton.REFRESH
});
refresh.addEventListener('click', function()
{
tableview.Data([]);
setTimeout(function()
{
Data();
},1000);
});

if (Ti.Platform.name == 'iPhone OS') {
win2.rightNavButton = refresh;
} else {
refresh.top = 5;
refresh.title = "Refresh";
refresh.width = 200;
tableview.top = 60;
Titanium.UI.currentWindow.add(refresh);
}

Data();

//END REFRESH code

}
catch(E)
{
alert(E);
}


};
xhr.send();




[code]

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,

hi

i have a table with some document.write statements inside that write inside the cells.

i need to refresh the table from a function so the statements will execute again. but i only want the table to refresh not the whole page

document.location.reload()
this does the page but can i put the tables id in the brackets or something.

thanks