[AJAX] Grafiek laadt niet

[MueR]

Ik zit met het volgende probleem:
Ik heb een pagina met omzet statistieken van het bedrijf. Doordat deze pagina door een MySQL tabel met een miljoen records gaat wandelen tot 6 maanden terug, doet deze pagina er momenteel zo'n 60 seconden over om te laden. Nu heb ik de laadtijd teruggebracht naar zo'n 15 seconden door de pagina op te delen in 2 stukken. Het eerste deel van de pagina laat de huidige maand zien, de andere laat de 6 maanden zien. Ik wissel tussen de paginas dmv AJAX.
Op deze paginas wordt dmv javascript een flash pakketje aangeroepen, wat een grafiek weergeeft. Wanneer ik de paginas direct aanroep, wordt het grafiekje netjes ingeladen, maar wanneer ik dit via ajax inlaadt in een divje, doet hij niks. Ik zie in FireBug wel dat het script wordt weggeschreven naar de div, met alle waarden.

Het javascript wat deze grafieken in moet laden, is zowel op de hoofdpagina, als op de child pagina welke wordt opgevraagd ingeladen, maar zonder succes. Ook afzonderlijk (dus op een pagina wel, op de ander niet) inladen werkt niet.

Waarom laden deze grafieken niet? Is het niet mogelijk om via AJAX javascript uit te voeren op een child pagina?

[ Voor 11% gewijzigd door MueR op 05-03-2007 11:26 ]

[SchizoDuckie]

Ik vrees dat je even wat voorbeeld code zal moeten geven (een gestripte demo ofzo) want anders moeten wij allemaal onze glazen bol weer gaan oppoetsen om te zien wat er precies mis is met je code

[BasieP]

wat versta je onder een 'child pagina' ??
bij mijn weten is html html...
heb je het over frames? zoals hierboven al gezegt: maak eens een kleine demo waarin te zien is wat fout gaat

[ Voor 30% gewijzigd door BasieP op 05-03-2007 12:19 ]

[MueR]

De pagina is opgezet met frames. Een menu frame, en een content frame. In het contentframe worden uiteraard alle paginas geladen.

Het gaat om de pagina statistieken. Deze wordt als volgt opgezet:

code:

<div id="ajaxContainer">
    <div id="ajaxTabarea">
        <ul id="ajaxTabs">
            <li class="ajaxTabOption" id="tab1" onclick="getTabData(this.id, <?=$platform?>)"><a onclick="return false;"><span>Vandaag &amp; Huidige maand</span></a></li>
            <li class="ajaxTabOption" id="tab2" onclick="getTabData(this.id, <?=$platform?>)"><a onclick="return false;"><span>Afgelopen 6 maanden &amp Affiliates</span></a></li>
        </ul>
    </div>
    <div id="ajaxContent">Kies een van de bovenstaande opties.</div>
</div>

Wanneer er op een tabblad wordt geklikt, wordt er een pagina geladen in de div ajaxContent. Op die pagina wordt het volgende javascript aangeroepen:

code:

<script type='text/javascript'>
    AC_FL_RunContent("codebase","http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab","width","<?=$width?>","height","<?=$height?>","id","<?=$chart_design?>","align","middle","src","<?=$chart_design_dir.$chart_design?>","quality","high","bgcolor","<?=$chart_bgcolor?>","name","<?=$chart_design?>","allowscriptaccess","sameDomain","pluginspage","http://www.macromedia.com/go/getflashplayer","movie","<?=$chart_design_dir.$chart_design?>","flashVars","&dataXML=<?=$chart_data?>&chartWidth=<?=$width?>&chartHeight=<?=$height?>");
</script>

Met uiteraard alle waarden op de juiste plek. Er wordt echter geen grafiek geladen, en het script doet niks.

[ Voor 37% gewijzigd door MueR op 05-03-2007 14:06 ]

[BtM909]

Er wordt echter geen grafiek geladen, en het script doet niks.

