confirm_link.js

$().ready(function(){

	/*
		confirmation link logic

		this allows a btn with confirmation and confirm-btn classes attached 
		to confirm before calling the btns main location

		on click of buttons with confirmation class
			- does it have the confirm btn class (since there's also a confirmed-btn class)
				- prevent the default location for the link
				- add the confirmed-btn class
				- remove the confirm-btn class (confirmed vs confirm)
				- store the current text of the button into data-original-text
				- set the text to "Confirm " + current_text_value. ex: Confirm Delete
				- set a 5 second timer
					- ater timer
						- add the confirm-btn class
						- remove the confirmed-btn class
						- set text back to it's original value

		If, once the link is clicked the first time, they then click it again,
		the default href will occur. If they wait 5 seconds, it reverts back to 
		confirm-btn class which calls e.preventDefault() to prevent the default href 
		from occurring 

		- @collin 2018-02-15

	*/
	$('.confirmation').on('click', function(e){ 
		if($(e.currentTarget).hasClass('confirm-btn'))
		{
			e.preventDefault(); 
			$(e.currentTarget).addClass('confirmed-btn');
			$(e.currentTarget).removeClass('confirm-btn');
			$(e.currentTarget).data('original-text', $(e.currentTarget).text());
			$(e.currentTarget).text("Confirm " + $(e.currentTarget).text());

			var currTar = $(e.currentTarget);

			setTimeout(function(){
				currTar.addClass('confirm-btn');
				currTar.removeClass('confirmed-btn');
				currTar.text($(e.currentTarget).data('original-text'));
			},5000);
		}
	});
});

This snippet creates links that require a confirmation click before proceeding. Useful to help prevent accidental deletes without requiring an entire view or modal dialog to confirm the action as shown below. The links href will only be redirected to only after confirmation click.

This works well since it can fail gracefully in noscript scenarios. The user simply wont get the confirmation behavior, but the default href of the link will of course be called.

Also if the confirmation is never clicked, then after 5 seconds it reverts back.