Add confirm dialogs to code in hindsite

Explanation:

NOTE:
The solution described here is probably not the recommended way to deploy confirmation  
dialogs. You should think about this upfront during the analysis/design phase for your application.

I came up with this  *workaround* when confronted with a clients legacy code,  littered  
with user interactions that deserved a confirmation. Rewriting the code would take to long and  
would further 'spaghettize' the given code, so here you go.


Demo

Do it !

Confirm that you want to do this ...

          
          Problem:

          In given legay code, instrument html elements having the onclick attribut refering to dangerous functions  with
          confirm dialogs, before performing the action.

          Example:
          
          <a class='doit' href='changeSalary.html'>Do it !</a>
          <button id='b1'  onclick='deleteCustomer()'>Delete this customer </button>
          
          Solution:

          Add or extend the class list of the html elements in question with a dummy class need-confirm like :
          
          <a class='doit need-confirm' href='changeSalary.html'>Do it !</a>
          <button id='b1' class='need-confirm' onclick='deleteCustomer()'>Delete this customer </button>
          
          Add:
          
          <script src='addConfirm.js'></script>
          <script>addConfirm()</script>
          

          High level of how it works:

          Within addConfirm() all elements with a class need-confirm will be located and substituted by a clones.
          Such a clone will capture the 'onclick' event and delegate it first to the confirm dialog of your choice.
          If the confirmation is positiv/yes the 'onclick' event is fired again but this time the event is delegate to the original
          node, that has the reference to the action to be executed.

          For more details please look into the source for addConfirm.js