[MooTools] links in geladen bestand werken niet

[Verwijderd]

Iedereen,

Mijn opstelling op dit moment:

Index.php
- include mootools en overige javascript bestanden
- een div met id desMenHor

Een overig javascript bestand
- bij het laden word er een request gedaan naar menu.php, zodra deze is gelukt word in index.php de div gevuld met wat er in menu.php staat.

Ander javascript bestand
- zorgt ervoor dat er een specifiek 'venster' opend zodra er op een link met een id is geklikt

Menu.php
- Hierin staat de html menu met op elke link een apart id


Probleem is dat het 'venster' niet word geopend zodra je op een link klikt. Het ligt echter niet aan het javascript bestand die voor de afhandeling hiervan zorgt. Want het werkt wel gewoon als ik de inhoud van menu.php gewoon in de index.php zet.

De reden waarom ik dat niet doe is omdat er ook weer andere versies van het menu zijn die in menu.php staan. En die versies worden ook gebruikt als er een variable in de url staat. En de keuze word ook weer aangeroepen door een request. Beetje moeilijk om uit te leggen waarom dat niet kan.. komt er gewoon op neer dat het niet op een andere manier kan.

Maar weet iemand hoe ik dit oplos? Ik heb wel vaker dat dit soort dingen het niet doen als het bestand word ingeladen door javascript zelf, maar het is me nooit gelukt om dit op te lossen

[dB90]

In het kort: Je javascript dat in menu.php staat wordt niet geëvalueerd door de browser. Keywords voor google: Evaluating javascript

[Verwijderd]

Helaas heeft het gebruik van eval niets opgeleverd. Ik heb tevens een simpele test gedaan, ik heb namelijk het volgende in menu.php gezet en helaas kwam er niks tevoorschijn op index.php

JavaScript: menu.php

<script type="text/javascript">
     eval(document.write('test'));
</script>

JavaScript: menu.php

<script type="text/javascript">
     document.write(eval('test'));
</script>

JavaScript: menu.php

<script type="text/javascript">
     document.write('test');
</script>

JavaScript: menu.php

<script type="text/javascript">
     eval('test');
</script>

[RobIII]

Euh; eval wil een string, dus je eerste voorbeeld gaat idd niet werken...

JavaScript:

eval('document.write("test");');

Je tweede en vierde voorbeelden eval-len een string "test" Wat zou dat moeten doen volgens jou? Of heb je een functie "test()"?

Maar dat staat los van 't feit dat je even moet nagaan of je eval wel wil gebruiken; er zijn mooiere/betere oplossingen te bedenken

[ Voor 56% gewijzigd door RobIII op 13-07-2009 12:50 ]

[Verwijderd]

Ik heb gewoon alles wat in me op kwam geprobeerd mbt eval. En niks daarvan werkte. Dus ik zal toch geen eval gebruiken omdat het gewoon niet werkt

Tips zijn altijd welkom als iemand een mooiere/betere manier weet!

[RobIII]

Verwijderd schreef op maandag 13 juli 2009 @ 12:52:
Ik heb gewoon alles wat in me op kwam geprobeerd mbt eval.

Of je leest de documentatie en gaat niet als een wildeman met een knuppel in 't donker gaan staan zwaaien in de hoop dat je iets raakt

Verwijderd schreef op maandag 13 juli 2009 @ 12:52:
En niks daarvan werkte. Dus ik zal toch geen eval gebruiken omdat het gewoon niet werkt

Dat bedoel ik dus. Bull. Eval werkt prima; dat het niet doet wat je wil omdat je het verkeerd gebruikt is iets anders Dat er andere (wél valide) redenen zijn om eval niet te gebruiken is iets anders

[ Voor 6% gewijzigd door RobIII op 13-07-2009 12:54 ]

[Verwijderd]

Oke, ik heb hem even doorgelezen en heb het als ik het in index.php gebruik werkend. Maar het werkt gewoon niet zodra ik het gebruik in menu.php ...

