Feed has moved.

I have finally got around to completing the move to WordPress:

www.f5todebug.wordpress.com

This will be my final post from the blogger account.

I have moved all articles over to the new site so please subscribe to the feed over there to keep up to date.

Thanks for reading!

Best Practice: Using the JQuery dialog widget in a custom web part

If you have played around with the dialog widget in JQuery UI you may have noticed a couple of things.

1. Like a lot of javascript libraries it messes with the DOM (Document Object Model) at what might be unexpected times and therefore it does not play well with SharePoint.
   




2. It breaks the web part verb menu (the 'edit' drop down menu)

Actually it (like a lot of the JQuery UI widgets) is an incredibly powerful tool to your client side arsenal, and as long as you adhere to some best practice it will work perfectly happily within SharePoint, or any other ASP.Net site.

1. It messes with the DOM.

Specifically it does not play well with the ASP.Net page post back model. This is fairly well documented across the interweb (although the actual solution is not).

The dialog widget is initiated via code similar to this:

$('#dialog').dialog();

When JQuery sees this it initiates the widget and actually moves your entire div tag to the root of the DOM (see screenshot below). Therefore outside of the form tag. So any ASP.Net controls which you may have in this div will not be included in any post backs therefore none of their events will fire.

Never fear however as this is easily fixed by moving the parent element of your div, which will be another div which is created by JQuery and putting this at the root of the form instead (see code sample below).

2. It breaks the web part 'edit' menu.

Actually it doesn't. But if you have followed some code examples that are out there then it might. Essentially it may mess with this if your call to initiate the dialog is happening before the page has entirely loaded.

Fortunately JQuery has a handy way of ensuring that no matter where your code is defined on the page it will only run when the page has loaded up. This is simply accessed using:

$(document).ready();

Any function supplied to this method will be loaded in memory and run when the page has finished loading. How great is that!

As long as you follow these two items of best practice you should have no problems using the JQuery dialog widget from within SharePoint.

Code

The following code example is how I would use the dialog widget. At some point you need to run the initiateModalDialog method passing in the id of the div to use as a dialog. This will then run when the page is loaded and will initiate your dialog.

When you want to show it then call openModalDialog and optionally (because JQuery will render a nice close button in the top tight hand corner) you could call closeModalDialog to close it.

Note: If you are using this within a web part then make sure your selector (the id of your div) is unique to your web part in case you have multiple web parts on the same page.

function initiateModalDialog(selector) {







//initiates the dialog when the page has finished loading



$(document).ready(function() {    



    $('#' + selector).dialog({   



        autoOpen: false,   



        bgiframe: true,    



        draggable: false,   



        width: 600,   



        resizable: false,   



        modal: true,   



        show: 'slide' 



    });  



}); 



}







//Opens the selected div as a modal dialog



function openModalDialog(selector) {



             



    //Opens the dialog



    $('#' + selector).dialog('open');           







    //Appends the dialog to the ASP.Net form to allow postbacks



    $('#' + selector).parent().appendTo($("form:first"));   







}    
 












//Closes the selected div dialog



function closeModalDialog(selector) {           



    $('#' + selector).dialog('close');  



}

Obviously the options which are passed to the initiation method such as 'draggable' and 'resizable' are up to you, but for this to work you must set autoOpen to false otherwise your dialog will open straight away (unless that is what you intended of course).

Links

JQuery UI dialog widget documentation

Inside the European SharePoint Best Practices Conference

I am currently attending the European SharePoint Best Practices Conference at the Queen Elizabeth Conference Centre in London. So far I have attended several of the sessions on the developer track and have been surprised by the quality of both the presenters and the quality of advice on offer.

The web part development session, hosted by Todd Bleeker served as a good reminder of the topics covered in his course (which I took last year), but also he covered off some new issues and points of best practice.

The SharePoint Cowboy (Eric Shupps) and Andrew Connell have also given fascinating and insightful sessions on Custom Site Definitions and Field Controls/Web Parts respectively, both highlighting do's and dont's and areas that are likely to trip you up.

The 'rose tinted' views of the presenting MVPs and experts is one thing, but to actually get to share issues and problems with others dealing with the realities of trying to develop and deploy custom applications in SharePoint is much more revealing and insightful.

So far this has been an enjoyable experience. I hope to post more detail later, but for now its fair to say I am suitably impressed. Obviously the free beer and casino last night helped! Hats off to Steve and the guys at Combined Knowledge for stepping up and organising this to ensure that the UK has a decent SharePoint conference which delivers great value for money.

Follow the updates from the conference on twitter by tracking the #spbpc hashtag.