Content aanpassen binnen een layer - Softwareontwikkeling

zondag 7 september 2003 12:40

Acties:

the alien you never expected

Topicstarter

Ik heb wat problemen me thet aanpassen van de html content in een layer.
Momenteel ben ik bezig met het omzetten van een web-site naar xhtml, nu gebruikte de oude web-site ergens in midden in het document een <script> met document.write() xhtml valt hier over (stopt met renderen van de pagina in IE6).

Dus ik bedacht dat ik dan gebruik moet maken van innerhtml om de tekst aan te passen, alleen het lukt me niet! Ik heb de volgende blok waarbij ik div id "currentposts" wil aanpassen:

HTML:

<div id="sideBar">

<h6>Archives</h6>
<ul>
  <li>a href='2003_07_01_archive.html'>07/01/2003 - 07/31/2003</a>
</li> 
<div id="currentposts">
  <li>
     <span style="color: #999999; font-weight: bold">No  Current Posts</span>
  </li>
</div>          
</ul>
</div>

De inhoud van <div id="currentposts"> wil ik aanpassen met de volgende code bovenaan de pagina:

Java:

// core dhtml stuff
var w3c = (document.getElementById) ? 1:0;
var ie = (navigator.appName.indexOf("Microsoft") != -1) ? 1:0;
var ns = (!ie) ? 1:0;
var ie4 = (document.all) ? 1:0;
var ie5 = (navigator.userAgent.indexOf("MSIE 5.0") != -1) ? 1:0;
var ns6 = ((!ie) && (w3c)) ? 1:0;
var ns4 = ((ns) && (!ns6)) ? 1:0;
var mac = (navigator.platform.indexOf("Mac") != -1) ? 1:0;
//div layer stuff
var hide = (ns) ? "hide":"hidden";
var show = (ns) ? "show":"visible";

function writeToDiv(divname,html) {
    aler(divname);
    if (w3c) {
        document.getElementById(divname).innerHTML=html;
    } else if (document.all) {
        document.all(divname).innerHTML=html;
    } else {
        document.layers[divname].document.open();
        document.layers[divname].document.write(html);
        document.layers[divname].document.close();
    }
}

if ( location.href.indexOf("archive") != -1 ) 
{  
    i_html = '<li><strong><a href="http://blog/delphi/index.html">Current Posts</a></strong></li>';
} else {
    i_html = '<li><strong><a href="http://blog/delphi/index.html">Current Posts</a></strong></li>';
    writeToDiv( 'currentposts', i_html );
}

Ik kan de echte pagina niet laten zien, omdat ik van de eigenaar niet mag laten circuleren, daarom zal ik zometeen die pagina strippen die wel mag worden circuleert.

[ Voor 13% gewijzigd door alienfruit op 07-09-2003 12:42 ]

zondag 7 september 2003 12:57

Acties:

crisp

Devver

Pixelated

regel 15 staat al een typo

verder snap ik niet dat als je naar xhtml gaat, je nog steeds IE4 en NS4 ondersteuning in je JS wilt inbakken; die browsers zullen ws je pagina niet eens kunnen renderen...

Intentionally left blank

zondag 7 september 2003 13:07

Acties:

André

Analytics dude

En waarom zou een script niet midden op de pagina mogen? Gebruik je wel <script type="text/javascript"> en geen language???

zondag 7 september 2003 14:06

Acties:

alienfruit

the alien you never expected

Topicstarter

En waarom zou een script niet midden op de pagina mogen? Gebruik je wel <script type="text/javascript"> en geen language???

Uhm Ik gebruikte ze allebei. Ik heb het nu aangepast naar alleen de type-attribuut.

verder snap ik niet dat als je naar xhtml gaat, je nog steeds IE4 en NS4 ondersteuning in je JS wilt inbakken; die browsers zullen ws je pagina niet eens kunnen renderen...

Typo fixed

Afgezien van dat ik heb gewoon code cut&paste die ik al had en daar zat die ns4/ie4 controle in, verder krijg ik nu de hele de foutmelding:

Er is een fout opgetreden in het script op deze pagina.

Regel: 23
Teken: 3
Fout: 'document.getElementById(...)' is leeg of geen object
Code: 0
URL: file://C:\_ts3tmp.html

zondag 7 september 2003 14:20

Acties:

crisp

Devver

Pixelated

Dat lijkt me logisch, aangezien de code al uitgevoerd wordt voordat het document zelf geparsed is; je element bestaat dan idd nog niet.

[ Voor 3% gewijzigd door crisp op 07-09-2003 14:20 ]

Intentionally left blank

zondag 7 september 2003 15:13

Acties:

alienfruit

the alien you never expected

Topicstarter

Als ik het nu wrap in een functie en die toevoeg aan de onLoad-event van <body> krijg ik nu een runtime fout. Op de regel waar gij getElementById wilt gebruiken, onLoad wordt toch pas geladen als hij helemaal klaar is met alles laden

[ Voor 40% gewijzigd door alienfruit op 07-09-2003 15:14 ]

zondag 7 september 2003 15:21

Acties:

crisp

Devver

Pixelated

alienfruit schreef op 07 September 2003 @ 15:13:
Als ik het nu wrap in een functie en die toevoeg aan de onLoad-event van krijg ik nu een runtime fout. Op de regel waar gij getElementById wilt gebruiken, onLoad wordt toch pas geladen als hij helemaal klaar is met alles laden