[RobIII]

Laat eens wat (relevante!!!) code zien? That is: een "uitgeklede" testcase en dus niet een paar honderd regels code waar "ergens" je probleem in verstopt zit.

[ Voor 63% gewijzigd door RobIII op 13-07-2009 13:16 ]

[Verwijderd]

Tijdens het laden van de index word dit uitgevoerd

JavaScript:

new Request(
    {
        method: 'get',
        url: 'pages/menu.php',
        onFailure: function()
        {
            $('desktopMenuHorizontal').empty();
            $('desktopMenuHorizontal').set('html', '<strong>Error Loading XMLHttpRequest</strong>');
        },
        onSuccess: function(res)
        {
            $('desktopMenuHorizontal').empty();
            $('desktopMenuHorizontal').set('html', res);
        }
    }).send();

in menu.php staat nu heel simpel dit, maar normaal zou er gewoon html staan met een menu. En dan op elk item een apart id.

JavaScript:

<script type="text/javascript">
     eval('document.write("tekst")');
</script>

En index.php:

HTML:

<div id="desktopMenuHorzontal"></div>

edit:

Ik snap de vraag om wat code eigenlijk helemaal niet, er zit namelijk nergens een echt 'probleem' in de code. Het enige wat ik hoef te weten is hoe ik de javascript kan laten werken op een pagina die dmv een Request in een andere pagina word gezet.

[ Voor 13% gewijzigd door Verwijderd op 13-07-2009 13:38 ]

[H004]

Het probleem wat je hebt komt eigenlijk omdat je niet snapt hoe javascript en 'ajax' werkt. Javascript functies worden normaal gesproken uitgevoerd zodra de pagina geladen is (of als de DOM geladen is bv dmv Mootools en het "domready"-event). Een van die functies is het inladen van je menu. Dat menu laad jij als pure html, ook al staan er scripts in de in te laden html. Ondertussen is je browser al klaar met het bekijken van je document en het uitvoeren van alle javascript-functies, en ziet hij niet dat er nieuwe javascript toegevoegd is aan je document. Hij zal deze nieuwe code dus ook nooit gaan uitvoeren, tenzij je ze specifiek aanroept...

Dus lees én de documentatie van Mootools goed door... (Hint: optie nummer 9...), én denk eens na hoe je alle nieuw uit te voeren javascript-functies aan moet roepen. Want jouw code

JavaScript:

<script type="text/javascript">
     eval('document.write("tekst")');
</script>

uit menu.php zal nooit uitgevoerd gaan worden, tenzij je het expliciet aanroept op het moment dat het ook daadwerkelijk toegevoegd is aan de DOM, dus ná

JavaScript:

$('desktopMenuHorizontal').set('html', res); 

Echter, dit blijft allemaal repareerwerk, want in mijn ogen klopt je hele structuur niet. Javascript-code ophalen in een XMLhttpRequest en vervolgens laten uitvoeren is eigenlijk niet "the way to go". Kan je echt niet gewoon je menu includen met

PHP:

include("menu.php");

en vervolgens met javascript over je menu-items loopen en de open-venster-functie toevoegen aan de betreffende menu-items?

[Verwijderd]

H004 schreef op maandag 13 juli 2009 @ 16:34:
Echter, dit blijft allemaal repareerwerk, want in mijn ogen klopt je hele structuur niet. Javascript-code ophalen in een XMLhttpRequest en vervolgens laten uitvoeren is eigenlijk niet "the way to go". Kan je echt niet gewoon je menu includen met

PHP:

include("menu.php");

en vervolgens met javascript over je menu-items loopen en de open-venster-functie toevoegen aan de betreffende menu-items?

Het is ook een beetje vreemd, dat geef ik helemaal toe. Maar ik kan het niet op een gewone manier doen omdat het menu elke keer veraderd moet worden zodra er een 'project' is geladen. De request word namelijk ook wel gedaan naar menu.php?id=nummer. En dan krijgt hij het bepaalde menu en dit moet ook zonder te laden worden ingevoegd.
Het kan dus helaas niet op een andere manier.

