jQuery ConfirmIt Showcase

What's the easiest way to get a confirmation?

The simplist way is to select your element, then call confirmit. This will attach to the "click" event by default and display a default confirmation message of "Are you sure?".

				$("#example-1").confirmIt();
			

What if I want to customize the confirmation message, but still keep the implementation as simple as possible?

If you want to stick with JavaScript, you'd use the same approach as above, this time passing in your custom confirmation message as a single argument to the confirmit plugin.

				$("#example-2a").confirmIt('Now, wait a minute!');
			

You can also define a custom message in 1 of 2 ways on the element itself. Either in the "class" attribute in the format: class="confirmit {message: Are you positive???}"

				$("#example-2b").confirmIt();
			

Or, using the HTML5 "data" attribute, in the format: data-confirmit-message="click OK to continue..."

				$("#example-2c").confirmIt();
			

How can I remove a confirmation once it's been added?

Easy! You just pass the 'destroy' argument to the confirmit plugin on the element that you want the confirmation removed from.

				$("#example-3").confirmIt();
			

				$('#unconfirm-example-3').click(function(){
					$("#example-3").confirmIt('destroy');
				});
			

How can I specify different events to trigger a confirmation?

Just pass the optional "triggered_by" setting to the confirmit plugin and use event names that jQuery understands. The default trigger is 'click'.

				$("#example-add").confirmIt({
					triggered_by: 'mouseup'
				});
			

Does confirmit automatically defer all events that are bound to an element?

It sure does. When a confirmation is triggered, any other bound events which would fire are deferred until the confirmation is approved.

				$("#example-eventsequence").confirmIt({
					triggered_by: 'mouseup',
					message: "Continue processing?"
				});
			

What about elements that are added in the future? ie: Ajax injected elements. Can confirmations be applied to those as well?

Absolutely. Just instantiate a ConfirmIt instance as you would normally, within the injected code.

				$('#spawner').click(function(e){
					var spawn = document.createElement('div');
					spawn.className = "offspring confirmit {message: Really?}";
					spawn.innerHTML = 'clicky thing';
					$(spawn).confirmIt({
						triggered_by: 'click'
					});
					$('#spawn-container')[0].appendChild(spawn);
					$(spawn).click(function(){alert("Hi! Says the spawn.")});
				});
			

Does it matter what order I add a confirmation to an element vs. the order I bind events to that same element?

Nope. "Late-binding" is supported.

				$("#example-late-undo").confirmIt({
					message: "Are you sure you want to undo your changes?"
				});
			

How can I prevent anchor elements from linking off to a URL until a confirmation is approved?

Same as usual. However, ConfirmIt is best used by working with triggers such as "click" or "mousedown" in this case. Internally, the plugin assumes that if you are confirming an element that links-off to a URL, then you are using an Anchor element to do so.

				$("#example-outboundlink").confirmIt("Are you sure you want to leave this site?");
			

How can ConfirmIt warn users if they attempt to navigate away from a page where they have entered form data?

When you specify triggered_by:'unload', confirmit will watch all inputs within the specified form for a change. When a change is detected, a confirm prompt will appear if the user attempts to leave the page either by clicking the back button, refresh, clicking a link on the page, or closing the window. The confirm will not appear if the user submits the form.

				$("#myForm").confirmIt({triggered_by:'unload', message:'This is a ConfirmIt leave page warning.'});
			

				$('#unconfirm-form').click(function(){
					$("#myForm").confirmIt('destroy');
				});