Skip to content

Commit

Permalink
Update to release v1.4.4
Browse files Browse the repository at this point in the history
  • Loading branch information
kartik-v committed Dec 16, 2015
1 parent 21c1279 commit a13970a
Show file tree
Hide file tree
Showing 12 changed files with 250 additions and 335 deletions.
31 changes: 14 additions & 17 deletions CHANGE.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,24 @@
Change Log: `dependent-dropdown`
================================

## Version 1.4.4
## version 1.4.4

**Date:** 26-Oct-2015
**Date:** 16-Dec-2015

1. (enh #30): Better validation for undefined groups key param.
1. (enh #29): Ability to configure and extend ajax settings
2. (enh #33): Add language and localization support.
3. (enh #34): Make all parameter names configurable.
4. (enh #35): AMD and Node Common JS Support.
5. (enh #36): Enhance ability to configure HTML attributes for each option.

## Version 1.4.3

**Date:** 14-Jul-2015

1. (enh #27): Better validation for value selected.
2. (enh #28): Ability to configure HTML attributes for each option element via ajax.

## Version 1.4.2
## version 1.4.2

**Date:** 18-Jun-2015

1. (enh #23): New property `initDepends` to set all dependent parents in the chain.
2. (enh #24): Enhancement for Select2 plugin.

## Version 1.4.1
## version 1.4.1

**Date:** 22-May-2015

Expand All @@ -30,7 +27,7 @@ Change Log: `dependent-dropdown`
3. (bug kartik-v/yii2-widget-depdrop#10): Fix process dependency params.
4. (enh #22): Fixes for JQuery v2.1.4 & Select2.

## Version 1.4.0
## version 1.4.0

**Date:** 01-Feb-2015

Expand All @@ -41,20 +38,20 @@ Change Log: `dependent-dropdown`
5. (enh #15): Implement reusable constructor for extending plugin if needed.
6. (enh #16): Enhance Select2 dropdowns to show loading indicator.

## Version 1.3.0
## version 1.3.0

**Date:** 08-Nov-2014

1. Set release to stable in composer.json.
2. Updated CHANGE log to reflect user friendly date time formats.

## Version 1.2.0
## version 1.2.0

**Date:** 02-Jul-2014

- Enh #8: Ability to pass additional form input data within each ajax call.

## Version 1.1.0
## version 1.1.0

**Date:** 05-May-2014

Expand All @@ -63,7 +60,7 @@ Change Log: `dependent-dropdown`
- Added support for plugin to work with other plugins like Select2.


## Version 1.0.0
## version 1.0.0

**Date:** 30-Apr-2014

Expand Down
232 changes: 7 additions & 225 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@ dependent-dropdown
[![Packagist Downloads](https://poser.pugx.org/kartik-v/dependent-dropdown/downloads)](https://packagist.org/packages/kartik-v/dependent-dropdown)
[![Monthly Downloads](https://poser.pugx.org/kartik-v/dependent-dropdown/d/monthly)](https://packagist.org/packages/kartik-v/dependent-dropdown)

A multi level dependent dropdown JQuery plugin that allows nested dependencies. The plugin allows you to convert normal
select inputs, whose options are derived based on value selected in another input/or a group of inputs. It works both
with normal select options and select with optgroups as well.
A multi level dependent dropdown JQuery plugin that allows nested dependencies. The plugin allows you to convert normal select inputs, whose options are derived based on value selected in another input/or a group of inputs. It works both with normal select options and select with optgroups as well.

> NOTE: The latest version of the plugin v1.4.3 has been released. Refer the [CHANGE LOG](https://github.com/kartik-v/dependent-dropdown/blob/master/CHANGE.md) for details.
> NOTE: The latest version of the plugin v1.4.4 has been released. Refer the [CHANGE LOG](https://github.com/kartik-v/dependent-dropdown/blob/master/CHANGE.md) for details.
## Features

Expand All @@ -31,7 +29,7 @@ with normal select options and select with optgroups as well.
- Size of the entire plugin is less than 4KB (about 3KB for the minified JS and 1KB for the minified CSS).
- Ability to configure HTML attributes of each `option` element via ajax response (for example dynamically disabling some dropdown options or adding styles).

## Demo
## Documentation and Demo

View the [plugin documentation](http://plugins.krajee.com/dependent-dropdown) and
[plugin demos](http://plugins.krajee.com/dependent-dropdown/demo) at Krajee JQuery plugins.
Expand Down Expand Up @@ -66,12 +64,6 @@ View the [plugin documentation](http://plugins.krajee.com/dependent-dropdown) an
```
{group-name: {id: <option-value>, name: <option-name>}}
```

When no data is available for a specific situation (like an backend error), you can send a custom emptyMsg

```
{emptyMsg: '<your message>'}
```

## Installation

Expand Down Expand Up @@ -106,10 +98,11 @@ plugin assets (css and js folders) into your project.
<link href="path/to/css/dependent-dropdown.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="path/to/js/dependent-dropdown.min.js" type="text/javascript"></script>
<!-- optionally if you need translation for your language then include locale file as mentioned below -->
<script src="path/to/js/depdrop_locale_<lang>.js"></script>
```

If you noticed, you need to load the `jquery.min.js` in addition to the `dependent-dropdown.min.css` and
`dependent-dropdown.min.js` for the plugin to work with default settings.
If you noticed, you need to load the `jquery.min.js` in addition to the `dependent-dropdown.min.css` and `dependent-dropdown.min.js` for the plugin to work with default settings. The locale file `depdrop_locale_<lang>.js` can be optionally included for translating for your language if needed.

**Step 2:** Setup your select input markup to. Automatically set dependent dropdowns by adding the class `depdrop` and setting data attributes.
NOTE: All select inputs must have a defined `ID` attribute for the plugin to work.
Expand Down Expand Up @@ -143,217 +136,6 @@ $("#child-2").depdrop({

```

## Documentation

### Plugin Options
The plugin supports these following options:

##### depends
_array_ the list of parent input `ID` attributes on which the current dropdown is dependent on. DO NOT prepend any hash
before the input id.

##### initDepends
_array_ the list of INITIAL nested parent input`ID` attributes on which the current dropdown is dependent on. This is applicable only when`initialize` is set to`true` (for firing the ajax requests on page initialization). Usually you may set it to the topmost parent in the hierarchy while initializing, unless you have complex multiple many to many dependencies. The ajax requests will be fired in sequence based on these dependent ids. DO NOT prepend any hash before the input id. If not set, this will default to`depends`. For example you could use`depends` and`initDepends` in the following manner:

```js
$("#child-1").depdrop({
depends: ['parent-1'],
url: '/path/to/child_1_list'
});

$("#child-2").depdrop({
depends: ['child-1'], // dependent only on child-1
url: '/path/to/child_1_list'
});

$("#child-3").depdrop({
depends: ['child-2'], // dependent only on child-2
initDepends: ['parent-1'], // initial ajax loading will be fired first for parent-1, then child-1, and child-2
initialize: true,
url: '/path/to/child_2_list'
});
```

##### params
_array_ the list of additional input `ID` attributes, whose values will be parsed and passed to the ajax call. DO NOT
prepend any hash before the input id. When this is setup, the `$_POST` request would contain an array named `depdrop_params`
with the values of these input identifiers. For example in PHP you can retrieve this as:

```php
if (!empty($_POST['depdrop_params'])) {
$params = $_POST['depdrop_params'];
$param1 = $params[0]; // the first parameter value you passed
$param2 = $params[1]; // the second parameter value you passed
// and so on
}
```

> NOTE: In addition to `depdrop_params`, the plugin sends `depdrop_all_params` as an associative array of keys and values. This is sent merged along with the keys and values of `depdrop_parents`. Read more about this in the `url` section below.
##### url
_string_ the ajax url action which will process the dependent list. The server action must return a JSON encoded
specified format like `{output: <dependent-list>, selected: <default-selected-value>}`.
where, the `output` is an array of data for the dependent list of the format `{id: <option-value>, name: <option-name>}`,
and `selected` is the default selected value after the dependent dropdown is generated. If you desire a dependent list
containing optgroups then the `output` must be of the format `{group-name: {id: <option-value>, name: <option-name>}}`.

The plugin passes an array of dependent values as a POST request to the server under a variable name `depdrop_parents`. In addition, the plugin also passes a property `depdrop_all_params` that will be an associative array of keys and values (it merges the values of `depdrop_parents` and `depdrop_params`). The keys are the element identifiers for dependent dropdown parent elements and the element identifiers set via `params` property.
This can be read by the server action to generate a dependent dropdown list. An example for a PHP server action could be:

```php
public function generateChildren() {
$out = [];
if (isset($_POST['depdrop_parents'])) {
$parents = $_POST['depdrop_parents'];
if ($id != null) {
$out = getChildList($parents);
/*
* the `getChildList` function can query a db and return array of format
* {id: <val>, name: <desc>}, based on the list of parents passed.
*/
echo json_encode(['output' => $out, 'selected'=>'']);
return;
}
}
if (isset($_POST['depdrop_all_params'])) {
for ($_POST['depdrop_all_params'] as $key => $value) {
// $key = Element ID
// $value = Element Value
}
}
echo json_encode(['output' => '', 'selected'=>'']);
// note when a null or empty array is returned, the plugin will display `emptyMsg`
// in the dependent dropdown
}
```

>NOTE: If you return a null value or an empty array from the server, the plugin will display the `emptyMsg` in the
dependent dropdown. The dependent select will always be disabled until the server returns a valid list of values.

##### initialize
_boolean_ This is an important attribute if you want to auto initialize and populate the dropdowns by triggering the ajax calls when
document is loaded. You must set this to `true` only for the last child in the nested dependency list, so that initial preselected values are
refreshed sequentially in the nested hierarchy. Defaults to `false`. If this property is not `true` for any dependent dropdown, no ajax
calls will be triggered on document load (i.e. the dropdowns will show the default data set by the html markup set on init).

##### loading
_boolean_ whether to show a loading progress spin indicator and the loading text in the child dropdown element when server is
processing the ajax response. Defaults to `true`.

##### loadingClass
_string_ the CSS class to attach to the child dropdown element when the server is processing the ajax response.
Defaults to `kv-loading`.

##### loadingText
_string_ the text to display in the child dropdown element when the server is processing the ajax response.
Defaults to `Loading ...`.

##### placeholder
_string_ | _boolean_ whether the child select has a default placeholder. This will create an option with an
empty value within the child select element. For optgroups this will be a disabled option. If you
set this to `false`, it will not be displayed. Defaults to `Select ...`.

##### emptyMsg
_string_ the message to display when the ajax response returned from the server is null or an empty array. Defaults to
`No data found`.

##### idParam
_string_ the name of the parameter that returns the `id` value for each list option item via json response. Defaults to `id`.

##### nameParam
_string_ the name of the parameter that returns the `name` value for each list option item via json response. Defaults to `name`.

### Plugin Events
The plugin supports these events:

#### depdrop.init
This event is triggered when the dependent dropdown is initialized.

#### depdrop.ready
This event is triggered when the dependent dropdown is initialized with values, after document is loaded and ready.

**Example:**
```js
$('#input-id').on('depdrop.init', function(event) {
// perform any action
});
```

#### depdrop.change
This event is triggered when a dependent parent input is modified or changed. This event also allows you to access
these parameters:

- `id`: the parent dependent dropdown element id.
- `value`: the parent dependent dropdown value.
- `count`: the count of options generated in the dependent dropdown.
- `initVal`: the initial preselected value in the dependent dropdown.
Defaults to `false` if not set.

**Example:**
```js
$('#child-1').on('depdrop.change', function(event, id, value, count) {
console.log(value);
console.log(count);
});
```

#### depdrop.beforeChange
This event is triggered when a dependent parent input is modified or changed and before the ajax response is sent
to the server. This event also allows you to access these parameters:

- `id`: the parent dependent dropdown element id.
- `value`: the parent dependent dropdown value.
- `initVal`: the initial preselected value in the dependent dropdown.
Defaults to `false` if not set.

**Example:**
```js
$('#child-1').on('depdrop.beforeChange', function(event, id, value) {
console.log(value);
});
```

#### depdrop.afterChange
This event is triggered when a dependent parent input is modified or changed and after the ajax response is processed
by the server. This event also allows you to access these parameters:

- `id`: the parent dependent dropdown element id.
- `value`: the parent dependent dropdown value.
- `initVal`: the initial preselected value in the dependent dropdown.
Defaults to `false` if not set.

**Example:**
```js
$('#child-1').on('depdrop.afterChange', function(event, id, value) {
console.log(value);
});
```

#### depdrop.error
This event is triggered when a dependent parent input is modified or changed and if an error is faced in
the ajax response processed by the server. This event also allows you to access these parameters:

- `id`: the parent dependent dropdown element id.
- `value`: the parent dependent dropdown value.
- `initVal`: the initial preselected value in the dependent dropdown.
Defaults to `false` if not set.

**Example:**
```js
$('#child-1').on('depdrop.error', function(event, id, value) {
console.log(value);
});
```

### Plugin Methods
The plugin supports these methods:

#### init
Initialize the dependent dropdown.
```js
$('#input-id').depdrop('init');
```

## License

**dependent-dropdown** is released under the BSD 3-Clause License. See the bundled `LICENSE.md` for details.
**dependent-dropdown** is released under the BSD 3-Clause License. See the bundled `LICENSE.md` for details.
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "dependent-dropdown",
"version": "1.4.3",
"version": "1.4.4",
"homepage": "https://github.com/kartik-v/dependent-dropdown",
"authors": [
"Kartik Visweswaran <[email protected]>"
Expand Down
2 changes: 1 addition & 1 deletion css/dependent-dropdown.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*!
* @copyright Copyright &copy; Kartik Visweswaran, Krajee.com, 2013 - 2015
* @version 1.4.3
* @version 1.4.4
*
* Styling for the dependent-dropdown JQuery plugin.
*
Expand Down
2 changes: 1 addition & 1 deletion css/dependent-dropdown.min.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*!
* @copyright Copyright &copy; Kartik Visweswaran, Krajee.com, 2013 - 2015
* @version 1.4.3
* @version 1.4.4
*
* Styling for the dependent-dropdown JQuery plugin.
*
Expand Down
19 changes: 19 additions & 0 deletions js/depdrop_locale_LANG.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/*!
* Dependent Dropdown <LANG> Translations
*
* This file must be loaded after 'dependent-dropdown.js'. Patterns in braces '{}', or
* any HTML markup tags in the messages must not be converted or translated.
*
* @see http://github.com/kartik-v/dependent-dropdown
*
* NOTE: this file must be saved in UTF-8 encoding.
*/
(function ($) {
"use strict";

$.fn.depdropLocales['<LANG>'] = {
loadingText: 'Loading ...',
placeholder: 'Select ...',
emptyMsg: 'No data found'
};
})(window.jQuery);
Loading

0 comments on commit a13970a

Please sign in to comment.