[JS / AJAX] Achteraf functies toevoegen*

[Verwijderd]

Ik heb een pagina gemaakt waarbij, afhankelijk van waar er gelikt wordt op de pagina, verschillende formulieren geladen worden in een <DIV>

Dit laden gebeurt met AJAX. Ik post het een id van gedeelte waar ik op klik, bijvoorbeeld een andere div die ik wil wijzigen en vervolgens krijg ik een ingevuld formulier terug, om de inhoud van de div te wijzigen.

Nu stuur ik met het formulier ook javascript mee om het wijzigen makkelijk te maken(toevoegen van plaatjes, links en verschillende controles). Alleen het javascript wat meegestuurd word niet uitgevoerd of herkend. Dat wil zeggen: functies kunnen niet aangeroepen worden buiten het <script> tag waar het in staat. Als ik de meegestuurde javascript-code evalueer met eval(code) dan werkt het wel, maar dan kunnen overige objecten geen gebruik maken van het script.

Dus mijn vraag is dan:
Hoe kan ik achteraf (dus als de pagina al klaar is met laden) javascript functies toevoegen aan mijn html pagina en deze functies ook gebruiken?

Ik wil het gebruik van iframes voorkomen omdat ik dit geen nette oplossing vind.

[NMe]

Je wil Javascript importeren in een andere pagina die gebruik maakt van Javascript. 2x clientside is nog steeds clientside, dus hoort dit topic in Webdesign & Graphics.

PW>>WG

[Verwijderd]

Ik heb het niet uitgeprobeerd en weet niet of browsers dit ondersteunen, maar je zou zoiets kunnen proberen:

JavaScript:

var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', 'eenbestand.js');
document.getElementById('scriptcontainer').appendChild(js);

Even gecontroleerd, en het werkt (IE6SP2 en FF1.5RC). De gegenereerde <script> kan echter niet direct aan document "gehangen" worden, dus moet je een <div> ofzo met id="scriptcontainer" maken. Ook kun je functies uit de JS die je er net hebt aangehangen niet direct aanroepen, dus het volgende werkt niet:

JavaScript:

document.onclick = functieInAangehangenScript();

maar dit wel:

JavaScript:

document.onclick = function() { functieInAangehangenScript(); }

Kortom, het is niet de meest ideale oplossing Ook omdat je script hiervoor in een apart bestand moet staan (hoewel dat natuurlijk op t evangen is met een script dat de jusite code genereert op basis van $_GET['id'] ofzo)

[ Voor 68% gewijzigd door Verwijderd op 08-11-2005 12:05 ]

[crisp]

JavaScript:

function makefunction()
{
  window['blaatest'] = function() { alert('bla'); }
}
makefunction();
blaatest();

[crisp]

Verwijderd schreef op dinsdag 08 november 2005 @ 11:56:
Ik heb het niet uitgeprobeerd en weet niet of browsers dit ondersteunen, maar je zou zoiets kunnen proberen:

JavaScript:

var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', 'eenbestand.js');
document.getElementById('scriptcontainer').appendChild(js);

Even gecontroleerd, en het werkt (IE6SP2 en FF1.5RC). De gegenereerde <script> kan echter niet direct aan document "gehangen" worden, dus moet je een <div> ofzo met id="scriptcontainer" maken.

Als je het goed wilt doen dan hang je 'm in je head-sectie:

JavaScript:

document.getElementsByTagName('head')[0].appendChild(js);

Ook kun je functies uit de JS die je er net hebt aangehangen niet direct aanroepen, dus het volgende werkt niet:

JavaScript:

document.onclick = functieInAangehangenScript();

maar dit wel:

JavaScript:

document.onclick = function() { functieInAangehangenScript(); }

Kortom, het is niet de meest ideale oplossing Ook omdat je script hiervoor in een apart bestand moet staan (hoewel dat natuurlijk op t evangen is met een script dat de jusite code genereert op basis van $_GET['id'] ofzo)

als je de juiste syntax gebruikt werkt het prima hoor:

JavaScript:

document.onclick = functieInAangehangenScript;

Maar JS staat je dus ook toe om vanuit een string een functie aan te maken. Feit blijft dat je wel je JS seperaat moet ophalen of in elk geval los uit je AJAX-response moet kunnen halen.

[Verwijderd]

