iFinity

Written by:
Thursday, October 06, 2011 1:55 PM 

I recently upgraded the ifinity.com.au site to DotNetNuke 6.0 in a moment of upgrade inspiration.    I won’t say the upgrade went completely smoothly because I had problems with the existing version of the DDR menu that was already in use on the site.  Those problems are yet to be fully resolved but it’s not likely to be a problem that everyone else will encounter.

Further teething issues have dribbled through in the days since the ugprade was done.  I have heavily invested in the use of jQuery and jQuery UI throughout the site, particularly so with the online licensing functions.   Of course, jQuery UI is now a first-class citizen within DotNetNuke and that has caused a few small issues.

Most of the problems thus far have been with the Licensing system, which is all a custom module that I built just for this site. 

The first thing I had to do was fix a bunch of javascript errors that were caused by having duplicate references to two different versions of the jQuery UI library.  For that, I just followed my own advice from this post about working with jQuery UI automatically for DNN 6.

The issue I want to cover in detail with this post is a problem I had with using the jQuery Dialog.  This is used in a couple of places to pop up a modal dialog to obtain more information from a visitor.  The notable problem was in the feature to lookup your existing sales based on your email address, which is accessed through the ‘Don’t know your receipt number(s)? Find them here’ link on the licensing page.

The problem was that the modal page would open up at the bottom of the page, and you had to scroll right down to find it:

It was off the bottom of the page, below where the ‘overlay’ (the grey tinted layer) finished.  This issue was repeated in the other places that I used the dialog throughout the code.

The jQuery code that loads this dialog looked like this:

   jQuery('.findReceiptNumberLink').click(function() {
        //show the find sales by email as a modal div
        jQuery('.findReceiptNumber').show();
        //turn it into a modal dialog : note hides x in title bar on open
        var dlg = jQuery("#findsales").dialog({
            width: 440
                    , modal: true
                    , closeOnEscape: true
                    , closeText: 'Close'
                    , title: 'Find Receipt Number of existing Sale[s]'
        });
        //append to form to allow postback
        dlg.parent().appendTo(jQuery("form:first"));
        return false;

This code is very easy to follow : the code is a click handler for the link, and locates a div on the page with the Id of 'findSales'. It then uses the jQuery dialog function to open this up. The final piece of code appends the dialog into the <form> section of the html DOM so that when the postback button is used for ‘email my sales’ it runs the ASP.NET postback functions.  By default, the dialog() call creates the dialog in the centre of the existing window.

This all worked well in DNN 5, but with the change to DNN 6, jQuery UI is a part of the framework.  I didn’t go too far into the details but the problem seemed to be related to the fact that the dialog box didn’t know where it was supposed to centre itself from.  My guess/hunch/stab-in-the-dark is that the overlay is integrated into the css classes of the framework now, and that the dialog didn’t know about this.

To fix the issue, all I did was change the code slightly, so that the dialog didn’t auto-open, but waited until after the dialog was added to the <form> element before running the ‘open’ routine:

   jQuery('.findReceiptNumberLink').click(function() {
        //show the find sales by email as a modal div
        jQuery('.findReceiptNumber').show();
        //turn it into a modal dialog : note hides x in title bar on open
        var dlg = jQuery("#findsales").dialog({
            width: 440
                    , modal: true
                    , closeOnEscape: true
                    , closeText: 'Close'
                    , autoOpen: false
                    , title: 'Find Receipt Number of existing Sale[s]'
        });
        //append to form to allow postback
        dlg.parent().appendTo(jQuery("form:first"));
        //now open
        dlg.dialog('open');
        return false;

The changes are shown in bold.  The change is to delay the dialog ‘open’ routine until after the dialog is appended to the form element, and then run the open.  Surprise, surprise, this worked straight away:

My guess/hunch/stab-in-the-dark is that once the dialog was being opened as a child of the form element, dark and mysterious CSS forces were read and the position was properly established.

All I know is that it is fixed and I can move on to other things!

The conclusion is that little tweaks like this might be necessary if you have modules that use jQuery UI and are now being used with DNN 6.  I hope this helps someone out.  You might want to go and check your code!

Trackback Print

Tags:

Categories:

Location: Blogs Crafty Code

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Add Comment   Cancel