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.

Comments (1)