I have a navigation with a few links, e.g. :

<a href="?content=link1">link1</a>
<a href="?content=link2">link2</a>
<a href="?content=link3">link3</a>

The rest of the page contains 2 columns:
one for a music player or video's
one for the content that changes by clicking the links.
(both columns in seperate divs)

In the content column, I added:

<?php 
$content = $_GET['content']; 
if (empty($content)) { 
include ("main.php"); 
} else { 
include("$test.php"); 
} 
?>

When there's some music playing in the first column, and I click a link so the content changes in the other column, the music stops, because the page needs to reload.
How can I get something that only reloads the content column and prevents the whole page to load?

-

AJAX or frames.

Hmm, I see.
But the thing is that I want to avoid frames.

I started coding the totally wrong way in the beginning: with frames, with tables, ... and last year, read some books about CSS and PHP and now doing everything without frames or tables, totally with divs and lists. The good way, I thought.

So you can understand that I don't want to get back to frames. I thought about iframes.
Is AJAX a big workaround? Or not much work?

Iframes will have exactly the same problems as frames do, because your music player will have to be in the main page with the content loading into the iframe.

Using AJAX means your content will be inaccessible to non-javascript user-agents. Search Engines for example.

A third option would be to open the player in a separate window in a similar fashion to radio stations do.

The only safe way to do this is by using Flash and connect with your database with amfphp.
The whole application must be in flash and the links will load with remote amfphp calls without having to reload the page.

Ok, I tried with my first AJAX experiment.

I've done it like this:

<a href="javascript:ajaxpage('link1.php', 'content');">link1</a>
<a href="javascript:ajaxpage('link2.php', 'content');">link2</a>
<a href="javascript:ajaxpage('link3.php', 'content');">link3</a>

In the content DIV I put:

  <script type="text/javascript">
  ajaxpage('main.php', 'content') 
  </script>

In the head, I put this script that I found on a free script recourse website:

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

It's working currently.
But I was thinking: is there any better solution or is this the most simple?
Why is there not much info about this issue on the internet?

So this stuff avoids the use of php and iframes or frames.

Why is there not much info about this issue on the internet?

???
http://www.webmaster-talk.com/javasc...libraries.html
http://www.webmaster-talk.com/javasc...rameworks.html
http://www.w3schools.com/ajax/default.asp

A new problem is coming up!

Content gets loaded by ajax in the 'content' div, like this:

  
<script type="text/javascript">
  ajaxpage('main.php', 'content') 
  </script>

But if I load a guestbook, made by php, in that content div, it's refreshing the whole page again when posting something in the guestbook.
It's also not adding new comments in the guestbook.

Is it possible to add an ajax line in my php that does the following:

include ("gbvul.php");

With this:

echo "<script type=\"text/javascript\">";
echo "ajaxpage('loadguestbook.php', 'content')";
echo "</script>";

Edit: didn't work out...
So if some php code loads from a form in this content area (loaded by ajax), it's going to the main page again :s

I also tried to fix the action with that javascript... but didn't work out:

<form action="javascript:ajaxpage('gbscript.php', 'content');" method="post">
... form fields...

instead of this:

<form action="gbscript.php" method="post" >
... form fields...

But then I get the message that the script didn't work.

<?php 
if(isset($_POST['submit'])) {
 
.... this script adds the comments to the database ....
 
if($added_to_database) {
include ("guestbook.php"); 
}
 
 
}
else {
  echo "The script didn't work";
}
?>

I guess it's not the solution to go back to iFrames instead of using this script?
Because with iFrames, my PHP runs perfect.

The only thing with iFrames is that I have to add the whole structure around my php code so I can add an external CSS link.