Just another WordPress.com site

Pseudo AJAX

The following technique is not real ajax because there is now xml-http-request-object in use and no data is loaded from the server after the page is displayed. But it’s possible to open different menu entries without sending requests to the web server. How is it done?

Assumption: We have a home page with a menu containing: “Home”, “Information”, “About me”.

First using this technique the whole page is loaded on page load which means each content like “Home”, “About”, … has its own <div> element.

<div id="cHome" style="display: none ">
 welcome to home
 </div>

It is important that each <div> has a css-style element that sets display to “none” this causes the browser to hide all the unwanted content.

How to display the content of “cHome” after clicking on menu button?

First we need to implement the java-script function, which hides all unwanted and shows all wanted content:

function display_content(id)
 {
 document.getElementById('cHome').style.display='none'; //hides
 document.getElementById('cAbout').style.display='none'; //hides
 document.getElementById(id).style.display=''; //displays
 }

 The java-script function is called using “onclick” on a
 menu button or link:

 <a href="#"  onclick="display_content('cHome')">Home</a>

 After clicking on Home, all other <div> are set invisible and the cHome
 <div> is displayed. This is all done using CSS and Java-Script
 without using requests to the server.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Tag Cloud

%d bloggers like this: