1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. To chat with the GameOgre community, you need to have at least 15 posts. Once you have the 15 posts, post at Become A New Ogre
    Dismiss Notice

how i can update information in page without refresh page

Discussion in 'Online Game Development' started by rtkwar, Apr 2, 2011.

Thread Status:
Not open for further replies.
  1. rtkwar

    rtkwar Member

    Messages:
    139
    Likes Received:
    0
    Trophy Points:
    16
    Credit:
    - 54.14
    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...
     
  2. shugo

    shugo Active Member Ogre Veteran

    Messages:
    2,092
    Likes Received:
    10
    Trophy Points:
    38
    Credit:
    14,248.21
    indeed Ajax is the way to go. Though the page is refreshed, but not the whole page, just the bit that changed.

    AJAX Tutorial
     
  3. rtkwar

    rtkwar Member

    Messages:
    139
    Likes Received:
    0
    Trophy Points:
    16
    Credit:
    - 54.14
    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;
     
  4. shugo

    shugo Active Member Ogre Veteran

    Messages:
    2,092
    Likes Received:
    10
    Trophy Points:
    38
    Credit:
    14,248.21
    use 2 pages and fetch it from the other, that will work
     
  5. rtkwar

    rtkwar Member

    Messages:
    139
    Likes Received:
    0
    Trophy Points:
    16
    Credit:
    - 54.14
    you can give me example..sorry
     
  6. shugo

    shugo Active Member Ogre Veteran

    Messages:
    2,092
    Likes Received:
    10
    Trophy Points:
    38
    Credit:
    14,248.21
    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.
     
    Last edited by a moderator: Apr 7, 2011
  7. rtkwar

    rtkwar Member

    Messages:
    139
    Likes Received:
    0
    Trophy Points:
    16
    Credit:
    - 54.14
    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
     
  8. shugo

    shugo Active Member Ogre Veteran

    Messages:
    2,092
    Likes Received:
    10
    Trophy Points:
    38
    Credit:
    14,248.21
    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>
    
    
     
  9. shugo

    shugo Active Member Ogre Veteran

    Messages:
    2,092
    Likes Received:
    10
    Trophy Points:
    38
    Credit:
    14,248.21
    Now in that example I used an "onmouseover" effect. In your case you probably want an "onclick" event
     
  10. shugo

    shugo Active Member Ogre Veteran

    Messages:
    2,092
    Likes Received:
    10
    Trophy Points:
    38
    Credit:
    14,248.21
    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>

     
  11. rtkwar

    rtkwar Member

    Messages:
    139
    Likes Received:
    0
    Trophy Points:
    16
    Credit:
    - 54.14
    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>";

    ?>
     
  12. shugo

    shugo Active Member Ogre Veteran

    Messages:
    2,092
    Likes Received:
    10
    Trophy Points:
    38
    Credit:
    14,248.21
    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.
     
    Last edited by a moderator: Apr 9, 2011
  13. rtkwar

    rtkwar Member

    Messages:
    139
    Likes Received:
    0
    Trophy Points:
    16
    Credit:
    - 54.14
    iwant change div content without refresh page
     
  14. rtkwar

    rtkwar Member

    Messages:
    139
    Likes Received:
    0
    Trophy Points:
    16
    Credit:
    - 54.14
    <?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
     
  15. rtkwar

    rtkwar Member

    Messages:
    139
    Likes Received:
    0
    Trophy Points:
    16
    Credit:
    - 54.14
    <?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
     
  16. shugo

    shugo Active Member Ogre Veteran

    Messages:
    2,092
    Likes Received:
    10
    Trophy Points:
    38
    Credit:
    14,248.21
    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!
     
    Last edited by a moderator: Apr 10, 2011
  17. shugo

    shugo Active Member Ogre Veteran

    Messages:
    2,092
    Likes Received:
    10
    Trophy Points:
    38
    Credit:
    14,248.21
    don't know, because I can't tell


     
Thread Status:
Not open for further replies.

Share This Page