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?
Het probleem is dat de content die je inlaadt via AJAX (uiteraard) nog niet bestaat op het moment dat je je plugin koppelt aan elementen met een bepaalde klasse.
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.
Ik zie dat je al een aantal dingen aan het uitproberen bent.
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
var MyPage;
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):
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):
// 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'));
});
Bovenstaande code is voor als je je pagina initieel laad.
Vervolgens pas je je laadcontent als volgt aan:
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'));
}
});
}
Ben er nu even mee aan het stoeien, heb alles even ingekopierd. Probeer ook te begrijpen wat het allemaal doet, maar dat is toch lastig :)
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
Dat is dus niet nodig als het goed is doordat je het volgende aanroept als je je pagina laadt:
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.
