[Javascript] voor dummies (deel 11)

dinsdag 15 februari 2011 @ 16:55:31 #1

Trollface.

gr rob fruithof, groningencity

Potverdikkie! post ik zonder het te weten de laatste reactie.. nahh dan maar ff nieuwe topic!

De (voorlopige) OP van de [Javascript] voor dummies reeks.
Hier kan je alle vragen stellen over Javascript en alles wat er mee te maken heeft.

Heb je een probleem, post dan ook even de code waar het probleem zit

Zo kunnen we je beter proberen te helpen.

Vorige delen:
#1 - [Javascript] voor dummies - Deel 1
#2 - [Javascript] voor dummies - Deel 2
#3 - [Javascript] voor dummies - deel 3
#4 - [Javascript] voor dummies - deel 4
#5 - [Javascript] voor dummies (deel 6)
#6 - [Javascript] voor dummies (deel 6)
#7 - [Javascript] voor dummies (deel 7)
#8 - [Javascript] voor dummies (deel 8)
#9 - [Javascript] voor dummies (deel 9)

Handige links:
Quircksmode Javascript
Javascript Cheat Sheet
_{Mis je een link? Geef even een gil in het topic}

Tutorials:
W3Schools Javascript
W3Schools AJAX

Let op! Verwijder je post niet.
Als je bijvoorbeeld zelf al een antwoord hebt gevonden, laat ons dan even weten hoe je het hebt opgelost.
Wel zo aardig.

Laatste posts uit het vorige topic:
{Hier de laatste twee posts uit het vorige topic}

