Toon posts:

[JS] functie aan roepen via document.write-output

Pagina: 1
Acties:

Verwijderd

Topicstarter
de pagina wordt opgebouwd middels de functie "projectenPlaatsen". hiermee worden ook links geplaatst die de functie "openProject" aanroepen. Dit laatste werkt echter niet (in firefox niet. in safari wel)

de error-output is "openProject is not defined"

de code ziet er als volgt uit
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<script language="JavaScript" type="text/javascript">

function openProject(p, l){
    loc = 'r' + l + '_det';
    txt = 'r' + l + '_txt';
    
        if (typeof(curOpen) != "undefined" && curOpen !== loc) 
              document.getElementById(curOpen).style.display = 'none'; 
        
    curOpen = loc ;
        
    document.getElementById(loc).style.display = 'block'; 
    document.getElementById(txt).src = 'werk/' + p + '.htm'; 
}




function projectenPlaatsen() {

var proj = new Array();
var t = 0;

proj[t] = "06_ik"
    t = t + 1;
proj[t] = "06_stropdas"     
    t = t + 1;
proj[t] = "06_liefde"
    t = t + 1;
proj[t] = "vier"
    t = t + 1;
proj[t] = "vijf"
    t = t + 1;
proj[t] = "zes"
    t = t + 1;
proj[t] = "zeven"
    t = t + 1;
proj[t] = "acht"
    t = t + 1;
proj[t] = "negen"
    t = t + 1;
proj[t] = "tien"
    t = t + 1;



var rijNr = 1;
pervijf = 0;

for (i=0;i<proj.length;i++)
{
    pervijf = pervijf + 1;

    if (pervijf == 1) document.write('<div id="r'+rijNr+'"><table><tr>');
    
    document.write('<td><a href="#" onclick="javascript:openProject(\''+proj[i]+'\', \'r'+rijNr+'\'); this.blur(); return false;">'+proj[i]+'</a></td>');
    
    
    
    if (pervijf == 5) {
        document.write('</tr></table></div>         <div id="r'+rijNr+'_det" style="display:none;"><iframe name="r'+rijNr+'_txt" id="r'+rijNr+'_txt" src="werk/leeg.htm"></iframe></div>');
        rijNr = rijNr + 1;
        pervijf = 0;
    }
}


}

</script>
</head>

<body onload="javascript:projectenPlaatsen()">


de output lijkt een goede html-code op te leveren , die een functie aanroept die niet lijkt te bestaan , terwijl deze luid en duidelijk in de <script>-tag staat ...

iemand een idee ?

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 11:11

crisp

Devver

Pixelated

document.write overschrijft je hele huidige document; je kan beter gebruik maken van innerHTML of nog beter: DOM methoden gebruiken om dynamisch HTML-elementen aan te maken.

Ik zeg altijd: document.write is een poor men's oplossing bij gebrek aan serverside scripting-mogelijkheden ;)

[ Voor 25% gewijzigd door crisp op 04-07-2006 22:31 ]

Intentionally left blank


  • XWB
  • Registratie: Januari 2002
  • Niet online

XWB

Devver
Omdat het buiten toch zo koud is help ik je even opweg:

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
function projectenPlaatsen() 
{
    var proj = new Array();
    var t = 0;
    var rijNr = 1;
    var pervijf = 0;    

    proj[t++] = "06_ik";
    proj[t++] = "06_stropdas";        
    proj[t++] = "06_liefde";
    proj[t++] = "vier";
    proj[t++] = "vijf";
    proj[t++] = "zes";
    proj[t++] = "zeven";
    proj[t++] = "acht";
    proj[t++] = "negen";
    proj[t++] = "tien";
    
    var div = document.createElement('div');
    div.id = 'r' + rijNr;
    var table = document.createElement('table');
    var row = table.insertRow(table.rows.length);   
    
    for (var i = 0; i < proj.length; i++)
    {
        if (pervijf == 5) 
        {
            row = table.insertRow(table.rows.length);
            rijNr++;
        } 

        var cell = row.insertCell(i % 5);
        var alink = document.createElement('a');
        alink.href = 'javascript:void(0);';
        alink.onclick = function()
        {
            openProject(proj[i]+', r' + rijNr);
        }
        alink.appendChild(document.createTextNode(proj[i]));
        cell.appendChild(alink);
        
        pervijf++;
    }
    
    div.appendChild(table);
    document.body.appendChild(div);
    
    if (pervijf == 5) 
    {
        //document.write('<div id="r'+rijNr+'_det" style="display:none;"><iframe name="r'+rijNr+'_txt" id="r'+rijNr+'_txt" src="werk/leeg.htm"></iframe></div>');
        //weer hetzelfde nu, div en iframe aanmaken en appenden aan de body
    }
}


