how i can update information in page without refresh page

rtkwar · Apr 2, 2011

how i can update information in page without refresh?
if gold=200 and player spend 10 gold
thats mean remain gold is 190
how i can update this information without refresh page?
i read about ajax and mysql but ican't find code
any one can help me
thank you...

shugo · Apr 4, 2011

indeed Ajax is the way to go. Though the page is refreshed, but not the whole page, just the bit that changed.

AJAX Tutorial

rtkwar · Apr 4, 2011

yes my friend i try this code in my page but not work good i use this good:
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
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("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>
/////////////////////////////////////////////

but i change this xmlhttp.open("GET","ajax_info.txt",true); to
xmlhttp.open("GET","update.php",true);

//////////////////////////////////////////////////
thats code work good but when i change gold amount in date base information in page not update i must go first to update.php and make refresh for this page
//////////////////////////////////////////////////////
whats (update.php):this page bring infrmation from datebase and then print gold amount like this
echo 2000;

shugo · Apr 6, 2011

use 2 pages and fetch it from the other, that will work

rtkwar · Apr 6, 2011

you can give me example..sorry

shugo · Apr 7, 2011

I'm on a different computer right now and I'll be on yet another computer tomorrow, so I don't have an example with me right now. I'm a bit busy this week, had to send in a report yesterday and I may have to give a guided tour tomorrow. I also had to go to the hospital yesterday to visit my grandfather who suffered from a severe heart attack earlier that morning and who is in very fragile condition right now.

I can probably show you an example this saturday at the earliest, but don't count on it.

rtkwar · Apr 7, 2011

ok my friend

ok my friend no problem
i hope good health for your grandfather and iam sorry for this bad news
and my words not enough

shugo · Apr 7, 2011

ok I'm on my home PC now.

here is an example of my index file:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Roma</TITLE>
<META NAME="description" CONTENT="Roma is an online multiplayer game set in Ancient Rome during the republican era."/>
<META NAME="keywords" CONTENT="roma, rome, romegames.nl, romegames, romagames, roman empire, roman republic, online game, pbbg, mmo, mmorts, mmorpg, online game, browser based game, browser game, online rpg, online rts">
<meta http-equiv="Content-Language" content="en-us">
<meta name="author" content="Wiebe Eling de Boer">
<meta name="copyright" content="2010 Wiebe Eling de Boer">
<meta name="date" content="2011-3-9">
<meta name="ROBOTS" content="INDEX, FOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="http://httpdocs/romegames.nl/favicon.ico">
<style type="text/css">
body {background-color: #000000;}
a:link {color: #FFD700;}
a:visited {color: #DAA520;}
a:hover {color: #FFFFF0;}
a:active {color: #4B0082;}
#fullpage {min-width: 100%; min-height: 100%; margin: 0%; padding: 0%;}
#watchpage {background-color: #A93925; margin: 2%; padding: 0%;}
#topbox {position:relative; left: 0%; top: 0%; margin: 0px; padding: 0px;}
#topbannerbox {float: left; width: 90%; margin: 0px; padding: 30px;}
#bannerbox {position:relative; left: 0%; top: 0%; margin: 0px; padding: 0px;}
#leftbox {float: left; width: 30%; margin: 0px; padding: 10px;}
img.leftimager {float: left;}
#headerbox {float: left; width: 30%; margin: 0px; padding: 10px; text-align: center; background-image:url('games/graphics/laurel.gif'); background-repeat:no-repeat; background-position:center;}
H1.indexer {font-family: Times New Roman; text-align: center; font-size: 4em;}
img.topimager {width: 30%; height:15%; z-index: 2%;}
#rightbox {float: left; width: 30%; margin: 0px; padding: 10px;}
img.rightimager {float: right;}
#mainbox {position:relative; left: 0%; top: 0%; margin: 0px; padding: 0px;}
#linkbox {width: 90%; margin: 0px; padding-left: 30px; padding-right: 30px; clear: both;}
P.mainlink {font-family: Verdana; text-align: center; font-size: 1em;}
a.man:link {color: #FFD700; padding-left: 30px; padding-right: 30px; font-size: 1.25em;}
a.man:visited {color: #DAA520; padding-left: 30px; padding-right: 30px; font-size: 1.25em;}
a.man:hover {color: #FFFFF0; padding-left: 30px; padding-right: 30px; font-size: 1.25em;}
a.man:active {color: #4B0082; padding-left: 30px; padding-right: 30px; font-size: 1.25em;}
#middlebox {position:relative; left: 0%; top: 0%; margin: 0px; padding: 0px;}
#introbox {float: left; width: 50%;margin: 0px; padding: 10px;}
H3.welcome {font-family: Verdana; text-align: center; font-size: 1em;}
P.romanintro {font-family: Verdana; text-align: left; font-size: 0.875em;}
#newsbox {float: left; width: 40%; margin: 0px; padding: 10px;}
H3.newshead {font-family: Verdana; text-align: center; font-size: 1em;}
P.news {font-family: Verdana; text-align: left; font-size: 0.875em;}
P.ticker {font-family: Verdana; text-align: left; font-size: 0.875em;}
#bottombox {position:relative; left: 0%; top: 5%; margin: 0px; padding-top: 30px;}
#termbox {width: 90%; margin: 0px; padding: 30px; clear: both;}
P.bottomlink {min-width: 80%; font-family: Verdana; text-align: center; font-size: 0.75em; margin: 20px;}
</style>
<script type="text/javascript">
function ShowNews()
{

/*HTTP request*/
if (window.XMLHttpRequest)
  {
  /*code for IE7+, Firefox, Chrome, Opera, Safari*/
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  /*code for IE6, IE5*/
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  
/*onreadystatechange*/
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("ticker").innerHTML=xmlhttp.responseText;
    }
  }
  
/*processing request*/
xmlhttp.open("POST","newsticker.php",true);
xmlhttp.send();

}
</script>
</HEAD>
<BODY>
<div id="fullpage">
<div id="watchpage">

<div id="bannerbox">
<div id="leftbox">
<img src="games/graphics/pillarleft.gif" class="leftimager" width="50" height="200" border="0"/>
</div>
<div id="headerbox">
<H1 class="indexer">ROMA</H1>
</div>
<div id="rightbox">
<img src="games/graphics/pillarright.gif" class="rightimager" width="50" height="200" border="0"/>
</div>
</div>

<div id="mainbox">
<div id="linkbox">
<P class="mainlink">
<a href="javascript:window.external.addFavorite('http://www.romegames.nl','Roma');">Add to favorites!</a>
</P>
<P class="mainlink">
<A HREF="guides/guide.htm" class="man">Manual</A> <A HREF="guides/part30.htm" class="man">Walkthrough</A> <A HREF="login.php" class="man">Login</A> <A HREF="register.php" class="man">Register</A> <A HREF="board/board.php" class="man">Forum</A>
</P>
</div>
</div>

<div id="middlebox">
<div id="introbox">
<H3 class="welcome">Introduction</H3>
<P class="romanintro">
Hail citizen and welcome to Roma!
<BR>Roma is a browser based MMO set in ancient Rome.
<BR>It is free to play and requires no downloads.
<BR>
<BR>In Roma you can: trade with your neighbours, battle the barbarians, farm the land, fight in the arena, race in the circus and engage in politics in the senate.
</P>
</div>
<div id="newsbox">
<H3 class="newshead" id="news" onmouseover="ShowNews()">News</H3>
<P class="news">Read the latest news <A href="guides/part28.htm">here</A></P>
<P id="ticker" class="ticker"></P>
</div>
</div>

<div id="bottombox">
<div id="termbox">



<P class="bottomlink">
<A HREF="guides/part23.htm">Rules &amp; Guidelines</A> | <A HREF="guides/part24.htm">Terms &amp; Conditions</A> | <A HREF="guides/part25.htm">Privacy Policy</A> | <A HREF="guides/part26.htm">About</A> | <A HREF="guides/part27.htm">Screenshots</A>
<BR><BR>&copy; 2010-2011 Wiebe Eling de Boer
</P>
</div>
</div>

</div>
</div>
</BODY>
</HTML>

shugo · Apr 7, 2011

Now in that example I used an "onmouseover" effect. In your case you probably want an "onclick" event

shugo · Apr 7, 2011

OK now the php file, from which the data is fetched:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>Roma</TITLE> <META NAME="description" CONTENT="ajax process"> <META NAME="keywords" CONTENT="ajax process"> </HEAD> <BODY> <?php //DATABASE CONNECTION VARIABLES $myserver ="localhost"; $myname = "yourusername"; $mypassword = "yourpassword"; /*SQL CONNECTION*/ $con = mysql_connect("$myserver","$myname","$mypassword"); if (!$con) { die('Could not connect: ' . mysql_error()); } else { $mydb ="yourdatabase"; //DATABASE SELECTION $selector = mysql_select_db($mydb, $con); if (!$selector) { die('Could not select database: ' . mysql_error()); } else { /*COUNTING NEWS*/ $cresultnews = mysql_query("SELECT COUNT(*) AS newscount FROM news"); $crownews = mysql_fetch_array($cresultnews); $newsbank = $crownews[newscount]; if ($newsbank <1) { $response = "No news"; } else { /*FETCHING NEWS*/ $mresultnews = mysql_query("SELECT MAX(newsID) AS latest FROM news WHERE newscat ='1'"); $mrownews = mysql_fetch_array($mresultnews); $newsid = $mrownews[latest]; $resultnews = mysql_query("SELECT * FROM news WHERE newsID ='$newsid'"); $rownews = mysql_fetch_array($resultnews); $newstitle = $rownews['newstitle']; $newsdate = $rownews['newsdate']; $response ="<I>".$newsdate."</I> ".$newstitle; } //END DATABASE SELECTOR } } /*output response*/ echo $response; mysql_close($con); ?> </BODY> </HTML>

rtkwar · Apr 9, 2011

thank you my friend for your reply u can tell me whats wrong in this code?
<?
echo"<html>
<head>
<script type='text/javascript'>
function hi(link){
var xmlHttp;
try
{
// firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXobject(\"Msxml2.XMLHTTP\");
}
catch (e)
{
try
{
xmlHttp=new Activexobject(\"microsoft.XMLHTTp\");
}
catch (e)
{
alert(\"Your browser does not support AJAX!\");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
cbox=document.getElementById(\"cBox\");
cbox.innerHTML=xmlHttp.responseText;
cbox.scrollTop=cbox.scrollHeight;
}
}
xmlhttp.open('Post', link);

}

</script>
</head>
<body>

<div id=\"cBox\"></div>
<button type=\"button\" onclick=\"hi('index.php')\">Change Content</button>

</body>
</html>";

?>

shugo · Apr 9, 2011

I don't know where to start honestly, because there is so much wrong with that

"link" doesn't seem to be defined, nor does "e" seem to be defined,

and xmlHttp certainly isn't defined

why are you echoing a javascript? What boggles my mind is why you are doing that. I can understand that you add the slashes if you echo the whole, but that won't work.

I have no idea what it is you're trying to do, but whatever it is, don't do it, because it is not possible.

rtkwar · Apr 9, 2011

iwant change div content without refresh page

rtkwar · Apr 10, 2011

<?php

echo"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html>
<head><link rel=stylesheet type=text/css href=styles/phaos.css>
<style type=\"text/css\">
a:link.t3 { color: #000000; font-weight:normal; text-decoration:none;font-size: 16pt;}a:visited.t3 { color: #000000; font-weight:normal; text-decoration:none;font-size: 16pt;}

a:link.t4 { color: orange; font-weight:normal; text-decoration:none;font-size: 16pt;}a:visited.t4 { color: orange; font-weight:normal; text-decoration:none;font-size: 16pt;}
a:active.t4 { color: orange; font-weight:normal; text-decoration:none;font-size: 16pt;}
a:hover.t4 { color: orange; font-weight:normal; text-decoration:none;font-size: 16pt;}

div.margin
{
margin-top:0px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
border:1px solid #808080;
}

</style>

<script type=\"text/javascript\">

var c=1;

function loadXMLDoc(link)
{
var obj = document.getElementById('txt');

var obj2 = document.getElementById('txtt');

var xmlhttp;

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)
{
obj.innerHTML = xmlhttp.responseText;

}
}
xmlhttp.open('GET', link);

xmlhttp.send();
}

</script>
</head>

<body bgcolor=#000000>

<div class=\"margin\" id=txt style=\"visibility:visible\">
<input type=button onclick=loadXMLDoc('index.php') value=index>
</div>

</body>

</html>";

?>

//////////////////////////////////////////////////////////
i try this code it is work good with internet explorer but not work with firefox. why?
////////////////////////////////////////////////////////////////////////////////////
and iam sorry shugo for this but iam new and i don't hv expert in java script and i don't hv time in this days for read much about java script in the real i study law but i love make games so in this days i must study law first

rtkwar · Apr 10, 2011

<?php
include("ar.php");
echo"<html><head>
<script type='text/javascript'>
function chat(msg){
var xmlHttp;
try
{
// firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXobject(\"Msxml2.XMLHTTP\");
}
catch (e)
{
try
{
xmlHttp=new Activexobject(\"microsoft.XMLHTTp\");
}
catch (e)
{
alert(\"Your browser does not support AJAX!\");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
cbox=document.getElementById(\"cBox\");
cbox.value+=xmlHttp.responseText;
cbox.scrollTop=cbox.scrollHeight;
}
}
xmlHttp.open(\"Post\",\"chat.php\",true);
xmlHttp.setRequestHeader(\"Content-Type\",\"application/x-www-form-urlencoded; charset=UTF-8\");
xmlHttp.send('msg='+msg);
}
msg=\"\";
function keyUp(key)
{
if(key==13) submit_msg();
}
function submit_msg(){
msg+=document.getElementById(\"msg\").value+\" \";
document.getElementById(\"msg\").value=\"\";
}

var time=5;
var inc=self.setInterval(\"res()\",1000);
function res()
{
if(time>0){time--;}else{time=5; chat(msg); msg=\"\";}

document.getElementById(\"res\").innerHTML=time;

}
</script>
<body>
<span id=\"res\"></span>
<textarea id=\"cBox\" cols=\"60\" rows=\"10\"></textarea>

<input type=text id=\"msg\" size=50 name=msg style='position:absolute; left:300; top:805;'><input type=submit value=Send name=Send onclick=\"submit_msg()\" style='position:absolute; left:700; top:805;'>
$title[1]
</body>
</html>";

?>
///////////////////////////////////////////////////////////
itry this code for make ajax chat itis work good with explorer and firefox
///////////////////////////////////////////
why ican't use this code for change div content thank you my friend shugo

shugo · Apr 10, 2011

you do realize, that you are encapsulating php around html with an echo where it is not necessary, right?

why are you echoing javascript when it is not necessary? That leads to all kind of syntax errors! Don't do it!

shugo · Apr 10, 2011

don't know, because I can't tell

rtkmar said: ↑

<?php
include("ar.php");
echo"<html><head>
<script type='text/javascript'>
function chat(msg){
var xmlHttp;
try
{
// firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXobject(\"Msxml2.XMLHTTP\");
}
catch (e)
{
try
{
xmlHttp=new Activexobject(\"microsoft.XMLHTTp\");
}
catch (e)
{
alert(\"Your browser does not support AJAX!\");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
cbox=document.getElementById(\"cBox\");
cbox.value+=xmlHttp.responseText;
cbox.scrollTop=cbox.scrollHeight;
}
}
xmlHttp.open(\"Post\",\"chat.php\",true);
xmlHttp.setRequestHeader(\"Content-Type\",\"application/x-www-form-urlencoded; charset=UTF-8\");
xmlHttp.send('msg='+msg);
}
msg=\"\";
function keyUp(key)
{
if(key==13) submit_msg();
}
function submit_msg(){
msg+=document.getElementById(\"msg\").value+\" \";
document.getElementById(\"msg\").value=\"\";
}

var time=5;
var inc=self.setInterval(\"res()\",1000);
function res()
{
if(time>0){time--;}else{time=5; chat(msg); msg=\"\";}

document.getElementById(\"res\").innerHTML=time;

}
</script>
<body>
<span id=\"res\"></span>
<textarea id=\"cBox\" cols=\"60\" rows=\"10\"></textarea>

<input type=text id=\"msg\" size=50 name=msg style='position:absolute; left:300; top:805;'><input type=submit value=Send name=Send onclick=\"submit_msg()\" style='position:absolute; left:700; top:805;'>
$title[1]
</body>
</html>";

?>
///////////////////////////////////////////////////////////
itry this code for make ajax chat itis work good with explorer and firefox
///////////////////////////////////////////
why ican't use this code for change div content thank you my friend shugo
Click to expand...

Log in

how i can update information in page without refresh page

rtkwar Big Brute New Ogre

shugo Elite Ogre Ogre Veteran

rtkwar Big Brute New Ogre

shugo Elite Ogre Ogre Veteran

rtkwar Big Brute New Ogre

shugo Elite Ogre Ogre Veteran

rtkwar Big Brute New Ogre

shugo Elite Ogre Ogre Veteran

shugo Elite Ogre Ogre Veteran

shugo Elite Ogre Ogre Veteran

rtkwar Big Brute New Ogre

shugo Elite Ogre Ogre Veteran

rtkwar Big Brute New Ogre

rtkwar Big Brute New Ogre

rtkwar Big Brute New Ogre

shugo Elite Ogre Ogre Veteran

shugo Elite Ogre Ogre Veteran

Share This Page