ja, er moet dus nog iets anders fout zijn, maar zonder volledig voorbeeld is dat moeilijk te bepalen. Debuggen dus...

Intentionally left blank

maandag 8 september 2003 15:10

Acties:

Verwijderd

alienfruit schreef op 07 September 2003 @ 15:13:
Als ik het nu wrap in een functie en die toevoeg aan de onLoad-event van <body> krijg ik nu een runtime fout. Op de regel waar gij getElementById wilt gebruiken, onLoad wordt toch pas geladen als hij helemaal klaar is met alles laden

Hmm raar, Ik heb hetzelfde gedaan met je code en in een nieuw html document met alleen een layer met een id "currentposts" geplakt, en bij mij deed het wel wat het zou moeten doen(ie6.0). Is de pagina erg groot? Je hebt mischien toch kans dat nog niet alles is geladen wanneer je de layer benaderd > Misschien toch even wat experimenteren met setTimeout? Ik ben niet echt een DHTML/JavaScript guru, maar misschien heb je er toch wat aan.

Dit is wat ik had gedaan om te testen:

Java:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Testing 123</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
// core dhtml stuff 
var w3c = (document.getElementById) ? 1:0; 
var ie = (navigator.appName.indexOf("Microsoft") != -1) ? 1:0; 
var ns = (!ie) ? 1:0; 
var ie4 = (document.all) ? 1:0; 
var ie5 = (navigator.userAgent.indexOf("MSIE 5.0") != -1) ? 1:0; 
var ns6 = ((!ie) && (w3c)) ? 1:0; 
var ns4 = ((ns) && (!ns6)) ? 1:0; 
var mac = (navigator.platform.indexOf("Mac") != -1) ? 1:0; 
//div layer stuff 
var hide = (ns) ? "hide":"hidden"; 
var show = (ns) ? "show":"visible"; 

function test(){
    if ( location.href.indexOf("archive") != -1 ){   
        i_html = '<li><strong><a href="http://blog/delphi/index.html">Current Posts</a></strong></li>'; 
    } else { 
        i_html = '<li><strong><a href="http://blog/delphi/index.html">Current Posts</a></strong></li>'; 
        writeToDiv( 'currentposts', i_html ); 
    }
}

function writeToDiv(divname,html) { 
    alert(divname); 
    if (w3c) { 
        document.getElementById(divname).innerHTML=html; 
    } else if (document.all) { 
        document.all(divname).innerHTML=html; 
    } else { 
        document.layers[divname].document.open(); 
        document.layers[divname].document.write(html); 
        document.layers[divname].document.close(); 
    } 
} 

</script>
</head>
<body onload="test()">
<div id="currentposts">Testcontent</div>
</html>

maandag 8 september 2003 20:34

Acties:

alienfruit

the alien you never expected

Topicstarter

Ik heb het nog eens bekeken vandaag en het komt waarschijnlijk door:

HTML:

<div id="sideBar">

<h6>Archives</h6>
<ul>
  <li>a href='2003_07_01_archive.html'>07/01/2003 - 07/31/2003</a>
</li> 
<div id="currentposts">
  <li>
     <span style="color: #999999; font-weight: bold">No  Current Posts</span>
  </li>
</div>            
</ul>
</div>

Mogelijk omdat ik een <div>-begin binnen een unordered list? Waarschijnlijk mag dat niet in XHTML niet ofzo, en valt IE hier over.

maandag 8 september 2003 20:37

Acties:

crisp

Devver

Pixelated

waarom geef je die <li> dan niet het id?

Intentionally left blank

dinsdag 9 september 2003 13:50

Acties:

Verwijderd

crisp schreef op 08 September 2003 @ 20:37:
waarom geef je die <li> dan niet het id?

Misschien omdat ie dan nog steeds zo'n runtime error geeft

Wanneer je die <ul> het id geeft en dan beide(ipv alleen die laatste) <li>'s in die i_html var plaatst werkt het wel.

dinsdag 9 september 2003 14:00

Acties:

crisp

Devver

Pixelated

innerHTML is dan ook een vieze oplossing eigenlijk; echter is het minder eenvoudig om het met de echte DOM methoden (removeChild, appendChild) te doen. Toch denk ik dat de li een id geven wel zou moeten werken:

HTML:

<div id="sideBar">

<h6>Archives</h6>
<ul>
  <li><a href='2003_07_01_archive.html'>07/01/2003 - 07/31/2003</a></li>
  <li id="currentposts"><span style="color: #999999; font-weight: bold">No  Current Posts</span></li>
</ul>

</div>

JavaScript:

1	document.getElementById('currentposts').innerHTML = '<strong><a href="http://blog/delphi/index.html">Current Posts</a></strong>';

Intentionally left blank

woensdag 10 september 2003 10:57

Acties:

Verwijderd

crisp schreef op 09 September 2003 @ 14:00:
Toch denk ik dat de li een id geven wel zou moeten werken:

Doet het ook... mijn fout

Ik probeerde een <li> in de innerhtml van een <li> te zetten(net zoals de topicstarter trouwens) blijkbaar geeft ie dan een zo'n runtime fout... <li> tags eruit en hij werkt. Woohoo!

woensdag 10 september 2003 20:03

Acties:

alienfruit

the alien you never expected

Topicstarter

Ik ga het uitproberen! Will be back