Even een woordje uitleg: zaken als t = t + 1 kan je ook gewoon als t++ schrijven. Het aanmaken van de div & table kan gewoon buiten de lus omdat dit eenmalig is. Na het aanmaken van de table gaan we een row met cellen appenden. Wanneer pervijf de waarde 5 heeft overschrijven we de variabele row met een nieuwe row waar we weer cellen aanhangen. De hele tabel appenden we dan aan de div en de div gaan we dan aan de body van het documment appenden. Ook dit is eenmalig, dus buiten de lus.

Verder, er gaat nog heel wat fout in openProject(), maar de functie wordt nu iig aangeroepen bij het klikken op een link :) Ik neem aan dat je nu wel verder kan, zoniet horen we dat wel ;)

[ Voor 242% gewijzigd door XWB op 05-07-2006 00:31 ]

March of the Eagles


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 11:11

crisp

Devver

Pixelated

JavaScript:
1
alink.href = 'javascript:void(0);';
Als ik dat soort dingen zie (ueberhaupt het javascript: pseudoprotocol) dan zeg ik altijd: als iets geen link is, gebruik dan geen anchor ;)

Intentionally left blank


  • Tofu
  • Registratie: Maart 2003
  • Laatst online: 05-10-2024
crisp schreef op woensdag 05 juli 2006 @ 01:02:
[...]

Als ik dat soort dingen zie (ueberhaupt het javascript: pseudoprotocol) dan zeg ik altijd: als iets geen link is, gebruik dan geen anchor ;)
Mag ik ook vragen waarom? Ik zie niet echt in wat het voordeel zou zijn een onclick te gebruiken ipv een href? Of wat daar netter zou aan zijn?

Je moet er toch zowiezo wel een href bijzetten, dus anders heb je 1 href, met een combinatie van een href en een onclick heb je een langere code..

Opgelet trouwens met die DOM's; ik heb al ondervonden dat van zodra je 2 lagen diep wil gaan ofzo IE niet meer mee kan :(

Als we dan toch gaan optimaliseren:
code:
1
window.onload = projectenPlaatsen();
vindt ik trouwens iets netter en wordt waarschijnlijk ook iets minder gefilterd dan
code:
1
<body onload="javascript:projectenPlaatsen()">

[ Voor 43% gewijzigd door Tofu op 05-07-2006 01:16 ]


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 11:11

crisp

Devver

Pixelated

tofu schreef op woensdag 05 juli 2006 @ 01:10:
[...]

Mag ik ook vragen waarom? Ik zie niet echt in wat het voordeel zou zijn een onclick te gebruiken ipv een href? Of wat daar netter zou aan zijn?
Omdat een anchor een element is bedoelt voor navigatie; als je daar andere dingen aanhangt dan gebruik je het verkeerde element. Mensen verwachten dat als ze op een link klikken ze naar een ander pagina geleidt worden, niet dat er opeens van alles op de pagina zelf gebeurd, hiervoor zijn andere elementen geschikter zoals bijvoorbeeld buttons.
In sommige gevallen kan je best de onclick van een anchor gebruiken voor een javascript actie, maar gebruik dan de href als link naar een alternatieve pagina voor non-js enabled clients...

