jQueryUI not working good !!!

Apr 9, 2010 at 12:01 AM

I see there is problem on demo page ...

If You clear cache and reload page You will see for a second original not ui formated tabs div, you will see ul li etc ... !!!

If tabs have content like big photos, tabs will not be formated several seconds and show ul li code ...

I think jquery-ui.js is not loaded well ? it is loaded after page content, i think scripts must be loaded before content !?!?!?


Apr 9, 2010 at 8:28 AM

The scripts and css files are loaded in the head content of the page and are available early enough. This effect is due to the way the widgets are initialized. As in all the demos on the jQuery UI page, the widgets are initialized using the document.ready event. This event fires when the document is loaded, so if the document is large and your connection is slow, it will postpone converting the html structures to the widgets until the event fires. So far, this has not created any problems for any of my products, but I will consider adding the behavior to use inline script blocks placed directly after the rendered html structure instead of the document.ready event. This should speed things up in large documents. Thanks for the info!

Apr 9, 2010 at 8:49 AM

There may be drawbacks when using the inline script block. I posted a question aiming at this issue in the jQuery forums, in which I explain a possible problem when not using the document.ready event. You can find it here: http://forum.jquery.com/topic/best-practice-for-initializing-widgets. I'll get back to this, when I receive a satisfactory answer. For now, I do not consider this a bug in the jQUI-DNN Integration package, but a minor drawback in jQuery UI itself.

Apr 9, 2010 at 9:11 AM
I also use document.ready function, i can't go to production when this problem was not resolved, my customers are tells me about problem ...
Apr 9, 2010 at 10:36 AM
Edited Apr 9, 2010 at 10:37 AM

I just created a new release (jQuery Core module 0.6.0), that upgrades to jQuery 1.4.2 and adds a property named UseInlineBlockInitialization to the Tabs control. If you set this to true (like in the new example .ascx), the tabs widget will be initialized with a script block instead of the document.ready event. I believe, this has sped up the initialization significantly. Nonetheless, if your Tabs contain a lot of content, you will still see the basic rendering before it is changed to the tabs style. This is a "limitation" of jQuery UI, though. Please try it out and tell me, if this solves your problem.

Best regards,