Javascript probleem: getElementById werkt niet - Softwareontwikkeling

maandag 21 april 2008 13:08

Acties:

Topicstarter

Beste,

ik laad door middel van javascript een quicktime-filmpje (createElement('embed') etc.). Dit plaats ik dan in een div die een bepaald id gekregen heeft. Wanneer ik die pagina test, dan werkt het perfect.

Het probleem is dat de pagina ingeladen wordt in een div (content genaamd) door middel van Ajax (http.object). Hierdoor wil mijn filmpje niet meer in de pagina geplaatst worden, omdat 'document.getElementById' niet meer gevonden wordt. Wanneer je inderdaad in de broncode kijkt in je browser, dan is enkel de html van de index-pagina zichtbaar, en is de content-div leeg. Maar in de browser zelf is de tekst wel degelijk zichtbaar, enkel niet het filmpje die dynamisch zou moeten inladen.

Iemand die dit nog heeft meegemaakt, en liefst een oplossing weet?

Hier volgt de code van de main-pagina:

code:

<script type="text/javascript" src="http.js"></script>
<script type="text/javascript">
function navigate(pagina, place)
{
    url = pagina;
    
    function onComplete(response) {
        document.getElementById(place).innerHTML = response.responseText;
    }

    http.get(url, onComplete);
}
</script>
</head>

<body onload="javascript: navigate('content.html','content');">
<div id="content"></div>

En dit is de code van de in te laden pagina:

code:

<script language="javascript">
function showvideo()
{
    embed = document.createElement("embed");
    embed.setAttribute('width',250);
    embed.setAttribute('height',250);
    embed.setAttribute('src','parijsroubaix.mp4');
    document.getElementById("video").appendChild(embed);
}
</script>
</head>

<body>
<div id="video"></div>
<div class="picclip">video: <a href="javascript: showvideo();">1</a></div>
Dummy tekst komt hier.

maandag 21 april 2008 13:11

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Hier of hier al eens gekeken?

Ik heb de topics niet stuk-voor-stuk bekeken, maar er lijken me op 't eerste oog voldoende zinnige resultaten tussen te zitten, waaronder:

[AJAX] Het terugkrijgen van HTML met javascript
AJAX oproepen vanuit AJAX?
[js] functie gebruiken uit ajax request
[JS / AJAX] Achteraf functies toevoegen*
javascript werkt niet in een met AJAX geladen page?
\[JS/AJAX] ajax response als returnwaarde aangeroepen functie
enz...
enz...

[ Voor 72% gewijzigd door RobIII op 21-04-2008 13:14 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

maandag 21 april 2008 14:10

Acties:

F e r o x

Topicstarter

Zat inderdaad interessante info tussen. Heb nu volgende code in mijn header staan van de pagina die moet ingeladen worden:

code:

<script language="javascript">
function showvideo()
{
    document.getElementById('video').innerHTML = '<script type="text/javascript">alert(\'test!\');<\/script>';

    var re = /<script(\s[^>]*)?>([\s\S]*?)<\/script>/gi, match;
    while ((match = re.exec(document.getElementById('video').innerHTML))) eval(match[2]);
}
</script>

Maar er is nog niets veranderd. De code werkt wanneer de pagina zelf geopend wordt, maar niet wanneer ze ingeladen is in de main-pagina.

maandag 21 april 2008 14:21

Acties:

tonyisgaaf

Je plaatst in het onload attribuut een "javascript: " inhoud. Drie keer raden wat een browser verwacht in een on*whatever*.
Waarom wil je in vredesnaam inline javascript in een element injecteren? Je hebt toch al een mooie externe scriptfile waar je je functies in kwijt kan? Ik zie de logica niet.

NL Weerradar widget Euro Stocks widget Brandstofprijzen widget voor 's Dashboard

maandag 21 april 2008 15:36

Acties:

F e r o x

Topicstarter

1) Is inderdaad overbodig, maar maakt toch geen verschil in werking?

2) Dit is gewoon voor de duidelijkheid hier in de posts. In de uiteindelijke versie komt die functie natuurlijk in het extern .js-file te staan.

maandag 21 april 2008 15:42

Acties:

RutgerB

De externe ingeladen javascript wordt niet uitgevoerd. Dit zou jeventueel zelf kunnen doen met eval(), maar dit is niet aan te raden.
Tony heeft gelijk, je kunt het beste al je javascript in een externe js file houden.

Heb je ergens een demo staan?

maandag 21 april 2008 16:04

Acties:

F e r o x

Topicstarter

Zal eentje vandaag nog online plaatsen. Maar heb trouwens de functie als eens in het extern bestand gestoken, en dit maakt geen enkel verschil. Dan wordt zo ook niet aangeroepen.

maandag 21 april 2008 17:09

Acties:

RutgerB

misschien dat je de anchor tag weg kunt halen en gewoon een onclick op de div zelf kunt zetten?

<div onclick="showVideo();">Laat video zien</div>

Ik weet niet waarom maar soms werkt een anchor met als href javascript niet helemaal top. Op deze manier krijg je trouwens ook geen rare javascript url's in de statusbar.

maandag 21 april 2008 17:20

Acties:

F e r o x

Topicstarter

RutgerB schreef op maandag 21 april 2008 @ 17:09:
misschien dat je de anchor tag weg kunt halen en gewoon een onclick op de div zelf kunt zetten?

<div onclick="showVideo();">Laat video zien</div>

Ik weet niet waarom maar soms werkt een anchor met als href javascript niet helemaal top. Op deze manier krijg je trouwens ook geen rare javascript url's in de statusbar.

Had ik al eens geprobeerd, maar maakte geen verschil.

Hier staat trouwens een testje online:
http://home.scarlet.be/verschuere/main.html ==> hoodpagina waar http://home.scarlet.be/verschuere/content.html wordt ingeladen (en waar de functie dus wel degelijk werkt).

maandag 21 april 2008 17:35

Acties:

RutgerB

Zoals

F e r o x schreef op maandag 21 april 2008 @ 17:20:
[...]

Had ik al eens geprobeerd, maar maakte geen verschil.

Hier staat trouwens een testje online:
http://home.scarlet.be/verschuere/main.html ==> hoodpagina waar http://home.scarlet.be/verschuere/content.html wordt ingeladen (en waar de functie dus wel degelijk werkt).

Zoals eerder al gezegd moet je niet via ajax extra javascript gaan inladen, en als je het toch wilt doen gaat dit niet werken, je moet dan zelf alle javascript gaan parsen en uitvoeren met eval();

Oplossing is heel simpel, haal alle javascript weg uit content.html en zet het in main.html.

maandag 21 april 2008 18:27

Acties:

F e r o x

Topicstarter

Was het inderdaad veel te omslachtig aan het bekijken. bedankt voor de info!