Intentionally left blank


  • chris
  • Registratie: September 2001
  • Laatst online: 11-03-2022
tofu schreef op woensdag 05 juli 2006 @ 01:10:
Als we dan toch gaan optimaliseren:
code:
1
window.onload = projectenPlaatsen();
vindt ik trouwens iets netter en wordt waarschijnlijk ook iets minder gefilterd dan
code:
1
<body onload="javascript:projectenPlaatsen()">
Om het af te maken:
JavaScript:
1
document.addEventListener(window, 'load', projectPlaatsen, false);

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 11:11

crisp

Devver

Pixelated

chris schreef op woensdag 05 juli 2006 @ 23:43:
[...]

Om het af te maken:
JavaScript:
1
document.addEventListener(window, 'load', projectPlaatsen, false);
Tsja, het is jammer dat sommigen van ons IE nog moeten ondersteunen... ;)
Overigens is het:
JavaScript:
1
window.addEventListener('load', projectPlaatsen, false);

;)

[ Voor 15% gewijzigd door crisp op 05-07-2006 23:47 ]

Intentionally left blank


  • XWB
  • Registratie: Januari 2002
  • Niet online

XWB

Devver
Halt :p Ik zie vaak attachEvent en addEventListener langskomen, wat is het verschil tussen beide (browsers ?) en waarom is dit netter dan body onload ?
crisp schreef op woensdag 05 juli 2006 @ 01:02:
[...]

Als ik dat soort dingen zie (ueberhaupt het javascript: pseudoprotocol) dan zeg ik altijd: als iets geen link is, gebruik dan geen anchor ;)
Uiteraard, maar op dat detail heb ik niet echt gelet, ik had gewoon TS zijn code naar het DOM omgezet.

March of the Eagles


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 11:11

crisp

Devver

Pixelated

Hacku schreef op woensdag 05 juli 2006 @ 23:53:
Halt :p Ik zie vaak attachEvent en addEventListener langskomen, wat is het verschil tussen beide (browsers ?) en waarom is dit netter dan body onload ?
addEventListener is een method van het DOM Event Model (een W3 standaard) en attachEvent is een method van het 'broken-by-design' IE propriety event model.
Het voordeel van een dergelijke method is dat je meerdere functies als handler kunt toevoegen aan hetzelfde element, en dat je ook handlers weer kunt verwijderen :)

Intentionally left blank


  • XWB
  • Registratie: Januari 2002
  • Niet online

XWB

Devver
En kent IE addEventListener dan? Zoja hoef je attachEvent nergens meer te gebruiken. Ik was ondertussen even gaan googlen en kwam deze tegen:

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
function addEvent(obj, evType, fn, useCapture){
  if (obj.addEventListener){
    obj.addEventListener(evType, fn, useCapture);
    return true;
  } else if (obj.attachEvent){
    var r = obj.attachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Handler could not be attached");
  }
}

March of the Eagles


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 11:11

crisp

Devver

Pixelated

Hacku schreef op donderdag 06 juli 2006 @ 00:02:
En kent IE addEventListener dan?
Je weet toch hoe het in IE is gesteld met standards-ondersteuning? ;)
Zoja hoef je attachEvent nergens meer te gebruiken. Ik was ondertussen even gaan googlen en kwam deze tegen:
[...]
Stop! Er vanuitgaan dat attachEvent en addEventListener functioneel hetzelfde zijn is de grootste fout die je kan maken. Dit stukje code (een oudje al van de hand van Scott Andrew) is deprecated - considered harmfull zelfs; lees maar door:
http://www.quirksmode.org...5/08/addevent_consid.html
http://dean.edwards.name/weblog/2005/10/add-event2/
http://therealcrisp.xs4all.nl/upload/addEvent_dean.html

:)

Intentionally left blank


  • XWB
  • Registratie: Januari 2002
  • Niet online

XWB

