[JS] Pagina lay-out crasht met jQuery UI in IE

[bindsa]

In een pagina op mijn website (http://leeromgeving.award...p?pageindex=studiewijzers) loop ik tegen het volgende probleem op:

Ik maak gebruik van een een jQuery UI accordion en een datepicker (http://jqueryui.com/demos/), op dezelfde pagina, deze roep ik aan d.m.v. van de volgende code:

JavaScript:

    $(function() {
        $('#studiewijzercontent').accordion({
            autoHeight: false
        });
        $('#datumselector').datepicker({
            showOn: 'both', 
            buttonImage: '../images/calendar.gif', 
            buttonImageOnly: true,
            dateFormat: 'dd-mm-yy'
        });
    });

HTML:

<div class = 'ui-accordion ui-widget ui-helper-reset'>
    <h3 class = 'ui-accordion-header ui-helper-reset ui-state-default ui-corner-top'>
    <span class = 'ui-icon ui-icon-triangle-1-e'></span>
    <a>Selecteer een datum</a>
    </h3>
    <div class = 'ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active'>
        <form action = '?pageindex=studiewijzers&amp;action=changedate' method = 'post'>
        <p>
            Selecteer hier een datum waarvan je studiewijzers wilt zien, dit kun je doen door op het tekstveld te klikken en de juiste datum te selecteren. 
            <br><br>
            Datum: <input type='text' id='datumselector' style = 'margin-right: 3px;'> <br><br>
            <input type = 'submit' value = 'Verander datum'>
        </p>
        </form
    </div>
</div>
<br>
<div id='studiewijzercontent'>
    <h3><a href='#'>Dagoverzicht</a></h3>
    <div>
    Hier komt je dagoverzicht te staan
    </div>
    <h3><a href='#'>Weekoverzicht</a></h3>
    <div>
    Hier komt je weekoverzicht te staan
    </div>
    <h3><a href='#'>Periodeoverzicht</a></h3>
    <div>
    Hier komt je periodeoverzicht te staan
    </div>
    <h3><a href='#'>Toetsoverzicht</a></h3>
    <div>
    Hier komt je toetsoverzicht te staan
    </div>
    <h3><a href='#'>Vakoverzicht</a></h3>
    <div>
    Hier komt je vakoverzicht te staan
    </div>
</div>

Het werkt allemaal prima, totdat ik op het input veld van de datepicker klik (en dus de datepicker verschijnt) en terwijl de datepicker nog openstaat op een andere categorie in de accordion, zodra ik dat doe crasht de hele lay-out van de pagina (alleen in IE <= 7). Weet iemand hoe dat op te lossen is?

PS: Weet iemand hoe je de rounded corners van jQueryUI ook in IE aan de praat kan krijgen (ik heb DD Roundies geprobeerd, deze voldoet niet aan de eisen)

[ Voor 4% gewijzigd door bindsa op 14-01-2010 14:13 ]

[pieturp]

Je script staat niet helemaal onderaan in de body, da's meestal vragen om problemen. Probeer ook 'ns zonder animatie het datemenu uit te klappen. IE is traag en doet dat soort dingen vaak slecht.

Verder snap ik de noodzaak van die rounded corner plugin niet; je kunt prima css daarvoor gebruiken. Mits je de corners als images implementeert, werkt dat ook nog prima in IE.

Ook snap ik niet waarom je dit doet:

code:

$(function(){});

Je kunt volgens mij ook gewoon

code:

(function(){})();

gebruiken als je niet de global namespace wilt poluten.

Verder: mocht 't allemaal niet lukken; ikzelf gebruik voor dit soort webapplicaties eigenlijk altijd ExtJS. Zit IMHO beter in elkaar en is véél uitgebreider

[ Voor 12% gewijzigd door pieturp op 11-01-2010 17:37 . Reden: Uitgebreid ]

[Bosmonster]

Over de crash kan ik zo weinig zeggen zonder live testcase. Heb zelf nog nooit problemen gehad met de datepicker. Heb je de laatste versies overal van?

Wat betreft de ronde hoekjes. jQueryUI gebruikt hier CSS voor en dat ondersteunt IE niet, dus das gewoon jammer voor IE-gebruikers

edit: ow link stond helemaal bovenin, even kijken..

Ook snap ik niet waarom je dit doet:

code:

$(function(){});

Je kunt volgens mij ook gewoon

code:

(function(){})();

gebruiken als je niet de global namespace wilt poluten.

Omdat dit de functie ondocumentready uitvoert.. wat jij doet is heel wat anders..

Verder: mocht 't allemaal niet lukken; ikzelf gebruik voor dit soort webapplicaties eigenlijk altijd ExtJS. Zit IMHO beter in elkaar en is véél uitgebreider

ExtJS is wel ff wat anders. Dat is een compleet applicatie-framework, niet een dhtml-library voor wat toegevoegde waarde.

De layout gaat alleen over de zeik als ik de calendar wegklik, niet als ik een datum aanklik.

Verder:

- zet je scripts eens OF in de head OF onderaan je body.
- gebruik geen pack-compressie
- crasht het ook zonder de accordion?

[ Voor 65% gewijzigd door Bosmonster op 11-01-2010 17:43 ]

[bindsa]

Bosmonster schreef op maandag 11 januari 2010 @ 17:37:
- zet je scripts eens OF in de head OF onderaan je body.
- gebruik geen pack-compressie
- crasht het ook zonder de accordion?

Ik heb scripts in de head en in de body geprobeerd: Geen resultaat
Zonder de accordion crasht hij ook, het ligt puur aan de datepicker.

[Bosmonster]

Het is voor ons ook een beetje koffiedik kijken zo. Maak eens een minimale testcase. Strip je niet-werkende voorbeeld beetje bij beetje van functionaliteit en kijk wat er overblijft dat nog steeds niet werkt (of juist wel).

[bindsa]

Ok, het is gerepareerd, dankzij Bosmonster, tijdens het strippen van de code kwam ik erachter dat er een niet afgesloten </form> tag stond. Zie mijn beginpost, HTML code regel 14. Nadat ik die tag had gerepareerd waren de problemen ineens verdwenen. Wederom allemaal hartstikke bedankt.

[pieturp]

Fijn dat 't werkt.

<snip> Omdat dit de functie ondocumentready uitvoert.. wat jij doet is heel wat anders..

Kijk, dat wist ik dus niet. Maar goed, onderaan de pagina is die DOM toch al ready.
Over ExtJS; ja dat weet ik ook wel, maar TS bouwt toch ook een applicatie??

[Bosmonster]

pieturp schreef op maandag 11 januari 2010 @ 18:15:
Fijn dat 't werkt.


[...]


Kijk, dat wist ik dus niet. Maar goed, onderaan de pagina is die DOM toch al ready.
Over ExtJS; ja dat weet ik ook wel, maar TS bouwt toch ook een applicatie??

Scripts mogen onderaan in de body, wat aangeeft dat de body zelf nog niet klaar is natuurlijk

Daar heb je het ondocumentready event voor, dat heeft ExtJS ook.

[R4gnax]

pieturp schreef op maandag 11 januari 2010 @ 18:15:
Maar goed, onderaan de pagina is die DOM toch al ready.

Nee, dat is die niet. Zoals Bosmonster al aangeeft: nog niet alle script tags zijn op dat moment geparsed. Wat denk je dat er gebeurt als je bijv. nodes aan het einde van de body gaat toevoegen? Of dynamisch extra script tags gaat injecteren m.b.v. een loader? etc.

Het is in 90% van de gevallen wijzer om netjes alles in een DOM-ready te zetten. Kost je (bijna) niets extra en je hebt tenminste de zekerheid dat je DOM ook écht klaar is om gemanipuleerd te worden.

[pieturp]

Ja, maar die script tags (HTML of dynamisch) include je toch helemaal zelf? Als je niet weet wat er verder nog met je DOM gebeurd snap ik 't punt ook nog wel, ja...

[ Voor 8% gewijzigd door pieturp op 12-01-2010 09:35 ]

[Bosmonster]

pieturp schreef op dinsdag 12 januari 2010 @ 09:34:
Ja, maar die script tags (HTML of dynamisch) include je toch helemaal zelf? Als je niet weet wat er verder nog met je DOM gebeurd snap ik 't punt ook nog wel, ja...

Ik snap je argument niet. Je kunt niet betrouwbaar xbrowser de DOM manipuleren als je niet zeker weet als deze beschikbaar is, punt. Of je nu al weet wat je gaat doen of niet doet helemaal niet ter zake.

JS tegenwoordig vindt bijna altijd unobtrusive plaats, wat betekent dat je deze ondocumentready implementeert in je DOM (manipulaties, events, etc). Je scripts uitvoeren ondocumentready is dus gewoongoed. Dit staat compleet los van scripts eventueel onderin je body zetten, wat puur een performance issue is.