Link in een div laden zonder page refresh
Ik ben al een tijdje bezig met zoeken maar kan het niet vinden(misschien verkeerd gezocht).
Maar ik heb een site waar ik door middel van een flash player een shoutcast stream laat lopen. maar als ik nu op een link klik bijvoorbeeld gastenboek
dan stopt de player met spelen.
Is het mogelijk door middel van ajax/js om ervoor te zorgen dat als je op een link klikt dat ie de content in de aangegeven div laad dus zonder de page refresh?
Alvast bedankt.
Met vriendelijke groet,
Thomas de Vries.
Maar nu het volgende dit krijg ik altijd met ajax.
Ik heb alles geïmplanteerd. en het werkt bijna zoals het zou moeten.
Alleen wat ie nu doet is 2x de index laden in de div.
Dus dan krijg ik de hoofdpagina.
En in de div nog een keer de hoofdpagina.
en dat terwijl ik alleen de home wil doen.
ik werk niet met absolute files.
ik doe dus niet dit
<a href="javascript:ajax('home.php','container');>home</a>
maar dit
<a href="javascript:ajax('home','container');>home</a>
Dit omdat ik met SEO url vriendelijkheid werk.
kan iemand mij hiermee helpen?
ik zal effe de code plaatsen.
dit is de javascript code
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<script type="text/javascript">
/***********************************************
* Dynamic Ajax Content- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
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
}
}
}
</script>
//de link//
<li><a href="javascript:ajaxpage('news', 'content');" class="active"><span class="l"></span><span class="r"></span><span class="t">Home</span></a></li>
/***********************************************
* Dynamic Ajax Content- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
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
}
}
}
</script>
//de link//
<li><a href="javascript:ajaxpage('news', 'content');" class="active"><span class="l"></span><span class="r"></span><span class="t">Home</span></a></li>
dit is de div
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<div id="content">
<?php
$file = './pages/' . GetPage($_GET['p']) . '.php';
if(!file_exists($file) )
{
$file = './pages/404.php';
}
include($file);
?>
</div>
<?php
$file = './pages/' . GetPage($_GET['p']) . '.php';
if(!file_exists($file) )
{
$file = './pages/404.php';
}
include($file);
?>
</div>
dit is de seo vriendelijkheid
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
if(!empty($_GET) && isset($_GET['p'])) {
$aParameters = explode("/", $_GET['p']);
$iTeller = 0;
foreach($aParameters as $sParameter) {
if(preg_match("_=_", $sParameter)) {
list($key, $value) = explode("=", $sParameter);
$_GET[$key] = $value;
} else {
if($iTeller > 0) {
$_GET['param'.$iTeller] = $sParameter;
} else {
$_GET['p'] = $sParameter;
}
$iTeller++;
}
}
}
?>
if(!empty($_GET) && isset($_GET['p'])) {
$aParameters = explode("/", $_GET['p']);
$iTeller = 0;
foreach($aParameters as $sParameter) {
if(preg_match("_=_", $sParameter)) {
list($key, $value) = explode("=", $sParameter);
$_GET[$key] = $value;
} else {
if($iTeller > 0) {
$_GET['param'.$iTeller] = $sParameter;
} else {
$_GET['p'] = $sParameter;
}
$iTeller++;
}
}
}
?>
dit is mijn .htaccess
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
RewriteEngine On
RewriteBase /
# Bestaande bestanden of mappen uitsluiten
RewriteCond %{REQUEST_FILENAME} -f [NC,OR]
RewriteCond %{REQUEST_FILENAME} -d [NC]
RewriteRule ^(.*?)$ $1 [L]
# Alles naar n parameter
RewriteRule ^(.*)/(.*)/(.*)/(.*)$ index.php?p=$1&a=$2&r=$3&t=$4 [NC,L]
RewriteRule ^(.*)/(.*)/(.*)$ index.php?p=$1&a=$2&r=$3 [NC,L]
RewriteRule ^(.*)/(.*)$ index.php?p=$1&a=$2 [NC,L]
RewriteRule ^(.*?)$ index.php?p=$1 [QSA,L]
#Extensie's laten parsen
AddType application/x-httpd-php .php
RewriteBase /
# Bestaande bestanden of mappen uitsluiten
RewriteCond %{REQUEST_FILENAME} -f [NC,OR]
RewriteCond %{REQUEST_FILENAME} -d [NC]
RewriteRule ^(.*?)$ $1 [L]
# Alles naar n parameter
RewriteRule ^(.*)/(.*)/(.*)/(.*)$ index.php?p=$1&a=$2&r=$3&t=$4 [NC,L]
RewriteRule ^(.*)/(.*)/(.*)$ index.php?p=$1&a=$2&r=$3 [NC,L]
RewriteRule ^(.*)/(.*)$ index.php?p=$1&a=$2 [NC,L]
RewriteRule ^(.*?)$ index.php?p=$1 [QSA,L]
#Extensie's laten parsen
AddType application/x-httpd-php .php
[HEADER]
[INDEX_CONTENT]
[FOOTER]
dus ik maak de link zo.
<a href="javascript:ajax('/pages/news.php','content');>news</a>
Dan doet ie het wel. denk dat het op zich niet zo erg is.
Alleen als die pagina niet bestaat dan krijgen bezoekers dus een lege pagina te zien.
We gaan is puzzelen.
Alvast bedankt voor je reactie.
maar werkt het ook met dit dan.
news.php?id=10
met seo kan ik dit namelijk doen
news/10
in ieder geval bedankt voor je tips
Gewijzigd op 19/04/2011 10:35:30 door thomas de vries