Formulier en Javascript... element op juiste plek aanmaken

[alienfruit]

Ik ben bezig met een formulier te maken waarbij de klant (zucht) een kalender picker wil hebben, onder het motto klant is koning dacht ik. Geen probleem, doen we voor u. Maar nu loop ik toch mooi eventjes tegen de lamp Nu heb ik onderstaand scriptje, als test gemaakt. Alleen als ik nu op een plek tussen in de <form></form> een createCalenderComponent uitvoer dmv. <script type="text/javascript">createCalenderComponent( 'mijnnaam', this)</script> dan komt hij niet op de plek waar de functie wordt uitgevoerd.

Wat zou ik moeten doen om dit wel te doen? Als ik het via document.write doe werkt het namelijk wel. Iemand enig idee?

code:

function createCalenderComponent( id, parentChildName ) {
    parent = document.getElementById( parentChildName );
    if ( parent == undefined ) {
        alert( 'Mislukt!' );
        return false;
    }
    
    //
    kalenderElement = document.createElement( 'div' );
    kalenderElement.setAttribute( "style", 'background-color: yellow' );

    kalenderElementInput = document.createElement( 'input' );
    kalenderElementInput.setAttribute( "type", "text" );
    kalenderElementInput.setAttribute( "id", id + "__name" );
    
    kalenderElementImage = document.createElement( 'img' );
    kalenderElementImage.setAttribute( "src", "http://www.test.nl" );
    AttachEvent( kalenderElementImage, 'click', doCalenderClick );
    
    kalenderElementImage.setAttribute( "valign", "middle" );
    kalenderElement.appendChild( kalenderElementInput );
    kalenderElement.appendChild( kalenderElementImage );
    parent.appendChild( kalenderElement );
}

function doCalenderClick(eventArgs) {
    alert( 'doCalenderClick() --> name ' );
}

[Bosmonster]

Kende je deze al:

http://www.dynarch.com/projects/calendar/

onder het motto, waarom het wiel op nieuw uitvinden als er een briljante oplossing bestaat die ook nog eens gratis is

[ Voor 50% gewijzigd door Bosmonster op 28-07-2005 14:10 ]

[alienfruit]

Hmm, bedankt eens kijken of ik dat aan de praat krijg. Maar nu wil ik nog wel steeds weten wat het probleem is

[Bosmonster]

Even vraagje dan.

Je zegt dat je uitvoert createCalenderComponent( 'mijnnaam', this)

Maar je functie omschrijving vraagt een parentChildName die je vervolgens op getElementById() loslaat.

Soeiwso werkt een this reference niet natuurlijk gewoon in javascript in een form. Daarmee heb je niet die form te pakken.

Daarbij zul je dit dynamisch nooit uit kunnen voeren binnen de form-tags, aangezien je dingen aan het form-object toe wil gaan voegen dan terwijl de tags nog niet afgerond zijn (en het form-object nog niet klaar).

Je zult het na de form tag moeten doen (kan er direct na) en dan refereren naar het id van het form.

toevoeging:

even voor je parent (op eerste regel) 'var' zetten loste bij mij overigens een foutmelding op

toevoeging 2:

zit ook een fout in je AttachEvent regel, deze moet er zo uitzien volgens mij:

kalenderElementImage.attachEvent('onclick', doCalenderClick );

Met de gefixte attachEvent regel, var voor parent en de aanroep na de form-tag met als tweede parameter de id van je form, werkt je script bij mij

edit 3214425:
alleen in IE overigens Firefox heeft nog wat problemen met attachEvent, maar dat mag je zelf oplossen

[ Voor 96% gewijzigd door Bosmonster op 28-07-2005 14:46 . Reden: edit nr 23 ]

[alienfruit]

Aah, klopt... mijn idee was om de parent child op te geven en vervolgens daaronder de kalender te hangen. Overigens was AttachEvent() gewoon functie die ik op een blog had gevonden

Ik heb namelijk dit als formulier, nu wilde ik de formulier als volgt doen:

code:

<label for="x">Meldingsdatum</label>
<script type="text/javascript">createKalenderComponent()</script>

Maar goed dat werkte dus niet, alleen nu zeg je dat het ook beter is om pas de dynamische elementen aan te maken als de formulier klaar is met laden. Neem ik aan? Dan moet ik dus een functie schrijven voor de onload-event, en daar pas de elementen aanmaken?

HTML:

<form id="defaultFormName">
<fieldset>
    <label for="a1">Wilt u deze melding anoniem doen?</label>
    <fieldset>
        <input type="radio" name="a1" id="a1" value="0" /><label for="a1Caption">Nee</label>
        <input type="radio" name="a1" id="a1" value="1" /><label for="a1Caption">Ja</label>
    </fieldset>

<label for="a2">Meldpunt?</label>
<select id="a2" name="a2">
    <option value="1">Management</option>
    <option value="2">Intern meldpunt</option>
    <option value="3">Extern meldpunt</option>
</select>
</fieldset>
</form>

...en de van kalender werkt nu

[ Voor 21% gewijzigd door alienfruit op 28-07-2005 15:07 ]

[Bosmonster]

Hoeft niet per se onload, maar het moet wel als het de form-tag afgerond is.

code:

<body>
<form id="testform">
<input type="text">
</form>
<script type="text/javascript">
    createCalendarDing('testform');
</script>
</body>

Exacte plaatsing wordt zo wel lastiger inderdaad, dan is het met document.write nog niet eens zo gek.

[ Voor 19% gewijzigd door Bosmonster op 28-07-2005 15:24 ]

[alienfruit]

Mag dat nog met XHTML ?

[Bosmonster]

alienfruit schreef op donderdag 28 juli 2005 @ 15:28:
Mag dat nog met XHTML ?

vast niet

Maar anders kun je nog je het javascript nog extern laden (src="doeMeDing.js"). Gaat ie in ieder geval niet zeuren over de content van de script tag.

[alienfruit]

Ik klooi wel even wat aan, of iemand anders moet een meesterlijk idee hebben

[crisp]

Bosmonster schreef op donderdag 28 juli 2005 @ 15:39:
[...]


vast niet

Maar anders kun je nog je het javascript nog extern laden (src="doeMeDing.js"). Gaat ie in ieder geval niet zeuren over de content van de script tag.

document.write in XHTML met XHTML mimetype gaat gewoonweg niet werken, ook niet vanuit een extern script

Wat is er trouwens mis met zoiets:

HTML:

<form>
...
<label for="x">Meldingsdatum</label>
<div id="hier_wil_ik_mijn_kalender"></div>
<script type="text/javascript">createKalenderComponent('mijn_kalender', 'hier_wil_ik_mijn_kalender')</script>
...
</form>

[ Voor 123% gewijzigd door Bosmonster op 28-07-2005 17:23 ]

[Bosmonster]

crisp schreef op donderdag 28 juli 2005 @ 16:21:
[...]

Wat is er trouwens mis met zoiets:

Daar is helemaal niks mis mee, je moet alleen crisp heten om erop te komen

(sorry voor editen van je post.. verkeerde knopje )

[crisp]

Bosmonster schreef op donderdag 28 juli 2005 @ 17:23:
[...]
(sorry voor editen van je post.. verkeerde knopje )

prutser

anyway; ik zou ook zorgen voor een alternatief invoerveld voor UA's die geen JS ondersteunen; je kalender component kan dat veld dan eventueel hidden maken en de kalender ervoor in de plaats zetten (onder de noemer: unobtrusive)