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 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.