javascript verstoort mijn site
Ik heb een chat en imagescroller op mijn pagina. Maar als ik nu op de menubalk klik laad het even en wordt de pagina even wit waarna hij hij naar de juiste pagina gaat. Is dit te verhelpen zodat de menubalk en alle afbeeldingen blijven staan en de pagina dus niet even wit wordt?
mvg,
Kurt
Gewijzigd op 18/02/2012 23:31:56 door Kurtik watson
groeten
Gewijzigd op 19/02/2012 09:41:22 door kurtik watson
mvg,
Kurt
Even om het simpel te houden. Stel je hebt de volgende pagina:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<!-- plaats jquery library hier etc -->
</head>
<body>
<div id="target"></div>
<a class="laad_pagina" href="pagina1.php">Laad pagina 1</a>
<a class="laad_pagina" href="pagina2.php">Laad pagina 2</a>
</body>
</html>
<head>
<!-- plaats jquery library hier etc -->
</head>
<body>
<div id="target"></div>
<a class="laad_pagina" href="pagina1.php">Laad pagina 1</a>
<a class="laad_pagina" href="pagina2.php">Laad pagina 2</a>
</body>
</html>
Als je nu op link 1 of link2 klikt dan zouden die betreffende pagina's in de div "target" geladen moeten worden. Met Jquery is dat een 'piece of cake':
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$('body').on('click','.laad_pagina',function(e){
e.stopPropagation();
$('#target').load($(this).attr('href'), function() {
alert('Load was performed.'); //heeft verder geen nut, alleen om te laten zien dat het werkt
});
});
e.stopPropagation();
$('#target').load($(this).attr('href'), function() {
alert('Load was performed.'); //heeft verder geen nut, alleen om te laten zien dat het werkt
});
});
Wat er gebeurt is dat als een link met class "laad_pagina" wordt geklikt dat de href van die link (de url dus) zal worden geladen in het div met id "target". In jouw geval zou dat dus het deel van de pagina moeten zijn dat je wil veranderen, al het andere (menu, header, footer, etc) buiten die div blijft dus gewoon staan.
That's it :-)
Paar opmerkingen:
- als je geen JQuery gebruikt is dit misschien nog een beetje abracadabra, maar daar komen we wel uit.
- de pagina's die je laadt moeten dus wel alleen de content voor de target div bevatten en geen header, footer en menu meer, anders krijg je dat twee keer te zien.
Ziet er erg logisch uit, bedankt alvast! Ik heb in mijn code al:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Dit moet het zijn he, dan zal ik al eens testen!
Kurt
Gewijzigd op 19/02/2012 13:36:08 door kurtik watson
Gewijzigd op 19/02/2012 13:47:38 door Erwin H
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?php
$('body').on('click','.laad_pagina',function(e){
e.stopPropagation();
$('#target').load($(this).attr('href'), function() {
alert('Load was performed.'); //heeft verder geen nut, alleen om te laten zien dat het werkt
});
});
?>
$('body').on('click','.laad_pagina',function(e){
e.stopPropagation();
$('#target').load($(this).attr('href'), function() {
alert('Load was performed.'); //heeft verder geen nut, alleen om te laten zien dat het werkt
});
});
?>
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$(document).ready(function(){
$('body').on('click','.laad_pagina',function(e){
e.stopPropagation();
$('#target').load($(this).attr('href'), function() {
alert('Load was performed.'); //heeft verder geen nut, alleen om te laten zien dat het werkt
});
});
});
$('body').on('click','.laad_pagina',function(e){
e.stopPropagation();
$('#target').load($(this).attr('href'), function() {
alert('Load was performed.'); //heeft verder geen nut, alleen om te laten zien dat het werkt
});
});
});
Je kan eens zien op:
http://www.cocoonplace.com/eng/index050.php en dan op link van laadpagina1 klikken..De foto onder de menubalk laad opnieuw..
mvg
Gewijzigd op 19/02/2012 15:31:33 door kurtik watson
Maar ik heb het toch geincluded? Onderstaand script staat in de oorspronkelijke pagina en pagina1.php..
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Dus of plaats die JQuery link erboven, of dat nieuwe stukje script onder de JQuery link.
<script>
$(document).ready(function(){
$('body').on('click','.laad_pagina',function(e){
e.stopPropagation();
});
});
</script>
Maar foto blijft zich herladen :-( Zie je nog een fout?
mvg
Gewijzigd op 19/02/2012 15:52:42 door kurtik watson
Code (php)
1
2
3
2
3
$('#target').load($(this).attr('href'), function() {
alert('Load was performed.'); //heeft verder geen nut, alleen om te laten zien dat het werkt
});
alert('Load was performed.'); //heeft verder geen nut, alleen om te laten zien dat het werkt
});
Alleen die alert kan weg (dat is niet nodig) maar dit:
Code (php)
1
$('#target').load($(this).attr('href'));
is wel nodig. Anders laat je die pagina alsnog niet in het target div.
Overigens heb ik ook het idee dat dat e.stopPropagation niet zo goed werkt. Zou je ook kunnen vervangen door e.preventDefault() mocht het nog niet goed gaan.
Dit werkt!!! Thanks!
Ik heb nog alleen enkele vraagjes:
1 Hoe kan ik de title en bepaalde css aanpassen? Als ik naar bijvoorbeeld pagina1.php klik, gaat hij wel daarnaartoe maar zie ik als title en in de url de oorspronkelijke pagina (bijvoorbeeld pagina0.php) staan.
2 Als ik naar die pagina1.php klik, hoe kan ik vandaaruit dan terug naar mijn oorspronkelijke pagina (pagina0) gaan zonder dat de pagina terug beweegt (wit scherm)?
groeten
2. Dat kan op dezelfde manier als waarop je naar pagina1 gaat. Dus in pagina1 heb je een link met de class "laad_pagina" die verwijst naar pagina0. Alleen moet je zorgen dat je dan dus niet alles laadt van pagina0, maar alleen de content voor de target div. Wat je het beste kan doen is in je pagina0.php een check inbouwen om te zien of het een ajax call is of niet. Ik gebruik daarvoor de volgende check:
if ( !(isset($_SERVER["HTTP_X_REQUESTED_WITH"])) || !(strtolower($_SERVER["HTTP_X_REQUESTED_WITH"]) === "xmlhttprequest"))
Als het een ajax call is dan moet je dus niet de hele pagina echoen naar de browser, maar alleen die delen die in het target div moeten komen.
Dit lukt me niet. Die pagina1 bevat uiteindelijk enkel gegevens van de body he. Hoe kan ik dan volgende code erin verwerken:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('body').on('click','.laad_pagina',function(e){
e.preventDefault();
$('#target5').load($(this).attr('href'), function() {
});
});
});
</script>
Is het ook niet mogelijk dat er een $_GET in de url meekomt, dan kan de url zo gespecifieerd worden?
mvg,
Kurt
Gewijzigd op 19/02/2012 19:04:25 door kurtik watson
In die "basis pagina" moet ook het stukje javascript komen dat regelt dat er een pagina in het target div geladen wordt.
Daarna, in elke pagina die je oproept om in het target div te komen kan je links plaatsen die als class hebben "laad_pagina". Al die links zullen dan het stukje javascript coden triggeren dat ik je gegeven hebt en zal erdus voor zorgen dat die pagina in het target div geladen wordt. Zo kan je dus in pagina1 een link hebben naar pagina2 en in pagina2 weer een link terug naar pagina1. Als je er elke keer maar voor zorgt dat alleen de HTML verzonden wordt die in het target div moet komen en dus niet alle menu's etc eromheen.
Op dat laatst punt, ja, je kan uiteraard ook gewoon GET parameters meegeven. Vanuit mijn originele post genomen zou je bijvoorbeeld dit kunnen doen:
Code (php)
1
<a class="laad_pagina" href="pagina1.php?laad=ajax">Laad pagina 1</a>
En dan in pagina1 kijk je of die laad parameter is gegeven en ajax als waarde heeft, zo ja dan verstuur je alleen de inhoud voor target div.
De basispagina is views.php en de link gaat naar vrienden.php. Dit werkt heel mooi, alleen terug van vrienden naar views laad hij opnieuw de hele pagina. Kan je dit nog eens nakijken? Enkel <div id="target"><img src="afbeeldingen/koppelgroen.jpg"></div> wordt ingeladen als ik op link vrienden klik. Ik zie niet hoe ik nu terug kan gaan naar views zonder dat de volledige pagina van views laad.
De code van vrienden.php is:
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
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
<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
?>
<div id="target"><img src="afbeeldingen/koppelgroen.jpg"></div>
<?php }
else {
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<?php session_start(); ?>
<title>bekijken</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('body').on('click','.laad_pagina',function(e){
e.preventDefault();
$('#target').load($(this).attr('href'), function() {
});
});
});
</script>
</head>
<body>
<div id='left'>
<a href='' title='Balletto'><img src='imgs1/pre1.jpg' /></a>
<img src='imgs1/pre2.jpg' title='Pesca' />
</div>
<?php
<ul>
<li><a href="views.php">Bekijken</a></li>
<li><a class=laad_pagina" href="vrienden.php">Wijzigen</a></li>
<li><a href="bekijken3.php">Bekijken</a></li>
<li><a href="wijzigen.php">Wijzigen</a></li>
<li><a href="upload4.php">Uploaden</a></li>
</ul>
?>
<div id="target"><img src="afbeeldingen/koppelgroen.jpg"></div>
<a class="laad_pagina" href="pagina1.php?id=pagina1">Laad pagina 1</a>
</body>
</html>
[code]<?php
}
?>
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
?>
<div id="target"><img src="afbeeldingen/koppelgroen.jpg"></div>
<?php }
else {
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<?php session_start(); ?>
<title>bekijken</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('body').on('click','.laad_pagina',function(e){
e.preventDefault();
$('#target').load($(this).attr('href'), function() {
});
});
});
</script>
</head>
<body>
<div id='left'>
<a href='' title='Balletto'><img src='imgs1/pre1.jpg' /></a>
<img src='imgs1/pre2.jpg' title='Pesca' />
</div>
<?php
<ul>
<li><a href="views.php">Bekijken</a></li>
<li><a class=laad_pagina" href="vrienden.php">Wijzigen</a></li>
<li><a href="bekijken3.php">Bekijken</a></li>
<li><a href="wijzigen.php">Wijzigen</a></li>
<li><a href="upload4.php">Uploaden</a></li>
</ul>
?>
<div id="target"><img src="afbeeldingen/koppelgroen.jpg"></div>
<a class="laad_pagina" href="pagina1.php?id=pagina1">Laad pagina 1</a>
</body>
</html>
[code]<?php
}
?>
Gewijzigd op 20/02/2012 15:55:35 door kurtik watson