CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

kartinm Nybegynder

17. august 2009 - 04:55 Der er 6 kommentarer

Ajax.Updater opdaterer ikke DOM

Jeg bixer lidt med prototype.js frameworket, og bruger deres Ajax.Updater. Det jeg prøver at lave, er en side der indeholder et div (#indhold), og så har jeg nogle links. Når der trykkes på linkene, så bruger jeg Ajax.Updater til at læse fra en PHP fil, og henter indholdet ind i #indhold div´et. Det fungerer fint, MEN jeg har problemer med følgende:

Når siden loader første gang, så bruger jeg PHP til at hente(include) filen test.php ind i #indhold. I filen er der et input-felt, som hedder "navn". Value er sat til "Hej!".

Hvis jeg kører et dette js-script:
alert($('navn').value);
så kan jeg se at værdien er "Hej!".

Her kommer problemet:
Hvis jeg nu bruger Ajax.Updater til at hente inholdet fra filen test2.php ind i #indhold, så burde indholdet i DOM´en være et input-felt, som også hedder "navn", men med value = "Farvel!". Jeg kan se det, og jeg kan se at værdien er "Farvel" - men hvis jeg kører scriptet:
alert($('navn').value);
igen, så er værdien stadig "Hej!" !!!!
Så hvis jeg tilgår værdien i input-feltet "navn" via js, så er værdien ikke ændret! Men jeg kan - som sagt - se at værdien er "Farvel!".

Nogle forslag?

Synes godt om

clausjul Nybegynder

17. august 2009 - 09:04 #1

Har du i input feltet husket id="navn"?

<input type="text" name="navn" id="navn">

Bare et forslag fra hovedet, da jeg ikke har set din kode ;-)

Synes godt om

kartinm Nybegynder

17. august 2009 - 15:21 #2

Her er en forkortet og forsimplet version af mine koder:

index.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="media/script/scriptaculous/prototype.js"></script>
<script type="text/javascript" src="media/script/scriptaculous/scriptaculous.js"></script>
<script type="text/javascript">

function skift_indhold(){
var url ='test2.php';
var pars = '';
var myAjax = new Ajax.Updater( 'indhold', url, { method: 'post', parameters: pars });

}

function do_test_callback(){
alert($('navn').value);
}

</script>
</head>

<body>
<a href="java script:skift_indhold();">Skift indhold</a>
<div id="indhold">
<?php include 'test.php'; ?>
</div>
<a href="java script:do_test_callback();">Test værdi</a>
</body>
</html>

test.php:
<input type="text" name="navn" id="navn" value="Hey!" />

test2.php:
<input type="text" name="navn" id="navn" value="Farvel!" />

Synes godt om

olebole Juniormester

18. august 2009 - 01:03 #3

<ole>

1) de anvendte scripts er ikke kompatible med XHTML

2) opdateres med innerHTML, kan man ikke stole på noget somhelst - og det gør de viste scripts

3) hvad XHTML angår, så er det en død standard. Fremtiden tilhører HTML:
http://dengodekode.dk/xhtml/

/mvh
</bole>

Synes godt om

olebole Juniormester

18. august 2009 - 01:11 #4

Eksempel på innerHTML's tåbelige virkemåde:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function bar() {
alert(oDiv.parentNode.innerHTML);
oDiv.parentNode.innerHTML += "<div>En anden tekst</div>";
alert(oDiv.innerHTML);
alert(oDiv.parentNode.innerHTML);
}

var oDiv = null;
window.onload = function() {
oDiv = document.getElementById("foo");
}
</script>
</head>
<body>

<p><button onclick="bar()">TEST</button></p>

<div>
<div id="foo">En tekst</div>
</div>

</body>
</html>

Synes godt om

olebole Juniormester

18. august 2009 - 01:16 #5

Prøv også gerne denne kode - men prøv den både i IE og FF (hvoraf den sidste gør det logiske - eller det, der ligger tættest på det forventelige):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function bar() {
oDiv.innerHTML += "<div>En anden tekst</div>";
}

var oDiv = null;
window.onload = function() {
oDiv = document.getElementById("foo");
}
</script>
</head>
<body>

<p><button onclick="bar()">TEST</button></p>

<div id="foo"><input type="text" value="Skriv noget her og tryk på knappen ..." style="width:400px"></div>

</body>
</html>

Synes godt om

olebole Juniormester

18. august 2009 - 01:22 #6

- og så må du endelig aldrig blande innerHTML og DOM sammen. Property'en innerHTML stammer fra version 4 browserne, som ligger før, der var en standardiseret DOM - og innerHTML har aldrig været del af nogen standard. Endvidere afspejler innerHTML netop ikke DOM'ens aktuelle status

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS