July 06, 2012

Creating Simple Re-Usable Confirmations in DotNetNuke Skins

As part of the IowaComputerGurus site redesign that I just launched earlier this evening I was looking for a simple "no hassle" way to add a confirmation to a link before downloading.  Historically I created a module to manage this and the module managed those links.  However, I wanted to find something more flexible so that I can put my download links wherever I want, in any Text/HTML module, on any section of the site.  Amazingly I was able to do this with two lines of JavaScript in my skin file!

The Goal

My goal was to ensure that anytime someone was downloading a piece of software from my site that they would see a message: "By clicking "Yes" I agree to all Software Agreement terms as set forth on this site."  With the Software Agreement terms being a hyperlink.  If the user clicks "Yes" want the file to download, if they click "No" nothing should happen.

The Solution

As part of the DotNetNuke 6.x UI enhancements a number of jQuery plugins were introduced and there have been plenty of examples on how to use these in a module, but never any real discussion on using them directly in a skin. 

Well, amazingly it is VERY, very simple to get this working.  Most skins that I have worked with recently already have a jQuery $(document).ready(function() {}); section in them to do some sort of setup.  All we need to do add two lines to attach our confirm dialog.

First we need to identify how a link will be identified to need the confirmation.  In my case I settled on adding a CSS class of "licenseConfirm" to the link.  Once we know this we can add the needed JavaScript.

//Setup Message Text
var confirmMessage = 'By clicking "Yes" I agree to all 
<a href="/legal/software-agreement" target="_blank">Software Agreement</a> 
terms as set forth on this site.';

//Add it to any links needed
$('a.licenseConfirm').dnnConfirm({ text: confirmMessage });

In the above example you can see that I create the message that I want to display in the first line. This using a jQuery selector I find all links with a class of licenseConfirm and add the confirmation message to it. In the end, we get the effect that you can see on the Expandable Text/HTML and other pages when clicking the "Download" buttons at the bottom of the page.

Conclusion

Although not the best solution for everything.  I can see adding snippets like this to certain skins as a real benefit for confirmations and similar processes that should be consistent across a site.

tags: DNN, Quick Tips
comments powered by Disqus

Content provided in this blog is provided "AS-IS" and the information should be used at your own discretion.  The thoughts and opinions expressed are the personal thoughts of Mitchel Sellers and do not reflect the opinions of his employer.

Content Copyright

Content in this blog is copyright protected.  Re-publishing on other websites is allowed as long as proper credit and backlink to the article is provided.  Any other re-publishing or distribution of this content is prohibited without written permission from Mitchel Sellers.