Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve #13

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Improve #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2b281cc
store required for hidden fields
Mar 21, 2015
79cdbf2
new default is hide and disable
Mar 21, 2015
ea41598
support for recrusive dependent-fields and code dedublication
Mar 21, 2015
ad16b2d
store disabled status
Mar 21, 2015
1f32e9f
clean up
Mar 21, 2015
1532dfa
fix: the cleanup of the attribute hapens too early.
Apr 8, 2015
c6a394f
fix do not disable/enable select2 if it was not used on this field
Jan 6, 2016
cc1bdc2
updates needet for the newest version of select2
Jan 6, 2016
0a8a750
clean up for select2 version 4.1
Jan 9, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ You can also specify multiple option values by seperating them with `|`. For exa

Add `data-method='disable'` to the js-dependent-fields div.

**Note:** The default is now hide and disable the fields and enable them on again when showing. This is to prevent the hidden dependent fields from being submitted. The old behavior can be archived when add `data-method='hide'` to the js-dependent-fields div.


Minimal Demo
Expand Down
46 changes: 29 additions & 17 deletions vendor/assets/javascripts/dependent-fields.js.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,37 @@


toggle = ($parent, showOrHide, method, duration) ->
fieldsSelector = 'input,textarea,select'
fieldsAndBtnsSelector = fieldsSelector+',button'
parentVisibleSelector = ':not(.js-dependent-fields-hidden)'
if showOrHide
if method == 'disable'
$parent.removeClass 'js-dependent-fields-hidden'
$parentVisible = $parent.find(parentVisibleSelector)
if method != 'hide' # disable or default
$fieldsAndBtns = $parentVisible.find(fieldsAndBtnsSelector)
# only enable if it was enabled before hiding
$fieldsAndBtns.filter("[data-dependent-fields-disabled='no']").prop('disabled', false)
$fieldsAndBtns.removeAttr('data-dependent-fields-disabled')
# use attr instead of prop, because prop does not work with twitter bootstrap button
$parent.find('input,textarea,select,button,.btn').removeAttr('disabled')
$parent.find('.select2').select2('enable') if $.fn.select2
else
$parentVisible.find(".btn[data-dependent-fields-disabled='no']").removeAttr('disabled')
# remove the disabled state
$parentVisible.find('[data-dependent-fields-disabled]').removeAttr('data-dependent-fields-disabled')
if method != 'disable' # hide or default
$parentVisible.find(fieldsSelector).filter('[data-dependent-fields-required]').attr('required', 'required')
$parent.show(duration)
else
if method == 'disable'
$parent.addClass 'js-dependent-fields-hidden'
if method != 'hide' # disable or default
# store the disabled state
$fieldsAndBtns = $parent.find(fieldsAndBtnsSelector + ', .btn').not('[data-dependent-fields-disabled]')
$fieldsAndBtns.filter(':disabled').attr('data-dependent-fields-disabled', 'yes')
$fieldsAndBtns.not(':disabled').attr('data-dependent-fields-disabled', 'no')
# disable things
$fieldsAndBtns.filter(fieldsAndBtnsSelector).prop('disabled', true)
# use attr instead of prop, because prop does not work with twitter bootstrap button
$parent.find('input,textarea,select,button,.btn').attr('disabled', 'disabled')
$parent.find('.select2').select2('disable') if $.fn.select2
else
$fieldsAndBtns.not(fieldsAndBtnsSelector).attr('disabled', 'disabled')
if method != 'disable' # hide or default
$parent.find(fieldsSelector).filter('[required]').removeAttr('required').attr('data-dependent-fields-required', 'required')
$parent.hide(duration)


Expand Down Expand Up @@ -59,21 +77,15 @@ showOrHideDependentFieldsRadio = (duration = 'fast') ->

bind = ->
$selects = $('select')
$selects.not('[data-important]').each _.partial(showOrHideDependentFieldsSelect, 0)
$selects.filter('[data-important]').each _.partial(showOrHideDependentFieldsSelect, 0)

$selects.each _.partial(showOrHideDependentFieldsSelect, 0)
$selects.change showOrHideDependentFieldsSelect

$inputs = $('input[type=checkbox]')
$inputs.not('[data-important]').each _.partial(showOrHideDependentFieldsCheckbox, 0)
$inputs.filter('[data-important]').each _.partial(showOrHideDependentFieldsCheckbox, 0)

$inputs.each _.partial(showOrHideDependentFieldsCheckbox, 0)
$inputs.change showOrHideDependentFieldsCheckbox

$radios = $('input[type=radio]')
$radios.not('[data-important]').each _.partial(showOrHideDependentFieldsRadio, 0)
$radios.filter('[data-important]').each _.partial(showOrHideDependentFieldsRadio, 0)

$radios.each _.partial(showOrHideDependentFieldsRadio, 0)
$radios.change showOrHideDependentFieldsRadio


Expand Down