[.Net] Validators / javascript / rounded corners

[tec]

Het is een beetje een mengelmoes probleempje maar hier komt ie:

Situatie:

Een div met een classe defaultForm, met daarin asp fields en daaraan asp validators gekoppeld. Werkt als een trein... Tot op het moment dat ik met een javascriptje het defaultForm divje aan ga passen. Het javascript voegt namelijk een 3-tal div's toe aan de dom van defaultForm om het formulier van ronde hoekjes te voorzien.. (dit gebeurd tijdens de onload).

(deze divs worden om de inhoud van defaultForm gezet), zoiets:

defaultForm.innerHTML = '<div><div><div>' + defaultForm.innerHTML + '</div></div></div>';

Het probleem is nu dat de validator de inline style van het span-netje niet meer kan aanpassen nadat ik die divs toevoegd heb.

Nou willen we hier best wel zo ver gaan dat we dan maar handmatig bij alle forms die div's erin zetten maar het is handiger om het even vlug tijdens de pageload met een javascriptje te doen. Kan iemand mij vertellen of er een workaround is waardoor de validators blijven werken en we toch gebruik kunnen maken van het javascript?

[riezebosch]

Wat dan als mensen Javascript niet aan hebben staan? Is je site überhaupt wel crossbrowser compatible en niet IE only? Kan je er geen component van maken in .NET?

[Verwijderd]

Ik zou gewoon niftycube gebruiken, want dan ben je

a. in 1minuut klaar
b. weet je (vrijwel) zeker dat het goed werkt

http://www.html.it/articoli/niftycube/index.html

[4of9]

tec schreef op vrijdag 16 maart 2007 @ 16:09:
Het is een beetje een mengelmoes probleempje maar hier komt ie:

Situatie:

Een div met een classe defaultForm, met daarin asp fields en daaraan asp validators gekoppeld. Werkt als een trein... Tot op het moment dat ik met een javascriptje het defaultForm divje aan ga passen. Het javascript voegt namelijk een 3-tal div's toe aan de dom van defaultForm om het formulier van ronde hoekjes te voorzien.. (dit gebeurd tijdens de onload).

(deze divs worden om de inhoud van defaultForm gezet), zoiets:

defaultForm.innerHTML = '<div><div><div>' + defaultForm.innerHTML + '</div></div></div>';

Het probleem is nu dat de validator de inline style van het span-netje niet meer kan aanpassen nadat ik die divs toevoegd heb.

Nou willen we hier best wel zo ver gaan dat we dan maar handmatig bij alle forms die div's erin zetten maar het is handiger om het even vlug tijdens de pageload met een javascriptje te doen. Kan iemand mij vertellen of er een workaround is waardoor de validators blijven werken en we toch gebruik kunnen maken van het javascript?

Wat wil je nu precies? ronde hoekjes om je form velden?

Je kunt ook een custom validator maken die rekening houd met je javascript. Of het geheel gewoon server side afhandelen dmv findControl.

Maak een custom control waar je de form velden in zet of maak een user control. Er zijn hier echt meerdere oplossingen mogelijk. Die ronde hoekjes zijn overigens als verschillende controls te verkrijgen (even zoeken in google naar rounded corner control)

[ Voor 9% gewijzigd door 4of9 op 17-03-2007 03:02 ]

[tec]

riezebosch schreef op vrijdag 16 maart 2007 @ 23:46:
Wat dan als mensen Javascript niet aan hebben staan? Is je site überhaupt wel crossbrowser compatible en niet IE only? Kan je er geen component van maken in .NET?

Het is een webapplicatie en het is geen publiekelijk ding dus javascript kan gewoon een randvoorwaarde zijn voor het gebruik van het ding. Waarom zou mijn site niet crossbrowser zijn en alleen IE only, waar haal je dat nou ineens vandaan? We kunnen er ook wel iets anders voor klussen in .Net maar ik vind het mooi als het met javascript gaat..

Sowieso, even los van mijn webapplicatie, is het geen punt als mensen javascript uit hebben staan, dan missen ze alleen de ronde hoekjes, dat lijkt me verder geen probleem, het zorgt er iig niet voor dat deze personen de betreffende website niet zouden kunnen gebruiken.

Verwijderd schreef op zaterdag 17 maart 2007 @ 00:05:
Ik zou gewoon niftycube gebruiken, want dan ben je

a. in 1minuut klaar
b. weet je (vrijwel) zeker dat het goed werkt

http://www.html.it/articoli/niftycube/index.html

Ik heb altijd liever zelfs alles onder controle dan dat ik vanallerlei scripts overal vandaan sleur. Daarbij gok ik dat niftycube ook wijzigingen aan de DOM maakt. Eigelijk vind ik het ook wel een erg robuust script voor een paar ronde hoekjes.

4of9 schreef op zaterdag 17 maart 2007 @ 02:59:
[...]
Wat wil je nu precies? ronde hoekjes om je form velden?

Je kunt ook een custom validator maken die rekening houd met je javascript. Of het geheel gewoon server side afhandelen dmv findControl.

Maak een custom control waar je de form velden in zet of maak een user control. Er zijn hier echt meerdere oplossingen mogelijk. Die ronde hoekjes zijn overigens als verschillende controls te verkrijgen (even zoeken in google naar rounded corner control)

