jquery load.methode in load.methode gebruiken
Ik heb 3 pagina's: pagina 1, pagina 2 en pagina 3.
Alle 3 de pagina's zijn hetzelfde opgebouwd: links een div met daarin onder elkaar 3-hrefs (naar pagina 1, 2 en 3) en rechts een container-div met de informatie.
Als je pagina 1 opent en je klikt op de href van pagina 2, dan blijf je op pagina 1 maar dan wordt de informatie uit de container-div van pagina 2 m.b.v. de .load-methode ingeladen. Tot zover gaat alles goed.
Maar nu wil ik deze container-div ook weer in 2 delen opdelen precies hetzelfde als hierboven beschreven: dus in de container div weer 2 aparte div's: 1 div met 2 hrefs en 1 (sub)container-div (die weer wordt gevuld met informatie aan de hand van de keuze uit die 2 hrefs in die andere div). De informatie in de subcontainer wil ik ook weer via de .load-methode inladen.
Dus eigenlijk heb ik 6 delen van informatie: 1A, 1B, 2A, 2B, 3A en 3B.
Mijn vraag is kan dat met de jquery .load methode? Specifieker gevraagd: is het mogelijk om m.b.v. de jquery .load-methode het zo voor elkaar te krijgen dat als pagina 1 geopend is en er op de link naar pagina 3 geklikt wordt niet alleen de container van pagina 3 ingeladen wordt, maar dat in die ingelade container-div ook een keuze te maken is tussen 3A en 3B en dat aan de hand van die keuze de subcontainer gevuld wordt (en dat allemaal terwijl je nog steeds op pagina 1 zit)?
Ik hoop dat jullie het een beetje begrijpen...
Gewijzigd op 19/02/2014 15:20:02 door Jo Immanuel
Mogelijkheden genoeg dus maar probeer voorje zelf goed uit te denken wat er wanneer moet gebeuren.
Onder de voorlopige code voor pagina 1A.
Nu loop ik gelijk al tegen het volgende probleem aan. Als ik de pagina open en ik klik direct op knop A dan wordt de informatie (zoals gewenst) opnieuw opgehaald en getoond in de subcontainer. Klik ik eerst op de knop "Naar pagina 1" (waarna de informatie in de container middels load opnieuw wordt opgehaald) en daarna op Knop A in de container, dan werkt knop A niet meer.
Hoe kan dat?
Hier gaat het dus als mis. De knoppen in de container die dynamisch opgehaald zijn via .load-methode werken niet. Hoe los ik dat op?/Wat doe ik fout?
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<title>Untitled Document</title>
<style type="text/css">
#Menu {
position: absolute;
width: 200px;
height: 100px;
z-index: 1;
}
#Container {
position: absolute;
width: 500px;
height: 600px;
z-index: 2;
left: 300px;
}
#KnopPag2 {
position: absolute;
width: 200px;
height: 50px;
z-index: 2;
top: 50px;
background-color: #999999;
}
#KnopPag1 {
position: absolute;
width: 200px;
height: 50px;
z-index: 3;
top: 0px;
background-color: #CCCCCC;
}
#KnopA {
position: absolute;
width: 250px;
height: 100px;
z-index: 1;
background-color: #CCCCCC;
}
#KnopB {
position: absolute;
width: 250px;
height: 100px;
z-index: 2;
left: 250px;
top: 0px;
background-color: #999999;
}
#Subcontainer {
position: absolute;
width: 500px;
height: 500px;
z-index: 3;
top: 100px;
left: 0px;
}
</style>
<script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#KnopPag1').click(function() {
$('#Container').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Container').load('Lpag1a.html #Container', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
});
});
});
$('#KnopA').click(function() {
$('#Subcontainer').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Subcontainer').load('Lpag1a.html #Subcontainer', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
});
});
});
$('#KnopPag2').click(function() {
$('#Container').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Container').load('Lpag2a.html #Container', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
});
});
});
});
</script>
</head>
<body>
<div id="Menu">
<div id="KnopPag1">Naar pagina 1</div>
<div id="KnopPag2">Naar pagina 2</div>
</div>
<div id="Container">
<div id="KnopA">Knop 1A</div>
<div id="KnopB">Knop 1B</div>
<div id="Subcontainer">Info pag 1 A</div>
</div>
</body>
</html>
<style type="text/css">
#Menu {
position: absolute;
width: 200px;
height: 100px;
z-index: 1;
}
#Container {
position: absolute;
width: 500px;
height: 600px;
z-index: 2;
left: 300px;
}
#KnopPag2 {
position: absolute;
width: 200px;
height: 50px;
z-index: 2;
top: 50px;
background-color: #999999;
}
#KnopPag1 {
position: absolute;
width: 200px;
height: 50px;
z-index: 3;
top: 0px;
background-color: #CCCCCC;
}
#KnopA {
position: absolute;
width: 250px;
height: 100px;
z-index: 1;
background-color: #CCCCCC;
}
#KnopB {
position: absolute;
width: 250px;
height: 100px;
z-index: 2;
left: 250px;
top: 0px;
background-color: #999999;
}
#Subcontainer {
position: absolute;
width: 500px;
height: 500px;
z-index: 3;
top: 100px;
left: 0px;
}
</style>
<script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#KnopPag1').click(function() {
$('#Container').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Container').load('Lpag1a.html #Container', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
});
});
});
$('#KnopA').click(function() {
$('#Subcontainer').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Subcontainer').load('Lpag1a.html #Subcontainer', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
});
});
});
$('#KnopPag2').click(function() {
$('#Container').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Container').load('Lpag2a.html #Container', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
});
});
});
});
</script>
</head>
<body>
<div id="Menu">
<div id="KnopPag1">Naar pagina 1</div>
<div id="KnopPag2">Naar pagina 2</div>
</div>
<div id="Container">
<div id="KnopA">Knop 1A</div>
<div id="KnopB">Knop 1B</div>
<div id="Subcontainer">Info pag 1 A</div>
</div>
</body>
</html>
Toevoeging op 19/02/2014 16:42:48:
@ Frank
Met je laatste optie ("Wat ook mogelijk is is het href attribuut een andere waarde te geven waardoor deze ineens niet meer wijst naar pagina 1 maar naar pagina 2.") bedoel je eigenlijk dat ik KnopA en KnopB uit de container haal (zodat de knoppen bij gebruik .load niet opnieuw geladen worden)?
En dan vervolgens (via een stukje code) ervoor zorgen dat de verwijzingen van Knop A en Knop B verschillen naar gelang er gedrukt is op "Naar pagina 1" of "Naar pagina 2"?
Gewijzigd op 19/02/2014 19:03:38 door Jo Immanuel
Jo Immanuel op 19/02/2014 16:12:08:
Nu loop ik gelijk al tegen het volgende probleem aan. Als ik de pagina open en ik klik direct op knop A dan wordt de informatie (zoals gewenst) opnieuw opgehaald en getoond in de subcontainer. Klik ik eerst op de knop "Naar pagina 1" (waarna de informatie in de container middels load opnieuw wordt opgehaald) en daarna op Knop A in de container, dan werkt knop A niet meer.
Dat komt omdat je dan opnieuw elementen laadt in de DOM die dus niet beschikbaar waren op het moment dat de event handlers gebonden werden aan de elementen. Omdat je het via de click functie doet werkt het niet. Maak in plaats daarvan gebruik van de on() functie (http://api.jquery.com/on/) dan kan je wel events op dynamisch gegenereerde elementen afvangen.
1e HTML Laden dus inderdaad
2e events (zoals .click()) aan de elementen koppelen
daarna doet ie het wel
Maar het kan dus wel wat ik uiteindelijk wil? Namelijk werkende knoppen van andere pagina's met behulp van de .load-methode inladen?
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
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
$(function() {
$('#KnopPag1').click(function() {
$('#Container').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Container').load('Lpag1a.html #Container', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
$('body').on('click', '#KnopA', function () {
$('#Subcontainer').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Subcontainer').load('Lpag1a.html #Subcontainer', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
$('body').on('click', '#KnopB', function () {
$('#Subcontainer').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Subcontainer').load('Lpag1b.html #Subcontainer', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
});
});
});
});
});
});
});
});
});
$('#KnopPag2').click(function() {
$('#Container').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Container').load('Lpag2a.html #Container', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
$('body').on('click', '#KnopA', function () {
$('#Subcontainer').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Subcontainer').load('Lpag2a.html #Subcontainer', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
$('body').on('click', '#KnopB', function () {
$('#Subcontainer').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Subcontainer').load('Lpag2b.html #Subcontainer', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
});
});
});
});
});
});
});
});
});
$('#KnopA').click(function() {
$('#Subcontainer').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Subcontainer').load('Lpag1a.html #Subcontainer', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
});
});
});
$('#KnopB').click(function() {
$('#Subcontainer').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Subcontainer').load('Lpag1b.html #Subcontainer', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
});
});
});
});
$('#KnopPag1').click(function() {
$('#Container').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Container').load('Lpag1a.html #Container', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
$('body').on('click', '#KnopA', function () {
$('#Subcontainer').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Subcontainer').load('Lpag1a.html #Subcontainer', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
$('body').on('click', '#KnopB', function () {
$('#Subcontainer').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Subcontainer').load('Lpag1b.html #Subcontainer', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
});
});
});
});
});
});
});
});
});
$('#KnopPag2').click(function() {
$('#Container').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Container').load('Lpag2a.html #Container', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
$('body').on('click', '#KnopA', function () {
$('#Subcontainer').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Subcontainer').load('Lpag2a.html #Subcontainer', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
$('body').on('click', '#KnopB', function () {
$('#Subcontainer').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Subcontainer').load('Lpag2b.html #Subcontainer', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
});
});
});
});
});
});
});
});
});
$('#KnopA').click(function() {
$('#Subcontainer').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Subcontainer').load('Lpag1a.html #Subcontainer', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
});
});
});
$('#KnopB').click(function() {
$('#Subcontainer').animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
$('#Subcontainer').load('Lpag1b.html #Subcontainer', function() {
$(this).animate({opacity:"1", filter:"alpha(opacity=100) "}, 400);
});
});
});
});
Echter, hij doet nu opeens wel lang over het laden. Kan daar iets aan gedaan worden?
Toevoeging op 19/02/2014 23:58:50:
Aanvulling: toch werkt bovenstaande code nog niet optimaal. Als ik de pagina (Lpag1a) laad en dan op "Naar pagina 2" klik en dan op "Knop 2B" klik dan gebeurt er niets. Klik ik als ik "Naar pagina 2" heb geklikt i.p.v op "Knop B" eerst op "Knop A" dan werkt "Knop B" daarna opeens wel.
Hoe komt dat?
Toevoeging op 20/02/2014 09:18:03:
Ik heb nog een fout ontdekt.
Fout 1:
- open de pagina.
- klik op "Naar pagina 2"
- klik op "Knop 2B"
> Knop 2B werkt niet.
Fout 2:
- open de pagina.
- klik op "Naar pagina 2"
- klik op "Knop 2A"
- klik op "Naar pagina 1"
- klik op "Knop 1B"
> Informatie van Knop 2B verschijnt i.p.v. die van Knop 1B.
(klik ik eerst op op "Knop 1A" en daarna op "Knop 1B" dan verschijnt de informatie die hoort bij "Knop 1B" opeens weer wel. Net zoals bij fout 1. Het lijkt er dus op dat na het klikken op "Naar pagina ..." de B-knop pas correct verwijst nadat er op de A-knop is geklikt.)
Gewijzigd op 20/02/2014 10:13:04 door Jo Immanuel