I have always considered myself to be quite client-side challenged. Having been soured to the thought of JavaScript by all the browser specific code I used to have to write years ago I swore off it and took to server-side development and never looked back. After a year’s hiatus doing WPF programming, I’ve recently found myself back in the thick of web development with new patterns and technologies at the forefront, namely the MVC framework and the ubiquity of jQuery. Before I begin this post I’d like to say that jQuery is, well, everything that is good about client-side programming in my opinion.
So recently I found the need to roll my own dirty form warning mechanism on a site I was working on. These forms contain quite a lot of fields and so there is gratuitous use of the TabControl from the Microsoft AJAX Control Toolkit. One of the requirements was to alert the user to changes made on one of the tabs and offer the option to save the changes before allowing the user to change tabs. Initially I thought that this task would be a breeze, what with the OnClientActiveTabChanged handler on the TabContainer control and all. Then the sad reality dawned on me. There is no way to cancel the changing of tabs from the client side. Like a freight train full of explosives it barrels on, destroying my workflow and with it any chance I’ll get sleep. But all is not lost, because with a few JavaScript ninja moves, some nifty jQuery (optional) and no personal life there is a clean solution to this problem, So what’s the answer? Read on for the details. More...