_{Deze OP: http://wiki.fok.nl/index.php/OP/Javascript}

★5731U★ Death from above '79★You're a woman, i'm a machinielsie ★ ✠ ★ Telkens weer een beetje sterven★ I was born in a winterstorm, i live there still★

Redactie Frontpage dinsdag 15 februari 2011 @ 17:11:36 #2

Crazy Harry

Samen met HTML5 gaat JavaScript nog een stuk belangrijker worden dus ik ga deze eens volgen

De discussie is niet privacy tegenover veiligheid maar vrijheid tegenover controle
Overzicht privacy-inperkende maatregelen/wetten/voorstellen
We don't stop playing because we grow old; we grow old because we stop playing. ― George Bernard Shaw

dinsdag 15 februari 2011 @ 17:13:25 #3

remi1986

Aangezien dit een "voor dummies" post is, kunnen er misschien links naar veel gebruikte js libraries gepost worden zoals: jQuery,Prototype,MooTools etc..

woensdag 16 februari 2011 @ 08:50:56 #4

Trollface.

gr rob fruithof, groningencity

quote:
Op dinsdag 15 februari 2011 17:11 schreef Crazy Harry het volgende:
Samen met HTML5 gaat JavaScript nog een stuk belangrijker worden dus ik ga deze eens volgen

Ware het niet dat HTML5 pas in 2014 af is.

★5731U★ Death from above '79★You're a woman, i'm a machinielsie ★ ✠ ★ Telkens weer een beetje sterven★ I was born in a winterstorm, i live there still★

woensdag 16 februari 2011 @ 14:05:51 #5

Light

quote:
Op woensdag 16 februari 2011 08:50 schreef Trollface. het volgende:

[..]

Ware het niet dat HTML5 pas in 2014 af is.

HTML4 stamt uit 1999, na 15 jaar is het wel tijd voor een opvolger.

fokstok.nl

donderdag 24 februari 2011 @ 16:19:51 #6

SpeedyGJ

Zo snel als de bliksem O+

Is er ook een mogelijkheid om een html menu te maken in .js inc links?

Om nou 30 pagina's te gaan aanpassen voor 1 nieuw item toe te voegen/verwijderen is ook een klus van niks en als je 1 foutje hebt of het bevalt je niet kun je nog eens overnieuw

Doe mee met het voorspellen van het weer!
Weekvoorspelling -- Week 1
Maandvoorspelling februari.
Jaarvoorspelling 2024 --- Jaarvoorspelling 2025!

donderdag 24 februari 2011 @ 16:30:46 #7

KomtTijd...

quote:
Op donderdag 24 februari 2011 16:19 schreef SpeedyGJ het volgende:
Is er ook een mogelijkheid om een html menu te maken in .js inc links?

Om nou 30 pagina's te gaan aanpassen voor 1 nieuw item toe te voegen/verwijderen is ook een klus van niks en als je 1 foutje hebt of het bevalt je niet kun je nog eens overnieuw

Een mogelijkheid om wát?

ga eens googlen op "include"

zcflevo.nl

donderdag 3 maart 2011 @ 21:22:53 #8

PiRANiA

All thinking men are atheists.

Simpele vraag.

1	$('td:contains("needle")').parent().addClass('highlight');

zoekt in alle td's. Ik wil alleen in de td's met class description zoeken.

Hoe?

Dag Google!

donderdag 3 maart 2011 @ 21:25:33 #9

PiRANiA

All thinking men are atheists.

En, een kort vraagje daar bij, hoe verifiëer ik of er wat is gevonden?

.

Dag Google!

vrijdag 4 maart 2011 @ 06:08:00 #10

Tuvai.net

Ik heb in .NET een Web User Control die bestaat uit enkele HTML controls. Ik wil middels Javascript op een 'unobtrussive' manier onclick behavior aan één van de HTML controls in die Web User Control toevoegen, de functie die aangeroepen moet worden is OpenLookup(DataTable, CollectionName). Elke Web User Control bestaat uit 2 HiddenFields, een TextBox en een Button. Het is de Button waaraan onclick behavior toegevoegd moet worden.

Het doel van deze Web User Control is een soort van overlay laden waarin een dynamische tabel verschijnt, van waaruit de gebruiker een keuze kan maken. Het ID en de omschrijving van de geselecteerde waarden worden dan opgeslagen in de corresponderende velden van de Web User Control.

Nu kom ik op een pagina waar ik 2 van deze Web User Controls gebruik, de HTML die uiteindelijk gegenereerd wordt is als volgt:

1
2
3
4
5
6
7
8
9
10
11
12
13

Het verschil tussen de 2 Web User Controls is dat er een verschillende reeks met data in de dynamische tabel moet verschijnen, dit wordt afgehandeld door een QueryString parameter die ik meestuur naar de AJAX pagina waar de tabel gegenereerd wordt. Deze parameter verwerk ik in de rel parameter van de <button>. In bovenstaand voorbeeld is dit Branch voor de eerste button, en Country voor de tweede button. De tweede parameter die ik aan mijn OpenLookup functie moet meesturen is CollectioName, dit is de 'prefix' van het ID van elke control in mijn Web User Control, zodat ik vanuit mijn AJAX pagina de waarden naar de correcte controls kan terugschrijven.

De onclick behavior voeg ik op de volgende manier toe middels Javascript (en jQuery). De switch gebruik ik omdat ik meerdere Web User Controls heb waaraan onclick gedrag toegevoegd moet worden:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(document).ready(function () {
    var ControlButtons = document.getElementsByTagName('button');
    for (var i = 0; i < ControlButtons.length; i++) {
        var ControlButton = ControlButtons[i];
        var CollectionName = ControlButton.getAttribute('id').replace('Button', '');

        switch (ControlButton.getAttribute('class')) {
            case 'ButtonLookup':
                var DataTable = ControlButton.getAttribute('rel');

                $('button#' + ControlButton.getAttribute('id')).click(function () {
                    OpenLookup(DataTable, CollectionName);
                    return false;
                });

                break;
        }
    }

De OpenLookup functie ziet er (zonder alle overlay abracadabra) als volgt uit:

1
2
3
4

function OpenLookup(DataTable, CollectionName) {
$('div#OverlayWindow').load('Lookup.aspx?DataTable=' + DataTable + '&CollectionName=' + CollectionName);
return true;
}

Nu komt het probleem, indien ik meerdere Web User Controls gebruik op een pagina, verwijzen de DataTable en CollectionName parameters altijd naar de waarden van de Laatste Web User Control! Het lijkt net alsof de variabelen die ik in de switch scope van de $(document).ready() functie gebruik buiten hun scope om overschreven worden!

Samengevat, als ik bovenstaand voorbeeld gebruik, dus met één Web User Control voor DataTable Branch en één voor DataTable Country, hebben beide buttons het gedrag OpenLookup('Country', 'TemplateMain_admBranch_').

Wat doe ik verkeerd?

[ Bericht 0% gewijzigd door Tuvai.net op 04-03-2011 06:21:48 ]

vrijdag 4 maart 2011 @ 06:58:46 #11

Zixon

quote:
Op donderdag 3 maart 2011 21:22 schreef PiRANiA het volgende:
Simpele vraag.

[ code verwijderd ]

zoekt in alle td's. Ik wil alleen in de td's met class description zoeken.

Hoe?

quote:
Op donderdag 3 maart 2011 21:25 schreef PiRANiA het volgende:
En, een kort vraagje daar bij, hoe verifiëer ik of er wat is gevonden? .

1
2
3
4
5
6
7
8

var results = $('td.description:contains("needle")').parent().addClass('highlight');

if(results.length > 0) {
//iets gevonden!
}
else {
//niets gevonden!
}

vrijdag 4 maart 2011 @ 07:44:58 #12

Zixon

quote:
Op vrijdag 4 maart 2011 06:08 schreef Tuvai.net het volgende:
Nu komt het probleem, indien ik meerdere Web User Controls gebruik op een pagina, verwijzen de DataTable en CollectionName parameters altijd naar de waarden van de Laatste Web User Control! Het lijkt net alsof de variabelen die ik in de switch scope van de $(document).ready() functie gebruik buiten hun scope om overschreven worden! Samengevat, als ik bovenstaand voorbeeld gebruik, dus met één Web User Control voor DataTable Branch en één voor DataTable Country, hebben beide buttons het gedrag OpenLookup('Country', 'TemplateMain_admBranch_'). Wat doe ik verkeerd?

Zo op het eerste gezicht zou ik zeggen dat je CollectionName en DataTable binnen de onclick handler van de button zou moeten definen. Echter zou ik gewoon lekker voor alleen jQuery kiezen en dan krijg je zoiets:

1
2
3
4
5
6
7
8
9
10
11

$(document).ready(function () {

    $('button.ButtonLookup').click(function() {

        var DataTable = $(this).attr('rel');
        var CollectionName = $(this).attr('id').replace('Button', '');

        OpenLookup(DataTable, CollectionName);
        return false;
    });
});

_{//niet getest}

vrijdag 4 maart 2011 @ 07:54:01 #13

Tuvai.net

quote:
Op vrijdag 4 maart 2011 07:44 schreef Zixon het volgende:

[..]

Zo op het eerste gezicht zou ik zeggen dat je CollectionName en DataTable binnen de onclick handler van de button zou moeten definen. Echter zou ik gewoon lekker voor alleen jQuery kiezen en dan krijg je zoiets:

[ code verwijderd ]

_{//niet getest}

Had ik nog niet aan gedacht.

Het is ouwe Javascript code die ik momenteel om aan 't zetten ben naar jQuery, maar ik bleef vanwege deze bug op dat stuk hangen en dacht er niet eens aan om een volledige jQuery versie te maken. Het werkt nu zoals het hoort, bedankt.

vrijdag 4 maart 2011 @ 13:50:48 #14

PiRANiA

All thinking men are atheists.

quote:
Op vrijdag 4 maart 2011 06:58 schreef Zixon het volgende:

[..]

[..]
[ code verwijderd ]

Will try. Thanks!

Dag Google!

zondag 6 maart 2011 @ 00:09:57 #15

minibeer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
<head>
<script type="text/javascript">
window.onload = doit();

function doit()
{
document.getElementById('e').style.color = 'red';
}

</script>

</head>
<body>
<div id="e">asdasd</span>
</body>
</html>

Grrrrr... wat doe ik verkeerd

?
Firebug says: document.getElementById('e') returns null.

Finally, someone let me out of my cage

zondag 6 maart 2011 @ 00:15:00 #16

Tegan

.

zondag 6 maart 2011 @ 00:21:01 #17

Tegan

Je moet dit doen.

1	<body onload="doit();">

zondag 6 maart 2011 @ 00:27:15 #18

GlowMouse

l'état, c'est moi

1	window.onload = doit();

Hier wordt de functie doit al direct uitgevoerd omdat er haakjes achterstaan. Zonder haakjes gaat het wel goed.

zie ook http://stackoverflow.com/(...)nload-vs-body-onload

eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0

zondag 6 maart 2011 @ 00:34:05 #19

Ofyles2

Bestemming: onbekend

De laatstgenoemde functie is sterker, maar ik wil minibeer nu al niet overhoop gooien met allerlei lifehacks...

Afscheidsrede

zondag 6 maart 2011 @ 00:34:44 #20

GlowMouse

l'état, c'est moi

Ik moest even reageren, want minibeer.

eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0

zondag 6 maart 2011 @ 00:38:08 #21

GlowMouse

l'état, c'est moi

wel een onhandig gekozen functienaam

eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0

zondag 6 maart 2011 @ 00:41:41 #22

GlowMouse

l'état, c'est moi

http://sites.google.com/s(...)-good-function-names

eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0

zondag 6 maart 2011 @ 00:43:11 #23

minibeer

haha, de code die ik hier had was na veel frustratie en gezeik.
Bedankt, (en weer zo'n domme fout

)

Komt allemaal omdat we van de docent webdesign (wat overigens alleen maar over xml gaat) geen inline javascript mogen gebruiken.

Finally, someone let me out of my cage

zondag 6 maart 2011 @ 00:47:44 #24

minibeer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<head>
<script type="text/javascript">
window.onload = initialize;

function initialize()
{
document.getElementById('tekst').style.color = 'red';
}
</script>
</head>
<body>
<div id="tekst">Tekst :D</div>
</body>
</html>

Finally, someone let me out of my cage

zondag 6 maart 2011 @ 00:48:13 #25

GlowMouse

l'état, c'est moi

waarom geen css hiervoor gebruiken?

eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0

zondag 6 maart 2011 @ 00:51:29 #26

Tegan

setTextColor() zou ik doen.

Je functienaam moet wel omschrijven wat je doet. Dus die tweede is ook slecht

.

zondag 6 maart 2011 @ 02:07:36 #27

Ofyles2

Bestemming: onbekend

quote:
Op zondag 6 maart 2011 00:51 schreef Tegan het volgende:
setTextColor() zou ik doen.

Je functienaam moet wel omschrijven wat je doet. Dus die tweede is ook slecht .

Minder slecht.

Ik ga voor alles wat simpeler en korter kan...

Afscheidsrede

zondag 6 maart 2011 @ 17:25:39 #28

minibeer

dit is niet wat ik eigenlijk wil, de bedoeling is om uiteindelijk een soort van uitklapmenu'tje te krijgen (als je op contact drukt dat je dan de cantactgegevens ziet verschijnen, en als je nog een keer drukt dat ze weer weggaan)
Ik zal het wel posten als ik het afheb

Finally, someone let me out of my cage

zondag 6 maart 2011 @ 18:00:35 #29

minibeer

document.getElementsByName schijnt niet te werken als je xhtml maakt via xslt. Firebug zegt: 'document.getElementsByName is not a function' Jammer...

Finally, someone let me out of my cage

dinsdag 8 maart 2011 @ 13:04:37 #30

minibeer

SPOILER
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.

Het volledige script.
Wat er gebeurt:
1. links met rel="external" krijgen het attribuut target="_blank".
2. tabelcellen met class="contactknop" worden zo veranderd, dat als je op de xste tabelcel met class="contactknop" klikt , de display van de xste tabelcel met class="contacttekst" op 'none' gezet wordt (of op 'block' als hij al onzichtbaar was).
3. Hetzelfde met bestandsknop en bestandslijst, alleen wordt ipv de display op none of block gezet, de visibility op hidden gezet (waardoor de lijst wel plek inneemt als hij onzichtbaar is, dit was wat mooier).

De site die we gemaakt hebben voor webdesign moest volledig xhtml strict zijn, met valide css, enzo. Werkt niet echt makkelijk, maar het is gelukt. (al ben ik geloof ik bij het inleveren de character encoding vergeten, maar dat levert alleen een warning op en geen error)

[ Bericht 30% gewijzigd door minibeer op 08-03-2011 13:11:40 ]

Finally, someone let me out of my cage

Forum Opties
Forumhop:
Hop naar:	(afkorting, bv 'KLB')

» digital corner

» development

» digital corner

» development