[PHP] Wordpress: Ajax in content

[X-trace]

Ik ben bezig met een plug-in voor Wordpress. De admin kan het ik helemaal klaar. Het is de bedoeling dat een speciale tag wordt vervangen met een formulier. Ik maak gebruik van Mootools: inladen van nieuwe *.php in een div (AJAX).

Ik roep een functie aan door add_filter('the_content','insertForm'); in te root-file te plaatsen. Hierdoor wordt de php-functie insertForm() aangeroepen met als parameter de content uit de database (waar ook mijn speciale tag in zit). Dit gaat allemaal goed, en als ik in de functie insertForm($content) een return $content geef, komt de inhoud gewoon op de site.

In de functie heb ik een verwijzing naar de Mootools .js bestand staan. Verder maak ik er de javascript code in en ook de html. Dit alles return ik, zodat het wordt verzonden naar de browser.

Het probleem is nu dat de javascript code (Mootools Ajax functie) wel wordt uitgevoerd, maar de responce komt niet in mijn DIV te staan. Dus: hoe krijg ik het voor elkaar dat dit wel gebeurd?

PHP:

function insertForm($content) {
    global $pluginName;
    
    $pluginNameSmall = strtolower($pluginName);
    $header = '<script type="text/javascript" src="http://pad_naar_mijn_file.js"></script>';
    
    $html = '<div id="test">hier moet de responce in komen</div>';
    $html .= '<script type="text/javascript">window.addEvent(\'domready\', function(){ ';
    $html .= 'new Ajax(\'http://pad_naar_mijn_file.php\', { method: \'get\',update: $(\'test\') }).request();';
    $html .= '});</script>';
    $content = str_replace('[mijnTag]',$html,$content);

    return $header.$content;
}

[X-trace]

niemand?

[SchizoDuckie]

Je code ziet er goed uit, dus ik zou zeggen dat wordt debuggen.

Kan je via bijv. firebug zien dat je ajax request ook echt uitgevoerd wordt en wat de response is? (weet je zeker dat je überhaupt een respose krijgt? )

Voorderest kunnen wij hier natuurlijk ook weinig mee zonder een werkende demo.

[X-trace]

Via Firebug kan ik zien dat hij verzend/ontvangt, en de responce is ook wat ik wil (in dit geval eerst even een echo met GET variabelen);

Ik heb zelf het idee dat de javascript (DOMready, maar ook als ik DOMready er tussen uit haal) wel wordt uitgevoerd, maar dat de responce niet naar desbetreffende DIV wordt verzonden.

Voor een live voorbeeld kan ik je alleen maar hierheen verwijzen. Ik heb de post even public gemaakt...

[voodooless]

'T probleem zal wel ergens in Mootools zitten. Die haalt inderdaad de pagina op, maar verder lijkt er niets mee te gebeuren.

[WouZz]

* WouZz gooi een balletje op..

moet het niet

JavaScript:

{ method: 'get',update: 'test' }

zijn?

[SchizoDuckie]

WouZz schreef op donderdag 10 januari 2008 @ 17:04:
* WouZz gooi een balletje op..

moet het niet

JavaScript:

{ method: 'get',update: 'test' }

zijn?

Dat zou niet uit moeten maken, er gaat wel automagisch een $() overheen, maar er gebeurt domweg niets.

Ik heb zelf ook nog even het een en ander geprutst maar ik krijg 't ook niet voor elkaar, vreemd want het is wel heel erg basic dit. Weet je zeker dat je geen rare parser errors nog ergens in je code hebt?

[X-trace]

WouZz schreef op donderdag 10 januari 2008 @ 17:04:
* WouZz gooi een balletje op..

moet het niet

JavaScript:

{ method: 'get',update: 'test' }

zijn?

de $() is een Mootools functie dat de document.getElementById vervangt. Hij wijst dus naar de DIV met id test.

Morgen zal ik maar weer wat proberen. Moed zakt me in de schoenen...heb al zo veel geprobeerd. En ook in de output source zie je de javascript gewoon staan.

[SchizoDuckie]

X-trace schreef op donderdag 10 januari 2008 @ 22:21:
[...]


de $() is een Mootools functie dat de document.getElementById vervangt. Hij wijst dus naar de DIV met id test.

