I’m going to assume that we all know, or have atleast heard of Prototype and script.aculo.us the two combine to form one powerful javascript library enabling developers to become designers (well, kind of).
– Example and code at the bottom –

I have created a ZIP file to get you up and running right away: Download it now!

I was showing a friend a few days ago something i made for a university module, Multimedia Applications Desgn (a mouthful i know). Basically we had to create a website promoting our group as a duo, thats all your getting about the project as its not really relevant and a tad embarrassing should anyone find the site!

There was a part of the site that my friend really liked and wanted to incorporate into his final year project… after sketching it out for him on paper i reconed that other people could benefit.
This has probably been splashed everywhere, but i havent seen anything that incorporates all the same characteristics on Digg.

So here is a quick, hopefully easy to understand, tutorial of how its done.

Abstract
We are trying to achieve loading content into a ‘div’ element without refreshing the page, as well as showing a cool loading window inplace of the content as it is loading.

Method
1 HTML page and 1 PHP page are required.
You dont need to follow my method exactly as there are probably many many more out there, this is just my simple approach that seems to work.

The HTML Page
This page will be the one we want the user to stay on with the ‘div’ element in it for loading the content into.

Firstly we need to include the script.aculo.us javascript files.
I just unzipped the script.aculo.us javascript files into my own folder called ‘js’.

<script src="js/lib/prototype.js" type="text/javascript"></script>
<script src="js/src/scriptaculous.js" type="text/javascript"></script>

Next we need to create a few functions to make our life easier.
The reason for this is it makes them reuseable and therfore we dont need to make our code look messy, im a little anal about code being correctly formatted and using the same chunks of code over and over again when they could simply be made into functions.

function startLoading() {
  // First we want to show the loading window then hide the content are we are loading into.
  Element.show(‘mainAreaLoading’);
  Element.hide(‘mainAreaInternal’);
}

function finishLoading() {
  // First we want to show the content are, then toggle the loading window so it fades away.
  Element.show(‘mainAreaInternel’);
  // This happens 1 second after the mainAreaInternal is shown incase the content is still loading.
  setTimeout("Effect.toggle(’mainAreaLoading’);", 1000);
}

function loadContent(id) {
  // We make use of the Ajax.Updater function to load the external data from our file.
  // Start the loading window first by calling the function we made previously.
  startLoading();

  // Request the content and update the ‘div’ area (i’ll explain this in more detail later).
  new Ajax.Updater(‘mainAreaInternal’, ‘rpc.php’, {method: ‘post’, postBody:‘content=’+ id +”});

  // Now finish the loading.
  finishLoading();
}

Next we have to make our ‘RPC file’ (probably the wrong phrase to use, but it works for me).

Whatever you ‘echo’ out to from this script will be what appears on the screen, html tags et-all, although i have found that outputting certain types of Javascript, like entire functions does not seem to work.

  // We are posting our request, like the ‘method="post"’ in a form, so we need to catch it.
  $content = $_POST[‘content’];

  // The content to show is determined by the $content integer we send through from the javascript.
  switch($content) {
    case 1:
      echo ‘This is the content for the FIRST case statement!’;
      break;
    case 2:
      echo ‘Congratulations, you have loaded the second bit of content!’;
      break;

    default:
      // This default case catches any $content value that does not have a case. I’m giving a nice error message so you can work out what went wrong.
      echo ‘Whoops, there was a problem in the switch.You passed: <em>’. $content .‘</em> to the switch statement in rpc.php.’;
  } // end Content Switch.
?>

Here is the CSS Stylesheet to make all this possible

  .mainAreaInternal {
    position: absolute;
    top: 40px;
    left: 0px;
    width: 500px;
    height: 300px;
    background-color: #cccccc;

    overflow: auto;
    z-index: 0;
  }

  .mainAreaLoading {
    position: absolute;
    top: 40px;
    left: 0px;
    width: 500px;
    height: 300px;

    z-index: 1;
  }

Ok, now that the backend is all there, we need to do the difficult part (probably the easy bit for everyone else!), making the HTML page.

<p id="navigation">

<span style="cursor: pointer" onclick="loadContent(1);">Load Content 1</span>
    <span style="cursor: pointer" onclick="loadContent(2);">Load Content 2</span>

<!– Navigation End –>
<p id="mainArea"> </p>

<p id="mainAreaInternal" class="mainAreaInternal">

This is the content that will be visible at the very beginning.

<!– End Main Area Internal –>

<p id="mainAreaLoading" class="mainAreaLoading" style="display: none">

<span style="position: relative; top: 100px; left: 100px">
        Loading Please Wait…
      </span>

<!– End Main Area –>

Now for the little explaination
Basically the loading ‘div’ area is always there, it is just hidden from view, so when you call the ’startLoading()’ function it shows it, then hides it after the allotted time.
Adding new ‘cases’ to the rpc.php file will allow more content to be loaded :)

Example and Code
Content Loading Example
RPC.php Source Code

Get the Full Code in  a ZIP Here. 

– If you are using this script, i would greatly appreciate it if you referenced http://nodstrum.com in your sourcecode :) –