Ehm, wat voor foutmeldingen kom je precies tegen; wat gebeurt er als je gaat debuggen, wordt het script uberhaupt aangeroepen. Hoe wordt de pagina geladen in de div, is de functie uberhaupt aanroepbaar?

Je loopt hier al wat langer rond, dus je weet dat er per subforum policies bestaan, Webdesign, Markup & Clientside Scripting Policy even doorlezen en probeer daarna dit topic zo volledig mogelijk aan te vullen, anders gaat dit topic echt dicht. Niet alleen vanwege weinig zelfinzet, maar vooral omdat er met deze minimieme info helemaal niks gedaan kan worden

[MueR]

Het vreemde is dat ik helemaal geen foutmelding krijg. Je zou verwachten dat als het script niet ingeladen kan worden, er een foutmelding komt in de zin van "call to undefined function". Er wordt niet eens een javascript waarschuwing gegeven.
FireBug laat mij het resultaat van de request wel zien, maar het lijkt gewoon alsof het script gewoon niet wil werken wanneer het is aangeroepen dmv Ajax.
Een voorbeeld van de grafiek staat hier, zowel wanneer aangeroepen in AJAX, als direct in de pagina opgenomen.

[BCC]

Doe je dit met scriptaculous? Het is een 'feature' van scriptaculous, dat hij javascript dat ingeladen wordt via AJAX niet execute. Dit kun je wel eenvoudig 'hacken' in de library.

[MueR]

Ik werk met het prototype framework.

[Alex)]

Mm, in je code zie ik:

JavaScript:

function init()
{
 var tabs = document.getElementsByClassName('ajaxTabOption');
 for (var i = 0; i < tabs.length; i++)
 {
 $(tabs[i].id).onclick = function () {
 getTabData(this.id);
 }
 }
}

In die getTabData zit verder geen verwijzing o.i.d. naar een Flash-object wat moet worden geladen...

[MueR]

Klopt. Die functie getTabData haalt vanaf een php file de juiste content op. In die content zit een call naar de desbetreffende javascript functie.

[Alex)]

Hmm, ik zie dat die FL_AC_*-library met document.write werkt, wanneer het document helemaal gerenderd is (en dat is zo na de eerste load) werkt document.write niet meer. Je hebt dan echte DOM-scripting nodig (of .innerHTML)

En om Javascript-code uit te voeren kun je eval() gebruiken, dat kan echter niet in het ingeladen document, wel vanuit de aanroepende JS. Je moet dan alleen de inhoud van je script-tag retourneren, geen volledig document.

[ Voor 33% gewijzigd door Alex) op 05-03-2007 20:41 ]

[Joolee]

Hier zijn geloof ik al meer topics over geweest en dat zul je ook wel vinden in het forum van Prototype (als die er eentje heeft). Het probleem is gewoon dat Javascript op de via Ajax ingelade pagina nietword uitgevoerd. Een oplosing hiervoor is bijv. In de teruggekregen data zoeken naar een <script> tag en alles wat hierin staat door de eval functie heenhalen.

[BCC]

scriptaculous, ik bedoel natuurlijk prototype. Het eenvoudigste is het prototype framework even aanpassen, zodat hij wel eval doet. Je zult zien dat dat heel eenvoudig is. Of eval standaard gedrag moet zijn na een AJAX request is al een discussie over binnen de prototype comunity. Het is nl. wel een veiligheidsrisico.

[ Voor 45% gewijzigd door BCC op 05-03-2007 21:28 ]

[crisp]

De discussie zou moeten zijn of je functionaliteit wel moet mixen met data. Imho is dat gewoon bad practice

[BCC]

crisp schreef op maandag 05 maart 2007 @ 22:43:
De discussie zou moeten zijn of je functionaliteit wel moet mixen met data. Imho is dat gewoon bad practice

Zoals ik al zei: Het is een discussie Je wil volgens mij on the fly nieuwe functionaliteit in kunnen laden. En aangezien prototype daar geen speciale functie voor heeft.

[ Voor 19% gewijzigd door BCC op 05-03-2007 23:16 ]