Devver
Je weet toch hoe het in IE is gesteld met standards-ondersteuning?
:p Ok ik heb niks gevraagd :+
Stop! Er vanuitgaan dat attachEvent en addEventListener functioneel hetzelfde zijn is de grootste fout die je kan maken. Dit stukje code (een oudje al van de hand van Scott Andrew) is deprecated - considered harmfull zelfs; lees maar door:
Sowieso doe ik nooit aan copy paste voordat ik iets volledig snap :) Dat artikel op quirksmode is me ondertussen duidelijk. En de manier van Dean Edwards is dus dé manier? Ik ga me morgen vandaag toch maar eens verdiepen in die events.

March of the Eagles


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 11:11

crisp

Devver

Pixelated

Hacku schreef op donderdag 06 juli 2006 @ 00:33:
[...]
En de manier van Dean Edwards is dus dé manier?
Nee, het is een manier, maar wel een manier waar ik en Dean samen op zijn gekomen hoewel ikzelf weer net even andere ideeën erop na hou over hoe zoiets eruit moet zijn dan Dean - derhalve wijkt mijn versie (laatste link) weer net een beetje af ;)

Intentionally left blank


  • XWB
  • Registratie: Januari 2002
  • Niet online

XWB

Devver
Nee, het is een manier
Dat bedoelde ik eigenlijk, want doorgaans heb je verschillende (goede) manieren om een probleemsituatie op te lossen :)

Trouwens crisp, dat mensen van een link verwachten dat deze naar een andere pagina doorlinkt is waar, maar als ik voor een onclick event geen a element maar bv een spam element gebruik gaan mensen ook verwachten/denken dat dit een link is, dus maakt het dan zoveel uit dat je hier het a element voor "verkracht" ? Sowieso zie ik nog altijd liever href="javascript:void(0)" dan href="#" staan, dit laatste is best irritant wanneer je in het midden van een pagina staat.

@plukvandepet, heb je al wat kunnen doen met mijn voorbeeld?

[ Voor 4% gewijzigd door XWB op 06-07-2006 00:58 ]

March of the Eagles


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 11:11

crisp

Devver

Pixelated

Hacku schreef op donderdag 06 juli 2006 @ 00:58:
[...]

Dat bedoelde ik eigenlijk, want doorgaans heb je verschillende (goede) manieren om een probleemsituatie op te lossen :)
Dat klopt; feit is echter wel dat ik naast de versie van Dean en mij wel verschillende andere manieren heb gezien, maar die vind ik allemaal stuk voor stuk minder elegant, te complex of simpelweg incompleet/buggy. Als je een goede crossbrowser methode zoekt om events af te handelen dan vind ik dit de beste methode, maar een timmerman gebruikt natuurlijk ook altijd het liefst zijn eigen hamer ;)
Trouwens crisp, dat mensen van een link verwachten dat deze naar een andere pagina doorlinkt is waar, maar als ik voor een onclick event geen a element maar bv een spam element gebruik gaan mensen ook verwachten/denken dat dit een link is, dus maakt het dan zoveel uit dat je hier het a element voor "verkracht" ?
Ik heb toch ook niet gezegd dat je een span moet gebruiken als alternatief; ik heb juist gezegd dat je een element moet gebruiken waaraan de gebruiker herkent dat er een actie achter hangt zoals bijvoorbeeld een button. Dat is in sommige ontwerpen misschien wat minder mooi maar usability gaat natuurlijk voor alles ;)
Sowieso zie ik nog altijd liever href="javascript:void(0)" dan href="#" staan, dit laatste is best irritant wanneer je in het midden van een pagina staat.
Ik wil geen van beide zien in een href; ik wil een link zien in een href - iets waar ik ook iets aan heb als mijn client geen javascript ondersteund ;)

Intentionally left blank


  • XWB
  • Registratie: Januari 2002
  • Niet online

XWB

