PHP/AJAX to update one part of a page problem

[vizion]

I've got a puzzle contest site that I'm trying to make improvements to. Right now, when a user inputs an answer the script checks if the answer is correct. If it's not it then displays a message below the answer box indicating that the answer is wrong. The problem is that, of course, it reloads the entire page. Since most people are using the browsers to cache images it seems seamless. However, 1) some of the images we use are quite big and 2) I'd like it to be seamless even if the user is choosing not to cache everything. I'm thinking that means I need AJAX. The problem is I'm not sure quite how to implement it (not to mention that Javascript is a weak point for me). To start, here's kinda what how my page is set up:

http://bastards.alexconnect.net/1part/easyz06.htm

Note that the above link doesn't use PHP at all. It's just an example of what things look like. Here's the code for the page I'm trying to improve:

Code: [Select]

<h1 align="center">{STAGE_HEADER}</h1>

<div id="puzzle_content" align="center">
<!-- BEGIN stage_image -->
{stage_image.STAGE_IMAGE}
<!-- END stage_image -->
<br />
{STAGE_TEXT}
<br /><br />
<form action="{S_ANSWERCHECK_ACTION}" method="post" name="answercheck">
  <input name="guess" type="text" size="{TEXT_FIELD_SIZE}" maxlength="255" />
  <input type="submit" name="Submit" value="{STAGE_BUTTON}" />
  <input type="hidden" name="n" value="{STAGE_HIDDEN}" />
</form>
<!-- BEGIN wrong_answer -->
<span class="wrong">{wrong_answer.WRONG}</span>
<!-- END wrong_answer -->
</div>
<!-- BEGIN hints_row -->
<!-- {hints_row.HINT} -->
<!-- END hints_row -->
Obviously, I'm using a template system as well. In fact, it's phpBB that I'm using. Anyway, as you can see, the user inputs the answer, the answercheck script is called (the answercheck portion is included in the same file that displays the page...we'll call it puzzle.php), and if the answer is wrong the script fills in all of the stage values (image, button, header, etc) as well as entering in a message indicating that the wrong answer was guessed. I would like the answercheck script to *only* have to update the wrong answer portion when a wrong answer is made. Of course when a correct answer is made it would update everything for the new stage.

I tried messing with AJAX to do this and it worked quite well for wrong answers. Unfortunately, when I put in a correct answer it would load up the new puzzle in <span class="wrong"> portion and I'd have a messed up lookign page with a puzzle within a puzzle. Is it possible to just update one area and only at certain times? I'm pretty confused at this point.

[overklokan]

try this ajax script:

~~~~~~~~~~~~~~~~~

<script type="text/javascript">

var xmlhttp = false;

function ajax(url) {
   if(window.XMLHttpRequest){
      xmlhttp=new XMLHttpRequest();
      if(xmlhttp.overrideMimeType){
         xmlhttp.overrideMimeType('text/html');
      }
   }
   else if(window.ActiveXObject){
      try{
         xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch(e) {
         try{
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch(e){
         }
      }
   }

   if(!xmlhttp) {
      alert('Cannot create an XMLHTTP instance');
      return false;
   }

   xmlhttp.onreadystatechange = function() {
     if (xmlhttp.readyState==4) {
       if (xmlhttp.responseText == "Wrong answer!") {
          document.getElementById("wrong").innerHTML = xmlhttp.responseText;
        }
        else {
          document.getElementById("main").innerHTML = xmlhttp.responseText;
      }
      }
   }

   xmlhttp.open('GET',url,true);
   xmlhttp.send(null);
}
</script>

~~~~~~~~~~~~~~~~~~~

on server-side you need script that will return either "Wrong answer!" or something else (new
stage name, link to new image, etc.) ... that something else will be put into container with
id="main" (you must have it on your page before starting ajax call)

to start ajax call (for example):

onclick="ajax('scriptname.php?parameter=value')"

if you need more versatility when it comes to ids just add parameters to ajax and use them where needed:

~~~~~~~~~~~~~~~

<script type="text/javascript">

var xmlhttp = false;

function ajax(url, id, id2) {
   if(window.XMLHttpRequest){
...
       if (xmlhttp.responseText == "Wrong answer!") {
          document.getElementById(id).innerHTML = xmlhttp.responseText;
        }
        else {
          document.getElementById(id2).innerHTML = xmlhttp.responseText;
      }
      }
   }

   xmlhttp.open('GET',url,true);
   xmlhttp.send(null);
}
</script>
~~~~~~~~~~~~~~~~

ajax call is now (for example):

onclick="ajax('scriptname.php','wrong','main')"

[vizion]

Thanks for the reply. While waiting for a reply to my posting I actually solved the problem by using the xajax PHP class library. It was pretty easy to use (even though their documenation sucks) and required me to write absolutely no Javascript. So yeah, if there are any PHP programmers out that don't want to get their hands dirty with ugly Javascript then I recommend xajax.