In onze applicatie zitten form fields binnen een div met de classe defaultForm. Deze div moet dus afgeronde hoekjes hebben, niet de fields zelf

Custom validator was onze .Net goeroe niet blij mee dus die valt af. Hij was ook al van plan om een custom control of iets dergelijks te bouwen als container voor de form fields.

Mijn vraag was eigelijk of iemand bekend was met dit probleem en of het ook op te lossen is zonder veel zaken aan te passen. Zal overigens ook eens kijken naar die controls met rounded corners, misschien wel interessant. Thx.

[crisp]

Het probleem zit 'm in het gebruik van innerHTML - daarmee 'reset' je eventuele attached eventhandlers:

JavaScript:

<body>
<div id="container">
    <div id="foo">klik mij</div>
</div>
<script type="text/javascript">

var foo = document.getElementById('foo');
foo.onclick = function() { alert('ja!'); }

var container = document.getElementById('container');
container.innerHTML = '<div>' + container.innerHTML + '</div>';

</script>

ergo: geen innerHTML gebruiken maar echte DOM-functies - ik zal even een voorbeeld voor je maken

alstu:

JavaScript:

var container = document.getElementById('container');
var div1 = document.createElement('div');
var element;
while ((element = container.firstChild))
    div1.appendChild(container.removeChild(element));

var div2 = document.createElement('div');
div2.appendChild(div1);
var div3 = document.createElement('div');
div3.appendChild(div2);

container.appendChild(div3);

wrapped de inhoud van - in dit geval - 'container' in 3 divs

[ Voor 30% gewijzigd door crisp op 17-03-2007 19:32 ]

[riezebosch]

tec schreef op zaterdag 17 maart 2007 @ 18:27:
[...]


Het is een webapplicatie en het is geen publiekelijk ding dus javascript kan gewoon een randvoorwaarde zijn voor het gebruik van het ding. Waarom zou mijn site niet crossbrowser zijn en alleen IE only, waar haal je dat nou ineens vandaan? We kunnen er ook wel iets anders voor klussen in .Net maar ik vind het mooi als het met javascript gaat..

Sowieso, even los van mijn webapplicatie, is het geen punt als mensen javascript uit hebben staan, dan missen ze alleen de ronde hoekjes, dat lijkt me verder geen probleem, het zorgt er iig niet voor dat deze personen de betreffende website niet zouden kunnen gebruiken.


[...]


Ik heb altijd liever zelfs alles onder controle dan dat ik vanallerlei scripts overal vandaan sleur. Daarbij gok ik dat niftycube ook wijzigingen aan de DOM maakt. Eigelijk vind ik het ook wel een erg robuust script voor een paar ronde hoekjes.


[...]

Wat ik ermee bedoelde is dat je voor JScript er wel snel apart voor moet zorgen dat het ook door meerdere browsers ondersteund wordt, aangezien ze niet allemaal een standaard implementatie kennen. Daarmee haal je gewoon extra werk op je hals, en moet je misschien af gaan vragen of dat de moeite waard is voor waar je het uiteindelijk voor gaat gebruiken.
Persoonlijk vind ik dat JScript niet bedoeld is om je opmaak te doen, maar da's een kwestie van gevoel.

[tec]

crisp schreef op zaterdag 17 maart 2007 @ 19:27:
Het probleem zit 'm in het gebruik van innerHTML - daarmee 'reset' je eventuele attached eventhandlers:

JavaScript:

<body>
<div id="container">
    <div id="foo">klik mij</div>
</div>
<script type="text/javascript">

var foo = document.getElementById('foo');
foo.onclick = function() { alert('ja!'); }

var container = document.getElementById('container');
container.innerHTML = '<div>' + container.innerHTML + '</div>';

</script>

ergo: geen innerHTML gebruiken maar echte DOM-functies - ik zal even een voorbeeld voor je maken

alstu:

JavaScript:

var container = document.getElementById('container');
var div1 = document.createElement('div');
var element;
while ((element = container.firstChild))
    div1.appendChild(container.removeChild(element));

var div2 = document.createElement('div');
div2.appendChild(div1);
var div3 = document.createElement('div');
div3.appendChild(div2);

container.appendChild(div3);

wrapped de inhoud van - in dit geval - 'container' in 3 divs

Hoera! voor Crisp!!!

Weer wat geleerd kan het kloppen dat zo'n truck met replaceChild niet werkt? dat had ik namelijk ook geprobeerd. Wat ik toen deed was een nieuw element maken daarin de divs appenden en dan de container en daarna de container replacen met de nieuwe.

[crisp]

tec schreef op maandag 19 maart 2007 @ 08:52:
[...]


Hoera! voor Crisp!!!

Weer wat geleerd kan het kloppen dat zo'n truck met replaceChild niet werkt? dat had ik namelijk ook geprobeerd. Wat ik toen deed was een nieuw element maken daarin de divs appenden en dan de container en daarna de container replacen met de nieuwe.

Om de container te kunnen appenden aan een ander element moet je 'm eerst uit de DOM structuur halen; vervolgens kan je dan natuurlijk geen replaceChild meer doen omdat de container dan geen bestaand element meer is in de DOM.