Devver
Ik heb toch ook niet gezegd dat je een span moet gebruiken als alternatief;
Nee, dat had ik als voorbeeld opgegeven :p Buttons ok, maar zoals je zelf zei staan ze soms minder mooi dan een stukje tekst waar je op kan klikken. Sowieso probeer ik altijd de elementen te gebruiken waarvoor ze dienen, maar dat lukt niet altijd. Soms kan een a element "lijken" alsof je een andere pagina opent, bijvoorbeeld door er een onclick event aan te hangen die via ajax andere content voor een bepaalde div ophaalt. Mensen krijgen dan min of meer wat ze verwachten na het klikken op de link: nieuwe content.

[ Voor 4% gewijzigd door XWB op 06-07-2006 01:12 ]

March of the Eagles


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 11:11

crisp

Devver

Pixelated

Hacku schreef op donderdag 06 juli 2006 @ 01:12:
[...]
Soms kan een a element "lijken" alsof je een andere pagina opent, bijvoorbeeld door er een onclick event aan te hangen die via ajax andere content voor een bepaalde div ophaalt. Mensen krijgen dan min of meer wat ze verwachten na het klikken op de link: nieuwe content.
En dus moet je in die gevallen de href gebruiken voor een link naar een pagina met diezelfde content voor het geval de client geen javascript ondersteund :)

Intentionally left blank


  • XWB
  • Registratie: Januari 2002
  • Niet online

XWB

Devver
Sjah, als de client javascript uitzet is dat zijn/haar probleem? Als jij morgen een app koopt dat draait op een P3 500MHz en hoger hoef je het ook niet op een P2 te gaan draaien. Als ik een site bouw waarvan bepaalde onderdelen met javascript gemaakt zijn is js gewoon een vereiste, punt :p Anno 2006 mag dat wel neem ik aan ? En volgens mij doet T.net het ook niet volledig zonder Javascript ? :)

March of the Eagles


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 11:11

crisp

Devver

Pixelated

Hacku schreef op donderdag 06 juli 2006 @ 12:17:
Sjah, als de client javascript uitzet is dat zijn/haar probleem? Als jij morgen een app koopt dat draait op een P3 500MHz en hoger hoef je het ook niet op een P2 te gaan draaien. Als ik een site bouw waarvan bepaalde onderdelen met javascript gemaakt zijn is js gewoon een vereiste, punt :p Anno 2006 mag dat wel neem ik aan ? En volgens mij doet T.net het ook niet volledig zonder Javascript ? :)
Ben ik niet helemaal met je eens; voor een web-applicatie kan je eisen stellen, een publiekelijke website dient toegankelijk te zijn, ook voor UA's die geen javascript ondersteuning bieden of voor mensen die uit veiligheids-overwegingen javascript uitgeschakeld hebben.
Bedenk ook dat de grootste groep bezoekers die geen JS-ondersteuning bieden crawlers van zoekmachines zijn; dat alleen is al een goede reden om ervoor te zorgen dat je content zonder JS toegankelijk is ;)

T.net is nog een deel legacy code maar op veel plaatsen hebben we de toegankelijkheid voor UA's zonder javascript-ondersteuning al flink verbeterd. Ook het forum is zonder javascript prima te gebruiken :)

Intentionally left blank


  • XWB
  • Registratie: Januari 2002
  • Niet online

XWB

Devver
Ben ik niet helemaal met je eens; voor een web-applicatie kan je eisen stellen, een publiekelijke website dient toegankelijk te zijn, ook voor UA's die geen javascript ondersteuning bieden of voor mensen die uit veiligheids-overwegingen javascript uitgeschakeld hebben.
Mja, ik weet het niet zo goed. Je kan heel mooie dingen doen met js, maar als je site ook volledig zonder js moet werken is dat dubbel werk. Alhoewel, misschien is dubbel werk hier sterk overdreven, een extra linkje plaatsen is ook niet zoveel werk.
Bedenk ook dat de grootste groep bezoekers die geen JS-ondersteuning bieden crawlers van zoekmachines zijn; dat alleen is al een goede reden om ervoor te zorgen dat je content zonder JS toegankelijk is
Ok, jij wint :p (je hebt volledig gelijk uiteraard)
T.net is nog een deel legacy code maar op veel plaatsen hebben we de toegankelijkheid voor UA's zonder javascript-ondersteuning al flink verbeterd.
Klopt, ik bedoelde vooral op de uitklapmenu's bovenaan. Waarom zijn die met js gemaakt terwijl het ook met css kan (op IE6 na dan) ?