[crisp]

BCC schreef op maandag 05 maart 2007 @ 23:09:
[...]

Zoals ik al zei: Het is een discussie Je wil volgens mij on the fly nieuwe functionaliteit in kunnen laden. En aangezien prototype daar geen speciale functie voor heeft.

Functionaliteit is een onderdeel van je applicatie. Er is no such thing as 'on-the-fly functionaliteit' - dat zou rare situaties kunnen opleveren, not to mention het probleem van onderhoudbaarheid. Ajax is voor data-overdracht; als je dat gaat mixen met functionaliteit dan is je clientside library gewoon niet compleet of gebruik je een verkeerd data-formaat*.

* Data kan immers bedoelt zijn als content of als aansturing van je applicatie. Er zijn situaties denkbaar waarbij je beide in 1 request wilt ophalen, maar dan zal je daar in je data-formaat ook een scheiding tussen aan moeten brengen.

[ Voor 18% gewijzigd door crisp op 06-03-2007 00:06 ]

[beetle71]

Volgens mij heb je voor het schrijven van een flash block in een dmv. AJAX aangeroepen script geen
AC_FL_RunContent (lees:javascript) stukje nodig. Je kunt dan ook direct de <object>/<embed> schrijven in de geretourneerde HTML-code.
AC_FL_RunContent is enerzijds om het het EOLAS patent te ontlopen (extra click op je swf om te activeren, maar aangezien je met AJAX content toevoegt aan een reeds geladen pagina ontloop je dat patent zowieso al), anderzijds wellicht vanwege de semantische correctheidheid/ en (x)html validiteit van je code. En ook daar heb je eigenlijk geen 'last' meer van als je een block inlaad via AJAX.
Dus je kunt het rustig doen zonder eval.

[xces]

Het eenvoudigste is het prototype framework even aanpassen, zodat hij wel eval doet.

zucht.. even buiten beschouwing gelaten dat het prototype framework al jaren is ontwikkeld en op alle browsers werkt (dan dus waarschijnlijk niet meer) moet je dit niet eens willen.

Daarnaast heeft het niets met heel dat flash gebeuren te maken. Dat werkt gewoon (tenminste in firefox). Er zijn 2 "problemen" waar je mee te maken hebt:

Probleem 1:
Dit is de code die hij in de tab laad:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Voorbeeld</title>

<script src="AC_RunActiveContent.js" type="text/javascript"></script>

<script type="text/javascript">
..knip..
</script>
<hr><b>Statistieken van vandaag en van de meest recente 30 dagen periode</b><br>
</div>

Ten eerste laad hij geen complete HTML in, je mist de HTML tag, en de BODY tag. Vermoedelijk doordat je "responseText" gebruikt. Daarnaast probeert hij, zoals je ziet, nogmaals de js file in te laden, die al ingeladen is, dat is dus overbodig. De content die je inlaad kan over alle JS functies beschikken die al in de parent pagina zitten.

Probleem 2:
Je zit in het verkeerde pad. Zowel met het inladen van de JS als met het inladen van de SWF, verwijs je naar "images/", terwijl in de werkende grafiek je naar "../images/" verwijst. Hier zit je dus een directory te diep waardoor de grafiek, en de javascript file, niet ingeladen worden (404).

Oplossing:
Je zou onderstaande code eens kunnen proberen:

code:

function getTabData(id) {
    new Ajax.Updater(
        'ajaxContent',
        'tabprocess.php',
        {
            onLoading: showLoad,
            onComplete: showResponse
            parameters: {
                tabid: id,
                rand: Math.random(9999)
            },
            evalScripts: true
        });
}

Afgeleid van deze website: http://www.prototypejs.org/api/ajax/updater

[ Voor 4% gewijzigd door xces op 06-03-2007 10:31 ]

[MueR]

Crisp heeft een punt. Ik heb het maar op een andere manier opgelost; ik laad de grafiek in via een iframe. Scheelt ook weer evals, met de mogelijke security issues. In ieder geval bedankt voor het meedenken.