Scriptgebruik in een AJAX oproep

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

D B

D B

08/04/2015 10:06:45
Quote Anchor link
Hallo,

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)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
1
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;
        }
    });
}


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
 
PHP hulp

PHP hulp

28/03/2024 23:31:10
 
- Ariën  -
Beheerder

- Ariën -

08/04/2015 10:20:12
Quote Anchor link
Zou je de code tussrn code-tags kunnen plaatsen? Dan is het beter leesbaarder.
 
Thomas van den Heuvel

Thomas van den Heuvel

08/04/2015 11:25:28
Quote Anchor link
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.
 
D B

D B

08/04/2015 13:56:46
Quote Anchor link
Hallo Thomas,

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?
 
Thomas van den Heuvel

Thomas van den Heuvel

08/04/2015 15:05:51
Quote Anchor link
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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
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):
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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');
                }
            });
        }
    }
});

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)
PHP script in nieuw venster Selecteer het PHP script
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
// 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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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'));
        }
    });
}

Dit zou dan moeten werken.
Gewijzigd op 08/04/2015 15:06:41 door Thomas van den Heuvel
 
D B

D B

08/04/2015 16:40:55
Quote Anchor link
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
 
Thomas van den Heuvel

Thomas van den Heuvel

08/04/2015 16:45:33
Quote Anchor link
Uh, js/functions.js hangt nu dus af van js/jquery.tooltipster.min.js en die hangt weer af van je jquery lib.

De volgorde van declaratie is belangrijk:
eerst jquery lib laden
dan tooltipster
en dan pas functions.
 
D B

D B

08/04/2015 16:57:21
Quote Anchor link
Yes, het werkt! :)

Heel erg bedankt!
 
Thomas van den Heuvel

Thomas van den Heuvel

08/04/2015 17:15:14
Quote Anchor link
Ik zie dat je achteraan functions.js nog een keer dit blok hebt staan:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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');
                }
            });
        }
    }
});

Dat is dus niet nodig als het goed is doordat je het volgende aanroept als je je pagina laadt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.