[ Voor 5% gewijzigd door XWB op 06-07-2006 12:42 ]

March of the Eagles


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 11:11

crisp

Devver

Pixelated

Hacku schreef op donderdag 06 juli 2006 @ 12:40:
[...]
Klopt, ik bedoelde vooral op de uitklapmenu's bovenaan. Waarom zijn die met js gemaakt terwijl het ook met css kan (op IE6 na dan) ?
Omdat CSS niet bedoelt is voor behavior; overigens zijn de menu's wel toegankelijk voor text-based browsers (schakel CSS en JS maar eens uit ;) )

Intentionally left blank


  • XWB
  • Registratie: Januari 2002
  • Niet online

XWB

Devver
Omdat CSS niet bedoelt is voor behavior
Niet ? Dus iedereen die hier een topic opent met zo'n suckerfish menu is fout bezig ? :p

March of the Eagles


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 11:11

crisp

Devver

Pixelated

Hacku schreef op donderdag 06 juli 2006 @ 12:47:
[...]


Niet ? Dus iedereen die hier een topic opent met zo'n suckerfish menu is fout bezig ? :p
jep :P

Intentionally left blank


Verwijderd

Topicstarter
Hacku schreef op dinsdag 04 juli 2006 @ 23:45:
Omdat het buiten toch zo koud is help ik je even opweg:
wooo Hacku , thanks ! het werkt , moet nog ff grondig in de materie duiken , want mijn code liegt er zo bekeken niet om : prutser eerste klas : )

wordt vervolgd.. .. ..

  • Alex)
  • Registratie: Juni 2003
  • Laatst online: 12-12-2025
Om nog even op de discussie wbt links in te springen, wanneer je een link gebruik i.c.m. javascript: void(0); is het inderdaad niet zo logisch, wat ik tegenwoordig doe is dit:
HTML:
1
<a href="#doeDitEnDat" onclick="doeDitEnDat()">...</a>

Op deze manier kan er gewoon gebookmarked worden. Ik gebruik Javascript om te bepalen of er al iets is aangegeven (location.indexOf('#')), een demo vind je hier: http://www.gymnasiumbreda.nl/webmail/support/.
Waarom ik het op deze manier heb geschreven i.p.v. gewone links? Eigenlijk meer om te voorkomen dat er tussendoor 'witte flitsen' komen en ik vond het wel een mooie manier om een Table of Contents te maken zoals in Windows' HTML Help :)

Overigens zit er ook een AJAX-request in voor een tellertje, übersimpel, maar het werkt wel :)

[ Voor 12% gewijzigd door Alex) op 07-07-2006 00:57 ]

We are shaping the future


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 11:11

crisp

Devver

Pixelated

Alex schreef op vrijdag 07 juli 2006 @ 00:54:
Om nog even op de discussie wbt links in te springen, wanneer je een link gebruik i.c.m. javascript: void(0); is het inderdaad niet zo logisch, wat ik tegenwoordig doe is dit:
[...]
Dat maakt het nog steeds niet toegankelijk voor non-JS enabled clients, maar voor bijvoorbeeld een AJAX-driven webapplication is het inderdaad een mooie manier om de problemen met bookmarken en history op te lossen :)

Intentionally left blank


  • Alex)
  • Registratie: Juni 2003
  • Laatst online: 12-12-2025
Degene die geen JS of geen Flash heeft heeft sowieso niets aan dit systeempje, dus daarom hoef ik er geen rekening mee te houden :)

Verder zijn er wel betere systemen om te werken met history, alleen snap ik die niet helemaal...

We are shaping the future

Pagina: 1