[AJAX]DIV content reload > javascript wordt niet herladen

maandag 15 februari 2010 22:49

Acties:

0 Henk 'm!

Topicstarter

Laat ik beginnen met het feit dat ik totaal geen technische javascript kennis heb dus bij voorbaat excuses als ik de plank helemaal mis sla.

Ik ben bezig met een website waarbij ik de content van 1 div wil wijzigen ipv een volledige page refresh. Ik ben dus op zoek gegaan en ben deze tut tegen gekomen.

(comments eruit gehaald)

JavaScript:

function loadurl(dest) { 
 
try { 
        xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP"); 
} catch (e) { 
} 
 
xmlhttp.onreadystatechange = triggered; 
 
xmlhttp.open("GET", dest); 
 
xmlhttp.send(null); 
} 
 
function triggered() { 

if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) { 
        document.getElementById("output").innerHTML = xmlhttp.responseText; 
} 
}

HTML:

1	<body> <div id="output" onclick="loadurl('/resume/resume.txt')">click here to load my resume into this div</div> </body>

Nu zit ik met het probleem dat als de nieuwe div inhoud geladen is deze niet meer "clickable" is... oftewel, de nieuwe content die geladen wordt wil ik laten linken naar andere content.

test opzetje met de exacte javascript zoals hierboven;

orginele pagina

HTML:

1	<div id="output" onclick="loadurl('output1.html')">click here to load my resume into this div</div>

nieuw te laden content / output1.html

HTML:

1	<div id="output" onclick="loadurl('output2.html')">blaaaaat</div>

enz...
Na het laden van output1.html gebeurd er dus niets meer... Is hier een oplossing voor? Het lijkt erop dat het script op de één of andere manier "gereset" moet worden ofzo....

Hoop dat iemand me verder kan helpen...

maandag 15 februari 2010 22:57

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Javascript

JavaScript:

1	document.getElementById("output").innerHTML

Je vult de inhoud van je 'output'-div; je krijgt dus deze structuur:

HTML:

1
2
3

<div id="output" onclick="loadurl('output1.html')">
    <div id="output" onclick="loadurl('output2.html')">blaaaaat</div>
</div>

Wat er nu gebeurt is dat een click hierbinnen uiteindelijk allebei de onclicks triggered. Ook het feit dat je variabele 'xmlhttp' global is werkt niet echt mee.

Nog een advies: ga je navigatie pas 'ajaxifiën' vanuit een opzet die werkt zonder javascript.

Intentionally left blank

maandag 15 februari 2010 23:20

Acties:

0 Henk 'm!

digital-IMEI

Topicstarter

crisp schreef op maandag 15 februari 2010 @ 22:57:
JavaScript:
1
document.getElementById("output").innerHTML
Je vult de inhoud van je 'output'-div; je krijgt dus deze structuur:
HTML:
1
2
3
<div id="output" onclick="loadurl('output1.html')">
    <div id="output" onclick="loadurl('output2.html')">blaaaaat</div>
</div>
Wat er nu gebeurt is dat een click hierbinnen uiteindelijk allebei de onclicks triggered.

Duidelijk! Thx!!! Totaal overheen gekeken

Nog een advies: ga je navigatie pas 'ajaxifiën' vanuit een opzet die werkt zonder javascript.

Geen idee hoe dat moet maar ik zal het in ieder geval onthouden

maandag 15 februari 2010 23:26

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Javascript

Sjengcity schreef op maandag 15 februari 2010 @ 23:20:
[...]

Geen idee hoe dat moet maar ik zal het in ieder geval onthouden

Je weet niet hoe je in HTML naar andere content kan verwijzen?

Intentionally left blank

dinsdag 16 februari 2010 00:38

Acties:

0 Henk 'm!

pieturp

gaffa!

Progressive enhancement: Eerst de basics implementeren, zodat zelfs de meest debiele oude browser je site goed kan behappen, en dan je enhancements (zoals het asynchroon updaten van delen van je pagina) voor de nieuwste generatie browsers, laag voor laag, implementeren.
Voordeel is dat je, met die methodiek, ook vaak automatisch dingen als accesability en SEO, min of meer automatisch meeneemt.

... en etcetera en zo

dinsdag 16 februari 2010 09:54

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Javascript

En dan kom je er vervolgens waarschijnlijk achter dat dat 'ajaxifien', zoals crisp dat zo mooi noemt, eigenlijk niet zoveel toevoegt

Dan kun je ook makkelijker kijken waar en hoe je het toepast, op een manier waarop het wel iets toevoegt, ipv alleen maar omdat het kan.

[ Voor 43% gewijzigd door Bosmonster op 16-02-2010 09:55 . Reden: ok, iets verfijnd :+ ]

Onderwerpen