jQUI-DNN on DNN v6.01

Jun 21, 2012 at 7:09 AM

Is there a version of jQUI-DNN that is compatible with v6.01 of DNN?

My host settings shows the following:

<label id="dnn_ctr327_HostSettings_plJQueryVersion_label" for="dnn_ctr327_HostSettings_jQueryVersion"> Installed jQuery Version:  </label>1.6.4
<label id="dnn_ctr327_HostSettings_plJQueryUIVersion_label" for="dnn_ctr327_HostSettings_jQueryUIVersion"> Installed jQuery UI Version </label>: 1.8.16
Or can you give direction on where to go in the code to modify this?
The issue I have is on a page that has the jQUI datepicker control installed, the Module Settings menu is disabled. The pop-up comes up but the spinner just spins and nothing else happens.  I can click the X to close the pop-up and return to the page and other functionality seems to be OK.  But, module settings are pretty critical.
FireFox Error console shows: a.ownerDocument is undefined  with a file reference of http://<domain>/DesktopModules/HeroldITJQuery/js/jquery-1.5.2.min.js Line 16.
Any thoughts or ideas?
Jun 21, 2012 at 7:18 AM

Additional information:  Pretty much all pop-ups on the page are disabled.  I just tried getting at the Page properties and it's not working either.

Jun 21, 2012 at 9:43 AM

Hi gigipayne,

I'm sorry to say, there is currently no version of jQUI-DNN for DNN 6. The current state was built for DNN 4, which did not deliver jQuery UI. I can try to create a build of the library, that only contains the controls without registering any javascript references with the page, to enable you to keep using the controls in DNN 6. Just let me know, and I'll get on it asap.

Cheers,
Christoph

Jun 21, 2012 at 10:17 AM

Hi again,

I just finished packaging a new version 0.7.1. You can grab it from the repository under the packages folder. The only change is that all controls now have a property "AutoRegister", that will control automatic registration of jQuery js files on the page. The default is false so this is a BREAKING CHANGE for older DNN versions. It should get your DNN 6 up and running, though. I have not tested it myself, so proceed at caution. And please let me know, if it works for you.

Thanks,
Christoph

Jun 21, 2012 at 11:34 AM

Just to clarify: The default of "false" is what you need, so you should be able to simply install the newer module version without any changes to your module's code whatsoever.

Jun 21, 2012 at 3:57 PM
Edited Jun 21, 2012 at 3:58 PM

Thank You for the quick reply!!!

The updated library resolved the issues with the popups.  I can now get to both the module and page settings.

However, the calendar on the datepicker no longer has any styling on it.  The text is overlayed on the page but there is no styling so it's very difficult to read.  Do I need new theme files?

Thanks again!

Jun 21, 2012 at 4:09 PM

Are you using an explicit theme? If so, the theme must be registered. This is also not done automatically anymore. But you can do it manually in your code behind by calling the appropriate overload of JQueryUI.RegisterJQueryUITheme(...). The easiest one is to just specify the page and theme name. It is also implemented as an extension method, so you can call this.Page.RegisterJQueryUITheme(...).

Please let me know if it works for you.

Jun 21, 2012 at 4:35 PM

No, I don't do anything to the theme I just use the default. I was planning to add the ability to pick a theme but I want to get the default working first.

I notice the css file in DesktopModules\HeroldIT.JQuery\css\smoothness is named jquery-ui-1.8.12.smoothness.css.  Could it be related to the different version of jQuery?  Should the file be someplace else now that we're using the DNN default?

Sorry, I'm just getting started with jQuery and themes.

Thanks.

Jun 21, 2012 at 5:04 PM

Ok, I just had a quick look at how DNN handles the jQuery UI styles. They are integrated into the default.css and scoped, so they don't collide with other jQuery UI styles, which is good. In your case, you are now missing these styles, since the datepicker is not used in DNNs css scope. Actually, I couldn't even find the styles for the datepicker, so you'll have to include them anyways.

Long story short: You will have to register at least one theme for the controls to work. The default theme of the integration package is currently "smoothness", so in the OnInit method of your UserControl (override it, if necessary), simply add a call to JQueryUI.RegisterJQueryUITheme(this.Page, "smoothness") and you should be fine. The version number is taken from the jQUI-DNN build, so it should match the included css file. It may not be the current stylesheet for the used jQuery UI version of DNN, but the styles have not changed much or even at all in the last versions, so things should work.

When you decide to use a different theme, simply replace the "smoothness" parameter with the theme you wish to use.

Again, please let me know if this works.

Jun 21, 2012 at 7:39 PM

You are AWESOME!

Adding the call to the initialize method of the page worked.  The only difference from your suggestion is I had to actually specify the folder for the theme by using one of the overloaded method signatures. I also moved it to the website root to make it easier to find and keep updated.

HeroldIT.Dnn.JQuery.UI.JQueryUI.RegisterJQueryUITheme(Me.Page, "smoothness", "~/Themes/smoothness/")

Anyway, it's all working now on DNN v6.01

Thanks a bunch for your help and promptness :)

Jun 21, 2012 at 7:44 PM

You're welcome. I'm just glad someone besides me is actually using this library. :-)

I'll take the new version for a test run and create a release package of the new version in the next few days.