Skip to main content

How to use jQuery to disable a hyperlink image on click in an ASP.NET MVC 2 View

In one of my recent projects, my view displayed a table of hardware alerts for set of monitored devices. On any of the alerts, the user had three potential actions: close, initiate a chat session, or email tech support.

The latter two actions are pretty simple, as they are just hyperlinks that open in a new window. Close Alert, on the other hand, is an MVC ActionLink that goes back to Alert/Close/{Id}.

The problem with this function is that it's not re-entrant. User testing indicated that some people are so accustomed to double-clicking that they would inadvertently try to close the same alert twice. QA asked me to come up with a solution.

Yes, I know I should also guard against this in the controller. However, trying to close an alert doesn't cause any data corruption (it just doesn't work and the user gets an ugly error message). The issue is entirely one of user-experience. Because of that, and the fact that I needed something quick, I turned to jQuery. Our site makes heavy use of jQuery, so JavaScript is already a requirement.

Here is the final code I added to the page.
$().ready(function () {
    $('.closeAlertButton').click(function () {
        $(this).fadeTo(0, .5);
        $(this).unbind("click");
        $(this).click(function () {
            return false;
        });
        return true;
    });
});
Looking at the code line by line:
  1. The first thing you'll notice is that we run this code after the page has finished loading.
  2. The next line sets up a click event handler for all elements with the "closeAlertButton" class, which happens to be all of my "Close Alert" hyperlink images.
  3. The click event handler fades the image, making it appear disabled.
  4. It then unbinds the existing click handler so that additional clicks won't call back in this function.
  5. Then it adds a new click handler that only does a return false. This prevents the hyperlink from working.
  6. Finally, the existing click event handler returns true, allowing the hyperlink to do its thing, which is to cause the Alert/Close/{Id} action to load.
The Alert/Close/{Id} action refreshes the page, so I don't have to worry about cluttering up the browser with a bunch of disabled image buttons.

There are other ways I could have done this. One thought I had was simply removing the hyperlink target. I probably should use jQuery to call the Alert/Close/{Id} action asynchronously, without a full page load, but I'll still need to prevent multiple submissions. Perhaps displaying a modal "progress" dialog would be appropriate. The solution presented here worked for our purposes, is relatively clean, and has minimal impact to our existing code base. Furthermore, it is self-contained enough to be a reusable pattern if we need it on other pages. I post it here in the hopes that it might be of some use to others.

Comments

Popular posts from this blog

How to copy your Frozen Free Fall progress to a new phone

It's happened to all of us. You are about to get a branch new smartphone, when it hits you. You're on level 250 of Frozen Free Fall. If you get a new phone, you'll lose all of that progress! Ok, admittedly this isn't the most pressing problem of our time, but it's annoying. So today I decided to do something about it.

I have a Samsung Galaxy S4 (Android), and just received an iPhone 5c. Before you bash me on my phone choice, let me explain that the iPhone is provided by my employer at no cost to me. Now you may proceed to bash me for putting games on my work phone. 
First step: Frozen Free Fall had already been installed on both devices. Next, using the Astro File Manager on my Galaxy, I searched and found the Frozen game save stored in /storage/sdcard0/Android/data/com.disney.frozensaga_goo/files/user.dat. I imagine it will be in the same location on any Android phone. If not, just look for user.dat in a folder with a similar name. So, using a USB cable and the A…

Ionic vs. Bootstrap - for a Web App

Ionic 1.x vs Bootstrap 3.x for a Web AppI was recently asked at work to come up with a comparison between Ionic Framework and a more traditional Angular/Bootstrap combination to create a web app. The application will primarily be used in a desktop web browser (probably Chrome or IE). There are also some use cases where it will be accessed from Safari on an iPad. However, this is purely a web; there are no plans to install the app onto the iPad as a hybrid app. Thus, recommending Ionic to build the UI hadn't occurred to me until the request was made.

This is even more surprising in that I recently published a Pluralsight course on Ionic Framework 1. It should have been the first thing that crossed my mind.
One constraint is that currently only Angular 1.x and Bootstrap 3 are authorized web technologies. Ionic 1.3 was recently approved, but not Ionic 2, Angular 2, or TypeScript yet.
Given those constraints, herein is my attempt at coming up with reasons to use (or not to use) Ionic…

Windows 10/Server 2016 100% Disk on BootCamp and Parallels!

I've been wrestling with Windows on my 2014 Mac Mini for more than two years. Soon after I bought the Mac, I made a 200GB BootCamp partition and installed Windows 7. I also bought Parallels 10 Desktop and pointed it at the BootCamp partition. It was great. I had a convenient VM when I needed something quick. I also had BootCamp when I needed native performance. Not long after that, I upgraded it to 8.1. Then sometime later, Windows 10.

I don't remember exactly when it happened, but one day I fired up Parallels and my entire system ground to a halt. Shutting down the virtual machine caused everything to go back to normal, so I figured the problem was with Parallels. So I upgraded it. Same problem. I made sure Windows was up-to-date, thinking that maybe the Windows Update service was going nuts. Nothing changed. Whenever Windows was running in Parallels, the Task Manager showed the disk activity pegged at 100%.

I tried all sorts of online solutions, but none worked. On a whim, I…