Extreme ASP.NET Makeover: jQuery - jQuery UI In ScrewTurn Wiki

Download

Right click “Save as…”

  • Mid Quality WMV (Lo-band, Mobile)
  • MP3 (Audio only)
  • MP4 (iPhone, Android)

Integrating jQuery UI into ScrewTurn Wiki

You’ve probably already guessed that ScrewTurn Wiki has an ugly confirmation dialog somewhere. The place to find it is in Edit.aspx. Simply log in as the admin (the default username/password is admin/password) and click the “Edit this Page” link. Click on any link to navigate away from the Edit.aspx page and you’re presented with the box shown below.



This confirmation dialog is displayed by hooking the window’s onbeforeunload event and passing a warning message to display:

function __UnloadPage(e) { 
if (!submitted) {
e.returnValue = " ";
}
}

ScrewTurn Wiki passes a single space as the warning message, which is the empty line that appears between “Are you sure…” and “Press OK to continue…” in the confirmation dialog. The onbeforeunload event is not a standard HTML DOM event and has problematic support across browsers. ScrewTurn Wiki’s event hook mechanism only works on Internet Explorer and Firefox.

We’ll replace this unsightly confirmation dialog using jQuery UI’s Dialog widget. First, we can simply delete the onbeforeunload-related JavaScript from Edit.aspx and Edit.aspx.cs. Next, we’ll download a customized version of jQuery UI. (There is no option to download an uncustomized version because at a minimum, you need to select a theme.) From the jQuery UI download page, you can choose your desired components and a theme. We’ll use the UI Lightness theme, as it fits with the overall look and feel of ScrewTurn Wiki’s Default and Elegant themes.

The downloaded zip file contains quite a few files, but we’ll only need the contents of the js and css folders. (The development-bundle folder contains demos, documentation, un-minified CSS and JavaScript, and development tools. If you want to learn how jQuery UI works, this is a good place to look.) The js folder includes jquery-1.3.2.min.js and jquery-ui-1.7.1.custom.min.js and both files can be added to ScrewTurn Wiki’s JS folder. The css folder contains theUIi-lightness theme, which can be added to ScrewTurn Wiki’s Themes folder. If you want to use multiple jQuery UI themes on your Web site, only the contents of the css folder changes when switching themes. Jquery-ui-1.7.1.custom.min.js remains the same, so long as you don’t change the selected components.

To use jQuery UI, we need to add references to the jQuery and jQuery UI JavaScript files as well as the jQuery UI theme style sheet. ScrewTurn Wiki automatically includes all JavaScript files in the JS directory. So we need only add the link to the CSS file in MasterPageSA.master, Edit.aspx’s master page:

<link rel="stylesheet" type="text/css" 
href="Themes/ui-lightness/jquery-ui-1.7.1.custom.css" />

In Edit.aspx, we will call the enablePendingChangesWarning JavaScript function, which we will define in ScrewTurnWiki.js. By placing the function in ScrewTurnWiki.js, we can make this functionality reusable across the application. The dialog itself is defined by a simple div tag:

<div id='confirmDialog' title='Confirm'> 
<p>
<span class='ui-icon ui-icon-alert'
style='float:left; margin: 0 7px 20px 0;'></span>
Are you sure you want to abandon your changes?
</p>
</div>

The elements of the dialog should be immediately obvious, except for the span tag. The span with CSS classes is the way that jQuery UI defines themable icons. So, “ui-icon” specifies that this span is an icon and “ui-icon-alert” selects a particular icon.

Now we could insist that any page that wants to display a pending changes warning has to include this <div id=’confirmDialog’/> on the page. This would error prone and jQuery provides a better way. The first step in enablePendingChangesWarning is to use jQuery to manipulate the HTML DOM and append the confirmDialog div to the body:

$('body').append("<div id='confirmDialog' title='Confirm'><p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>Are you sure you want to abandon your changes?</p></div>");

Once the added, we need to call the jQuery UI dialog function to change our ordinary div into a jQuery UI Dialog widget, as shown below.

$('#confirmDialog').dialog({ 
autoOpen: false,
modal: true,
overlay: { backgroundColor: '#000',
opacity: 0.5 },
buttons: {
Ok: function() {
var href = $(this).dialog('option', 'href');
window.location.href = href;
},
Cancel: function() {
$(this).dialog('close');
}
}
});

We’re creating an initially hidden “autoOpen: false” modal dialog. Notice the button definitions. Cancel simply closes the dialog. We’ll come back and talk about the OK button in just a second.

The dialog has to be displayed in response to the user navigating away from the page unintentionally. This is going to happen when a link is clicked. We could manually hook up the onclick events on the page, but this would again be error prone. jQuery once again provides us with a better way:

$('a').click(function(event) { 
event.preventDefault();
$('#confirmDialog').dialog(
'option',
'href',
this.href).dialog('open');
});

We use jQuery to select all anchors (<a/>) on the page and register a click event handler for them. When the href is clicked, the confirmDialog is displayed. Event.preventDefault prevents the default action of following the link from occurring. Otherwise, the link would be followed as soon as the confirmDialog is displayed. We then pass the href of the anchor link to the confirmDialog as an option. Now you can figure out what the OK button does. If OK is pressed, this href is retrieved from the dialog’s options and used to set the window.location.href, which causes the browser to navigate to the destination page. This gives us a confirmation dialog that fits into the site’s theme, as we see below.



Notice the greyed out page effect behind the dialog, which was achieved using the opacity overlay. We only have one minor problem to deal with. The edit page has a few anchor tags that don’t navigate away from the page, but instead refresh the page attachments list or show a list of content templates. We don’t want to display the Confirm Dialog for these links, which look like <a href=’javascript:__doPostBack(‘mangledControlName’,’’). Rather than simply selecting all anchor tags, we can use an advanced jQuery selector to filter out the undesired elements:

$('a:not(a[href^=javascript])').click(
function(event) {
event.preventDefault();
$('#confirmDialog').dialog('option', 'href',
this.href).dialog('open');
});

Note that a[href^=javascript] selects all anchor tags whose href attribute starts with “javascript”. Also, $= matches attributes ending with a particular string. (The use of ^ and $ come from regular expressions where ^ denotes the start of the line and $ the end.) The :not filter removes the href=javascript anchors from the collection of all anchors, which were selected with the first “a.” You can find a list of all selectors in the jQuery Selector documentation.



Other videos from this article

· Improving User Interaction

· jQuery UI In ScrewTurn Wiki

· Re-Theming ScrewTurn Wiki

· jQuery UI Themes in ScrewTurn Wiki

· Applying ThemeRoller to ScrewTurn Wiki

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd898316.aspx

Tags:

Follow the Discussion

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.