crisp schreef op dinsdag 08 november 2005 @ 12:19:

[...]

Als je het goed wilt doen dan hang je 'm in je head-sectie:

JavaScript:

document.getElementsByTagName('head')[0].appendChild(js);

[...]

als je de juiste syntax gebruikt werkt het prima hoor:

JavaScript:

document.onclick = functieInAangehangenScript;

Maar JS staat je dus ook toe om vanuit een string een functie aan te maken. Feit blijft dat je wel je JS seperaat moet ophalen of in elk geval los uit je AJAX-response moet kunnen halen.

Ik haal het javascript direct uit mijn ajax response. Vervolgens haal ik met javascript de <script> tags uit de ajax response en voer deze in de appendchild functie

als ik er een textnode van maak appendChild(document.createTextNode(stringMetScript))
dan kan hij de functie niet vinden.

Hier is mijn code:
ajax response van server:

HTML:

<script language="JavaScript">
function showalert()
{
window.alert('dit is een alert');
}
</script>
<DIV ID="popupcontent">test
<form id="test">
<textarea id="tarea" onclick="showalert()">hierzo klikken</textarea>
</form>
 </DIV>

Hier is mijn javascript om het javascript uit de ajax-response te strippen, uit te voeren en beschikbaar te maken voor de rest van de pagina.

JavaScript:

//response ajax get
result = http_request.responseText;
//with script tags
js_string = result.substring(result.indexOf('<script'),result.indexOf('</script>')+9);
//no script tags
js_string2 = js_string.substring(js_string.indexOf('>')+1,js_string.indexOf('</script>'));
//fill div with loaded content
document.getElementById('myspan').innerHTML = result.substring(0,result.indexOf('<script')) + result.substring(result.indexOf('</script>')+9,result.length);

//execute and add  loaded javascript
eval(js_string2);
document.getElementsByTagName('head')[0].appendChild(document.createTextNode(js_string2));

btw: document.getElementsByTagName('head')[0].appendChild(js_string2) werkt niet direct.

Firefox debug zegt vervolgens dat showalert niet gevonden kan worden. Wat doe ik fout?

[crisp]

JS content (dus geen externe JS file) via appendChild toevoegen zal niet geevalueerd worden, dus dat is sowieso geen oplossing.

[Verwijderd]

Zou dit dan wel moeten werken?

ik krijg het nu ook niet aan de praat.

JavaScript:

scriptVar='<SCRIPT language="JavaScript" SRC="external.js"></SCRIPT>';
document.getElementsByTagName('head')[0].appendChild(document.createTextNode(scriptVar));

showalert(); //functie alleen aanwezig in external.js

[Verwijderd]

Het lukte mij niet om een functie in het externe script uit te voeren meteen na appendChild. Wat je wel zou kunnen doen is:

JavaScript:

var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', 'external.js');
js.setAttribute('onload', 'showalert()'); //deze functie wordt als het script geladen is uitgevoerd
document.getElementsByTagName('head')[0].appendChild(js)

[Verwijderd]

Verwijderd schreef op dinsdag 08 november 2005 @ 14:15:
Het lukte mij niet om een functie in het externe script uit te voeren meteen na appendChild. Wat je wel zou kunnen doen is:

JavaScript:

var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', 'external.js');
js.setAttribute('onload', 'showalert()'); //comment
document.getElementsByTagName('head')[0].appendChild(js)

Yep, Bedankt!! Dat was de exacte code die ik nodig had. ik moet nu wel 2x een Request doen( AJAX en external.js) maar het werkt! Ik kan nu Javascript on demand laden!

[killercow]

Is er ook zo'n trucje om een variabele functie naam in de addEventListener functie gooien?

Ik doe ongeveer het zelfe, alleen zijn mijn functies al wel bij de client bekend, en wil ik via

JavaScript:

function addevent(obj,functienaam){
 obj.addEventListener('click','knopfunctie_'+functie,false);
}

een functie aan een knoje hangen, any ideas?

[crisp]

Aangezien functies gewoon properties zijn van het window-object kan je gewoon dit doen:

JavaScript:

obj.addEventListener('click', window[functienaam_als_string], false);

[killercow]

crisp, dank je. dat werkt inderdaad geweldig (al heb ik heb onder IE nog niet getest)

muchos gracias.