Scriptgebruik in een AJAX oproep
Voor mijn website http://www.zscwesterhoven.nl/ gebruik ik een laadcontent, om mijn contentframe te vullen.
Ik heb een javascript die ik gebruik als je bijvoorbeeld onder het kopje Bij Wie over Danny Bierens gaat, je ziet hier dan een foto verschijnen. Als je nu op clubinfo duwt en je gaat over dezelfde naam komt de foto helaas niet. Hoe zou ik dit op kunnen lossen? Of raden jullie misschien een andere manier aan van content laden?
Menu.php
Code (php)
1
<li><div id="button2" class="button"><a href="#" onclick="javascript:changeClass('button2');LaadContent('clubinfo.php','Clubinfo');">Clubinfo</a></div></li>
Laadcontent.js
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function LaadContent(url,titel,data) {
document.getElementById('hoofdtitel').innerHTML = titel;
document.getElementById('contentframe').style.display = 'block';
document.getElementById('hoofdkop').innerHTML = '^';
scroll(0,0);
$.ajax({
type: 'POST',
url: url,
data: {
gebruiker: "ja",
data: data
},
success: function(data) {
document.getElementById('contentframe').innerHTML = data;
}
});
}
document.getElementById('hoofdtitel').innerHTML = titel;
document.getElementById('contentframe').style.display = 'block';
document.getElementById('hoofdkop').innerHTML = '^';
scroll(0,0);
$.ajax({
type: 'POST',
url: url,
data: {
gebruiker: "ja",
data: data
},
success: function(data) {
document.getElementById('contentframe').innerHTML = data;
}
});
}
Voor het laden van het fototje gebruik ik jquery Tooltip.
Alvast bedankt voor het meedenken!
Ps. Sorry :) Codetags veranderd
Gewijzigd op 08/04/2015 10:39:22 door D B
Voor events zou je de .on() constructie kunnen gebruiken, maar hier maak je gebruik van een plugin. Ik denk dat oplossing #1 in dit antwoord nog het beste werkt (meest elegant/efficiënt), oftewel, koppel de plugin-functionaliteit opnieuw aan de dynamisch ingeladen content.
Dit kun je natuurlijk ook breder trekken en toepassen voor alle plugins die je gebruikt.
Bedankt voor het meedenken!
Ik heb helaas niet genoeg verstand van Javascript/AJAX en kom er dus niet helemaal uit.
Kun je mij iets duidelijker uitleggen wat ik precies kan doen?
Allereerst: declareer MyPage in functions.js met var ervoor. Dit zorgt ervoor dat deze variabele op alle lager gelegen niveaus (functies enzo) bekend is, want op dit moment krijg je "MyPage is not defined" JavaScript errors.
functions.js
Code (php)
1
2
3
4
2
3
4
var MyPage;
MyPage.init = function(context) {
alert('Nu krijg je wel een alert bij het laden van een pagina via AJAX');
}
MyPage.init = function(context) {
alert('Nu krijg je wel een alert bij het laden van een pagina via AJAX');
}
Vervolgens, wat je eigenlijk wilt doen is het volgende: je wilt deze snippet (tooltip.js):
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
$('.tooltip').tooltipster({
content: 'Loading...',
contentAsHTML: true,
position: 'top',
animation: 'fall',
functionBefore: function(origin, continueTooltip) {
continueTooltip();
if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'POST',
url: 'tooltip.php',
data: {id: $(this).data('id')},
success: function(data) {
origin.tooltipster('content', data).data('ajax', 'cached');
}
});
}
}
});
content: 'Loading...',
contentAsHTML: true,
position: 'top',
animation: 'fall',
functionBefore: function(origin, continueTooltip) {
continueTooltip();
if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'POST',
url: 'tooltip.php',
data: {id: $(this).data('id')},
success: function(data) {
origin.tooltipster('content', data).data('ajax', 'cached');
}
});
}
}
});
uitvoeren nadat je met een AJAX-call je HTML hebt opgehaald zodat je tooltip-functionaliteit kunt koppelen aan nieuw opgehaalde elementen met de klasse ".tooltip". Maar je gaat uiteraard deze (en andere code) niet overal knippen en plakken, maar je voegt dit toe aan MyPage.init, oftewel, alle routines die je wilt uitvoeren na het ophalen van content voer je in 1x uit via MyPage.init - dit wordt je kapstok waar je alle code aan ophangt. Verplaats dus tooltip.js naar functions.js (ik zie dat ik een iets andere opzet moet volgen dan die van StackOverflow):
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
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
// zodat MyPage in de globale scope beschikbaar is
var MyPage;
// definitie van je kapstok
function PageInit() {
this.init = function(context) {
// koppel de tooltip functionaliteit aan elementen met de klasse .tooltip
$('.tooltip', context).tooltipster({
content: 'Loading...',
contentAsHTML: true,
position: 'top',
animation: 'fall',
functionBefore: function(origin, continueTooltip) {
continueTooltip();
if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'POST',
url: 'tooltip.php',
data: {id: $(this).data('id')},
success: function(data) {
origin.tooltipster('content', data).data('ajax', 'cached');
}
});
}
}
});
// en wat je hier nog meer aan initialisatie wilt doen
// ...
}
}
// als vervolgens je document geladen is
$().ready(function() {
// eenmalige creatie
MyPage = new PageInit();
// aanroep zodat alle elementen in je body geinitialiseerd worden met de init routine
MyPage.init($('body'));
});
var MyPage;
// definitie van je kapstok
function PageInit() {
this.init = function(context) {
// koppel de tooltip functionaliteit aan elementen met de klasse .tooltip
$('.tooltip', context).tooltipster({
content: 'Loading...',
contentAsHTML: true,
position: 'top',
animation: 'fall',
functionBefore: function(origin, continueTooltip) {
continueTooltip();
if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'POST',
url: 'tooltip.php',
data: {id: $(this).data('id')},
success: function(data) {
origin.tooltipster('content', data).data('ajax', 'cached');
}
});
}
}
});
// en wat je hier nog meer aan initialisatie wilt doen
// ...
}
}
// als vervolgens je document geladen is
$().ready(function() {
// eenmalige creatie
MyPage = new PageInit();
// aanroep zodat alle elementen in je body geinitialiseerd worden met de init routine
MyPage.init($('body'));
});
Bovenstaande code is voor als je je pagina initieel laad.
Vervolgens pas je je laadcontent als volgt aan:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function LaadContent(url,titel,data) {
document.getElementById('hoofdtitel').innerHTML = titel;
document.getElementById('contentframe').style.display = 'block';
document.getElementById('hoofdkop').innerHTML = '^';
scroll(0,0);
$.ajax({
type: 'POST',
url: url,
data: {
gebruiker: "ja",
data: data
},
success: function(data) {
// waarom gebruikte je hier document.getElementById? het volgende is korter
$('#contentframe').html(data);
// en vervolgens waar het allemaal om ging:
MyPage.init($('#contentframe'));
}
});
}
document.getElementById('hoofdtitel').innerHTML = titel;
document.getElementById('contentframe').style.display = 'block';
document.getElementById('hoofdkop').innerHTML = '^';
scroll(0,0);
$.ajax({
type: 'POST',
url: url,
data: {
gebruiker: "ja",
data: data
},
success: function(data) {
// waarom gebruikte je hier document.getElementById? het volgende is korter
$('#contentframe').html(data);
// en vervolgens waar het allemaal om ging:
MyPage.init($('#contentframe'));
}
});
}
Dit zou dan moeten werken.
Gewijzigd op 08/04/2015 15:06:41 door Thomas van den Heuvel
Het werkt volgens mij (nog) niet. Voorheen moest ik tooltip.js onderaan mijn body laden. Nu hij in function.js staat staat hij bovenaan bij mijn head, zou dit hier aan kunnen liggen?
Ik probeer ook in de webbrowser de javascript errors uit te lezen, deze geeft wel een error bij mijn tooltipster nl.:
$('.tooltip').tooltipster({ *Uncaught typeError: undefined is not a function
De volgorde van declaratie is belangrijk:
eerst jquery lib laden
dan tooltipster
en dan pas functions.
Heel erg bedankt!
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
$('.tooltip').tooltipster({
content: 'Loading...',
contentAsHTML: true,
position: 'top',
animation: 'fall',
functionBefore: function(origin, continueTooltip) {
continueTooltip();
if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'POST',
url: 'tooltip.php',
data: {id: $(this).data('id')},
success: function(data) {
origin.tooltipster('content', data).data('ajax', 'cached');
}
});
}
}
});
content: 'Loading...',
contentAsHTML: true,
position: 'top',
animation: 'fall',
functionBefore: function(origin, continueTooltip) {
continueTooltip();
if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'POST',
url: 'tooltip.php',
data: {id: $(this).data('id')},
success: function(data) {
origin.tooltipster('content', data).data('ajax', 'cached');
}
});
}
}
});
Dat is dus niet nodig als het goed is doordat je het volgende aanroept als je je pagina laadt:
Code (php)
1
MyPage.init($('body'));
Dat is juist de toegevoegde waarde: je roept een centrale functie aan waar je alle initialisatie in 1x doet voor een bepaald "gebied" van je website.
Als je je pagina laadt is dit gebied je body (oftewel je hele document).
En als je pagina-content ophaalt wordt je #contentframe opnieuw geinspecteerd.
Met andere woorden: het eerste codeblok uit deze post (helemaal achteraan in je functions.js bestand) kan verwijderd worden.
Gewijzigd op 08/04/2015 17:16:35 door Thomas van den Heuvel