Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nightowl888/jquery.dirtyforms.dialogs.bootstrap.dist

A jQuery Plugin module to enable automatic Bootstrap Modal dialog support when using jQuery Dirty Forms.
https://github.com/nightowl888/jquery.dirtyforms.dialogs.bootstrap.dist

Last synced: 5 days ago
JSON representation

A jQuery Plugin module to enable automatic Bootstrap Modal dialog support when using jQuery Dirty Forms.

Host: GitHub
URL: https://github.com/nightowl888/jquery.dirtyforms.dialogs.bootstrap.dist
Owner: NightOwl888
License: mit
Created: 2015-07-16T18:50:48.000Z (over 9 years ago)
Default Branch: master
Last Pushed: 2020-07-03T19:57:54.000Z (over 4 years ago)
Last Synced: 2024-10-11T09:35:30.801Z (about 1 month ago)
Language: JavaScript
Homepage: https://github.com/snikch/jquery.dirtyforms
Size: 19.5 KB
Stars: 5
Watchers: 4
Forks: 2
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

[![jquery-dirtyforms MyGet Build Status](https://www.myget.org/BuildSource/Badge/jquery-dirtyforms?identifier=193d9dab-a526-484e-8062-9a960322f246)](https://www.myget.org/)

![Dirty Forms Logo](https://raw.githubusercontent.com/snikch/jquery.dirtyforms/master/branding/dirty-forms-logo.png)

# jquery.dirtyforms.dialogs.bootstrap

This is a dialog module for the [jQuery Dirty Forms](https://github.com/snikch/jquery.dirtyforms) project.

## Purpose

This module causes Dirty Forms to use Bootstrap Modal as its dialog when the user attempts to leave the page by clicking a hyperlink (but not when interacting with the navigation buttons of the browser).

> Only 1 dialog module can be used by Dirty Forms at a time. The default behavior without this package is to use the browser's built in dialog that is fired by the `beforeunload` event.

## Prerequisites

Prerequesites must be included in this order:

- [jQuery](http://jquery.com) (>= 1.9.1)
- [bootstrap](http://getbootstrap.com/) (>= 3.0.0) - both the CSS and JS
- [jquery.dirtyforms](https://github.com/snikch/jquery.dirtyforms) (>= 1.0.0)

> If you are using a [Package Manager](#package-managers), these dependencies will be installed automatically, but depending on your environment you may still need to add references to them manually.

## Download & Installation
There are several different ways to get the code. Some examples below:

#### CDN
The Bootstrap Modal dialog module is available over jsDelivr CDN and can directly be included on every page.
```HTML

```

jsDelivr also supports [on-the-fly concatenation of files](https://github.com/jsdelivr/jsdelivr#load-multiple-files-with-single-http-request), so you can reference only 1 URL to get jQuery, bootstrap, jquery.dirtyforms, and jquery.dirtyforms.dialogs.bootstrap in one request.
```HTML

```

#### Self-Hosted
Download and save one of two available files to include the Bootstrap Modal dialog module to your page, either the [latest distribution](https://raw.githubusercontent.com/NightOwl888/jquery.dirtyforms.dialogs.bootstrap.dist/master/jquery.dirtyforms.dialogs.bootstrap.js) or the [latest minified](https://raw.githubusercontent.com/NightOwl888/jquery.dirtyforms.dialogs.bootstrap.dist/master/jquery.dirtyforms.dialogs.bootstrap.min.js) version.
```HTML

```

You can also conveniently get all of the latest Dirty Forms files in one [Zip Download](https://github.com/NightOwl888/jquery.dirtyforms.dist/archive/master.zip).

#### Package Managers
The Bootstrap Modal dialog module is even available through [NPM](http://npmjs.org), [Bower](http://bower.io), and [NuGet](https://www.nuget.org/). Just use one of the following commands below to install the dialog module, including all dependencies.

[![NPM version](https://badge.fury.io/js/jquery.dirtyforms.dialogs.bootstrap.svg)](http://www.npmjs.org/package/jquery.dirtyforms.dialogs.bootstrap)
[![Bower version](https://badge.fury.io/bo/jquery.dirtyforms.dialogs.bootstrap.svg)](http://bower.io/search/?q=jquery.dirtyforms.dialogs.bootstrap)
[![NuGet version](https://badge.fury.io/nu/jquery.dirtyforms.dialogs.bootstrap.svg)](https://www.nuget.org/packages/jquery.dirtyforms.dialogs.bootstrap/)

[![NPM](https://nodei.co/npm/jquery.dirtyforms.dialogs.bootstrap.png?compact=true)](https://nodei.co/npm/jquery.dirtyforms.dialogs.bootstrap/)
```
// NPM
$ npm install jquery.dirtyforms.dialogs.bootstrap

// Bower
$ bower install jquery.dirtyforms.dialogs.bootstrap

// NuGet
PM> Install-Package jquery.dirtyforms.dialogs.bootstrap
```

## SourceMaps

A [SourceMap](https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit?hl=en_US&pli=1&pli=1) file is also available via CDN or your favorite package manager.

#### CDN

```HTML

```

#### Package Managers

NPM, Bower, and NuGet will install the SourceMap file into the destination directory.

```
jquery.dirtyforms.dialogs.bootstrap.min.js.map
```

## Usage

This dialog module is automatic. Simply include the reference to the dialog module after the [prerequisites](#prerequisites) and use Dirty Forms [as per the documentation](https://github.com/snikch/jquery.dirtyforms#usage) and Bootstrap Modal [as per the documentation](http://getbootstrap.com/javascript/#modals). However, it is also possible to [customize the HTML](#customization).

```HTML
// CSS

// JavaScript

```

> If not using a CDN, you need to apply the dependencies in the same order as in the example above.

## Options

The following options are available to set via **$.DirtyForms.dialog.OPTIONNAME = OPTIONVALUE** or get via **OPTIONVALUE = $.DirtyForms.dialog.OPTIONNAME**

Name
Type
Default
Description

title
string
' Are you sure you want to do that?'
Sets the title of the dialog. Supports HTML.

proceedButtonClass
string
'dirty-proceed'
Sets the CSS class of the continue button of the dialog (an HTML button tag element). The element with this class will automatically have the proceedButtonText inserted into it and a click event handler bound to it before showing the dialog.

proceedButtonText
string
'Leave This Page'
Sets the text of the continue button of the dialog.

stayButtonClass
string
'dirty-stay'
Sets the CSS class of the cancel button of the dialog (an HTML button tag element). The element with this class will automatically have the stayButtonText inserted into it before showing the dialog.

stayButtonText
string
'Stay Here'
Sets the text of the cancel button of the dialog.

dialogID
string
'dirty-dialog'
Sets the ID of the outermost element of the dialog. If there is an element with this ID on the page, it will be used for the dialog. If not, a default dialog will be automatically generated.

titleID
string
'dirty-title'
Sets the ID of the element that represents the dialog title. The element with this ID will automatically have the title text inserted into it before showing the dialog.

messageClass
string
'dirty-message'
Sets the CSS class of the element that represents the message body. The element with this class will automatically have the message inserted into it before showing the dialog.

preMessageText
string
''
Sets the text that precedes the message text. May contain HTML.

postMessageText
string
''
Sets the text that follows the message text. May contain HTML.

replaceText
boolean
true
Set to false to prevent the title, message, continue button text, and cancel button text in the dialog from being overwritten by the configured values. This is useful if you want to configure your dialog text entirely in the HTML of the page.

> Setting the width of the bootstrap modal requires custom CSS to ensure it will work with different viewport sizes. See [this page](http://coolestguidesontheplanet.com/bootstrap/modal.php) for examples.

## Customization

Because Bootstrap requires ultimate control over the HTML in order to function, it is possible to provide your own HTML either directly into the page or via JavaScript. Simply add it to the page and ensure that the following match what is specified in the options.

1. dialogID (required)
2. titleID (optional)
3. messageClass (optional)
3. proceedButtonClass (required)
4. stayButtonClass (optional)

### Example

```javascript

$('

').appendTo('body');

$('form').dirtyForms({
// Message will be shown both in the Bootstrap Modal dialog
// and in most browsers when attempting to navigate away
// using browser actions.
message: 'This is a custom message',
dialog: {
title: 'This is a custom title',
dialogID: 'custom-dialog',
titleID: 'custom-title',
messageClass: 'custom-message',
proceedButtonClass: 'custom-proceed',
stayButtonClass: 'custom-stay'
}
});

// If .dirtyForms() has already been called, you can override
// the values after the fact like this.
$.DirtyForms.dialog.title = 'This is an alternative custom title';

```

## Support

For help or to report a bug please [open an issue](https://github.com/snikch/jquery.dirtyforms/issues/new) at the [Dirty Forms development site](https://github.com/snikch/jquery.dirtyforms/).