[tonyisgaaf]

Verwijderd schreef op maandag 13 juli 2009 @ 16:57:
[...]

Het kan dus helaas niet op een andere manier.

Maak daar ajb van "ik ken geen andere manier".

Voorbeeld pseudo implementatie:
- Nodes ophalen d.m.v. JSON/XML/{vul in wat je uitkomt}.
- Menu bouwen d.m.v. JS a.d.h.v. opgehaalde nodes.
- Events/behaviour koppelen aan menu-nodes.

[Cartman!]

Misschien moet je eens bedenken waarom je uberhaupt een rare structuur nodig hebt zodat je dit probleem tegenkomt (dat t op te lossen is, is een ander verhaal). Waarom haal je die JS file niet gewoon altijd op in de head (of beter nog voor de performance, helemaal onderaan je pagina)?

[Verwijderd]

@Cartman!,
Als je het topic een beetje gevolgd had dan had je gemerkt dat ik elke keer een andere versie van het menu nodig heb en dus hem opnieuw moet ophalen. Overigens is het geen js bestand, maar alleen maar html. Dat ik er javascript in heb gezet was alleen maar voor het testen van eval().

Overigens lijkt het alsof mootools er niks op uit doe als ik dit toevoeg:

JavaScript:

evalScripts: true,
evalResponse: true

Ik merk dat er meerdere mensen problemen mee hebben, alleen eigenlijk word er nergens een echt antwoord gegeven.

[ Voor 28% gewijzigd door Verwijderd op 13-07-2009 21:23 ]

[tonyisgaaf]

Verwijderd schreef op maandag 13 juli 2009 @ 21:19:
@Cartman!,
Als je het topic een beetje gevolgd had dan had je gemerkt dat ik elke keer een andere versie van het menu nodig heb en dus hem opnieuw moet ophalen. Overigens is het geen js bestand, maar alleen maar html. Dat ik er javascript in heb gezet was alleen maar voor het testen van eval().
[...]
Ik merk dat er meerdere mensen problemen mee hebben, alleen eigenlijk word er nergens een echt antwoord gegeven.

Dat komt wellicht omdat het ook niet de meest eenvoudige materie is.

Opnieuw: _nadat_ je de HTML m.b.v. AJAX insert kun je een JS over de nodes laten lopen, waarmee je functies/events/behaviour aan nodes toekent.

Leer de scheiding te maken tussen content/markup, layout en behaviour.

[Verwijderd]

Ik probeer nu in php op een goede manier het menu in JSON te maken. Alleen gaat dat nog niet zo makkelijk, omdat het menu er o.a. zo uit ziet:

HTML:

<ul>
     <li><a href="" id="">menu</a>
          <ul>
               <li><a href="" id="">menu</a></li>
               <li><a href="" id="">menu</a></li>
               <li><a href="" id="">menu</a></li>
          </ul>
     </li>
</ul>

[H004]

Je menu met JSON op gaan bouwen is mooi, maar aangezien je niet snapt waarom het allemaal niet werkt heeft zo'n stap echt 0,0 zin...

H004 schreef op maandag 13 juli 2009 @ 16:34:
Het probleem wat je hebt komt eigenlijk omdat je niet snapt hoe javascript en 'ajax' werkt. Javascript functies worden normaal gesproken uitgevoerd zodra de pagina geladen is (of als de DOM geladen is bv dmv Mootools en het "domready"-event). Een van die functies is het inladen van je menu. Dat menu laad jij als pure html, ook al staan er scripts in de in te laden html. Ondertussen is je browser al klaar met het bekijken van je document en het uitvoeren van alle javascript-functies, en ziet hij niet dat er nieuwe javascript toegevoegd is aan je document. Hij zal deze nieuwe code dus ook nooit gaan uitvoeren, tenzij je ze specifiek aanroept...