Morgen zal ik maar weer wat proberen. Moed zakt me in de schoenen...heb al zo veel geprobeerd. En ook in de output source zie je de javascript gewoon staan.

ik ken de $ functie Wat ik bedoelde is dat het AjaxRequest deze automagisch al doet en dat jij die niet in je call hoeft te zetten.

Wat je nog kan proberen is dit:

JavaScript:

new Ajax('http://pad_naar_mijn_file.php', { method: 'get', 
onComplete: function() { 
console.log('ajaxrequest done.', this.response, this.response.text, this.options.update), $(this.options.update));
}, 
onError: function(err){
console.log('error occured!', this, err); 
}}).request();

[WouZz]

SchizoDuckie schreef op donderdag 10 januari 2008 @ 17:20:
[...]
Dat zou niet uit moeten maken, er gaat wel automagisch een $() overheen, maar er gebeurt domweg niets.

Ik ken mootools niet, maar wel prototype en die doet hetzelfde. De vraag is wat het Ajax object van mootools als argument verwacht. Is dit het id van het element of een referentie naar het element (document.getElementById() dus)?

Hier hebben ze het inderdaad over $(element), maar hier hebben ze het over 'container'.

Het probleem zou kunnen zijn dat je en Prototype en Mootools gebruikt. Beide definieren o.a de $() functie en het Ajax object.

[SchizoDuckie]

WouZz schreef op vrijdag 11 januari 2008 @ 12:18:
[...]


Ik ken mootools niet, maar wel prototype en die doet hetzelfde. De vraag is wat het Ajax object van mootools als argument verwacht. Is dit het id van het element of een referentie naar het element (document.getElementById() dus)?

Dat is dus wat ik in mijn post hierboven duidelijk probeerde te maken, het ajax object zal automagisch $() doen over de parameter die jij daar meepassed. Het maakt dus niet uit of je een object of string meestuurt, kijk maar:

JavaScript: mootools.js

    onComplete: function(){
        if (this.options.update) $(this.options.update).empty().setHTML(this.response.text);
        if (this.options.evalScripts || this.options.evalResponse) this.evalScripts();
        this.fireEvent('onComplete', [this.response.text, this.response.xml], 20);
    },

Het probleem zou kunnen zijn dat je en Prototype en Mootools gebruikt. Beide definieren o.a de $() functie en het Ajax object.

Hmm oh.. krijg nou wat... Die had ik nog niet gezien.
Les nummer 1 aan mootools: gebruik NOOIT een ander framework én mootools. dat gaat *niet* werken (Mootools is daar niet op gebouwd en da's een expliciete keuze)
Haal dus je prototype declaratie even weg en het zal waarschijnlijk in 1x werken

[ Voor 14% gewijzigd door SchizoDuckie op 11-01-2008 13:38 ]

[WouZz]

Okay... blijkbaar evalueren $('container') en $($('container')) dus naar hetzelfde?

Verder zou ik als ik TS was Mootools vervangen door Prototype aangezien Prototype standaard bij WordPress wordt meegeleverd en veel plugins en het backend deze ook gebruiken. En volgens mij is de Lightbox nu namelijk ook stuk..

[X-trace]

Ahh...dat is dan denk ik het probleem. In de backend gebruik ik ook Mootools en hier werkt het wel. Blijkbaar wordt daar dus geen prototype gebruikt.
En idd...mijn lightbox werkt niet meer.

Ik ga eens kijken naar prototype...dit ken ik niet. Zal wel niet veel verschillen. Ik weet in ieder geval al meer. Ik vond het al zo raar, aangezien de Ajax functie in de admin wel werkte en ik precies dezelfde code gebruikte.

Edit:

Haal dus je prototype declaratie even weg en het zal waarschijnlijk in 1x werken

Andersom lijkt me beter aangezien het een plugin wordt welke in de toekomst te downloaden zal zijn.

Edit 2:

JavaScript:

new Ajax.Updater('divID','mijnbestand.php', { method: 'get',parameters: {id: '1' }});

Woei...het werkt! Bedankt voor alle hulp, ik kan (eindelijk!) weer verder.

[ Voor 33% gewijzigd door X-trace op 11-01-2008 14:37 . Reden: Probleem opgelost ]