Evalscripts" etc. evalueren alle scripts in met ajax ingeladen html. Aangezien jij alleen maar html aanriep in eerste instantie, en geen scripts, zal evalscripts dus ook niet zoveel uithalen! Dat je begon te prutsen met eval() etc in menu.php kwam omdat je probleemstelling erg vaag is/was, waardoor iedereen dacht dat je scripts inlaadde met ajax. Meteen een testcase geven met relevante code zou heel erg geholpen hebben... Desalniettemin geldt bovenstaande verhaal nog steeds voor jouw probleem: jouw venster-creeer-functie is al aangeroepen vóórdat je met ajax het menu laadt (wat ook heel erg logisch is natuurlijk!), waardoor die functie helemaal niet weet dat die menu-links bestaan! Roep dus je venster-creeer-functie aan nádat je met ajax je menu hebt ingeladen in je DOM:

Dit is jouw ajaxresultaatafhandelingsfunctie:

JavaScript:

onSuccess: function(res)
        {
            $('desktopMenuHorizontal').empty();
            $('desktopMenuHorizontal').set('html', res);
        }

// Dit is pseudocode om die "vensters" waar je het over hebt aan te roepen:
// Kijk even in je 'Ander javascript bestand' welke functie je precies wil aanroepen...
window.onload = maakVensters();

Plaats nu nadat je de nieuwe html hebt ingeladen een functiecall naar maakVensters() en klaar is Ssosix...

[tonyisgaaf]

Verwijderd schreef op maandag 13 juli 2009 @ 22:19:
Ik probeer nu in php op een goede manier het menu in JSON te maken. Alleen gaat dat nog niet zo makkelijk, omdat het menu er o.a. zo uit ziet:

HTML:

<ul>
     <li><a href="" id="">menu</a>
          <ul>
               <li><a href="" id="">menu</a></li>
               <li><a href="" id="">menu</a></li>
               <li><a href="" id="">menu</a></li>
          </ul>
     </li>
</ul>

Ik ben het hier eens met H004: als het zo'n simpel menu betreft, kun je net zo goed de HTML er zo inserten. Mij lijkt het mooiste moment om de JS z'n werk te laten doen direct na de insertion.

Daarnaast bekruipt me sterk het gevoel dat je een browser in een browser aan het bouwen bent. Met vensters en frames enzo. En natuurlijk caching en een history manager.

Als ik zo vrij mag zijn: waarom gebruik je al deze mooie Ajaxian bells and whistles?

[Cartman!]

Verwijderd schreef op maandag 13 juli 2009 @ 21:19:
@Cartman!,
Als je het topic een beetje gevolgd had dan had je gemerkt dat ik elke keer een andere versie van het menu nodig heb en dus hem opnieuw moet ophalen. Overigens is het geen js bestand, maar alleen maar html. Dat ik er javascript in heb gezet was alleen maar voor het testen van eval().

Juist daarom zeg ik het. Misschien moet je nadenken over een manier waarbij je dezelfde code kunt hergebruiken volgens dezelfde structuur. Echt onderhoudbaar is het natuurlijk niet als elke combinatie van een menu andere JS code nodig heeft. En als het alleen maar html is wat je nu zegt, dan had je dit hele probleem niet gehad volgens mij

edtit: eens met H004 ook dus

[Verwijderd]

@H004, ik krijg nu helemaal het gevoel dat je denkt dat ik voor de eerste keer iets in javascript maak .... ?

Plaats nu nadat je de nieuwe html hebt ingeladen een functiecall naar maakVensters() en klaar is Ssosix...

Helaas, werkt niet. Had ik al geprobeerd (nu dus nog een keer) en dat werkt niet.

Als ik zo vrij mag zijn: waarom gebruik je al deze mooie Ajaxian bells and whistles?

Ik ben bezig met een veel te uitgebreid admin paneel, verder kan ik er alleen weinig over vertellen.

*** was even 2 daagjes druk, ga er nu weer mee verder ***