Fixed the currency dropdown when multiple fields present on single page.

This commit is contained in:
James Cole 2015-12-25 16:38:53 +01:00
parent 4f38b77ef6
commit c25c5623d2
3 changed files with 67 additions and 20 deletions

View File

@ -1,7 +1,9 @@
/* globals token, dateRangeConfig, $, */
$(function () {
"use strict";
$('.currencySelect').click(currencySelect);
// when you click on a currency, this happens:
$('.currency-option').click(currencySelect);
var ranges = {};
// range for the current month:
@ -62,21 +64,51 @@ $(function () {
function currencySelect(e) {
"use strict";
var target = $(e.target);
// clicked on
var target = $(e.target); // target is the <A> tag.
// name of the field in question:
var name = target.data('name');
// id of menu button (used later on):
var menuID = 'currency_dropdown_' + name;
// the hidden input with the actual value of the selected currency:
var hiddenInputName = 'amount_currency_id_' + target.data('name');
// span with the current selection (next to the caret):
var spanId = 'currency_select_symbol_' + target.data('name');
// the selected currency symbol:
var symbol = target.data('symbol');
var code = target.data('code');
// id of the selected currency.
var id = target.data('id');
var fieldType = target.data('field');
var menu = $('.' + fieldType + 'CurrencyDropdown');
var symbolHolder = $('#' + fieldType + 'CurrentSymbol');
symbolHolder.text(symbol);
$('input[name="' + fieldType + '_currency_id"]').val(id);
// update the hidden input:
$('input[name="' + hiddenInputName + '"]').val(id);
// close dropdown (hack hack)
menu.click();
// update the symbol:
$('#' + spanId).text(symbol);
// close the menu (hack hack)
$('#' + menuID).click();
return false;
//var code = target.data('code');
//var fieldType = target.data('field');
//var menu = $('.' + fieldType + 'CurrencyDropdown');
//
//var symbolHolder = $('#' + fieldType + 'CurrentSymbol');
//symbolHolder.text(symbol);
//$('input[name="' + fieldType + '_currency_id"]').val(id);
//
// close dropdown (hack hack)
//menu.click();
//return false;
}

View File

@ -4,12 +4,18 @@
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle amountCurrencyDropdown" data-toggle="dropdown" aria-expanded="false">
<button type="button"
class="btn btn-default dropdown-toggle currency-dropdown" data-toggle="dropdown" aria-expanded="false">
<span>{{ defaultCurrency.symbol|raw }}</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<ul class="dropdown-menu currency-dropdown-menu" role="menu">
{% for currency in currencies %}
<li><a href="#" class="currencySelect" data-id="{{ currency.id }}" data-field="amount" data-currency="{{ currency.code }}"
<li>
<a href="#"
class="currency-option"
data-id="{{ currency.id }}"
data-name="{{ name }}"
data-currency="{{ currency.code }}"
data-symbol="{{ currency.symbol|raw }}">{{ currency.name }}</a></li>
{% endfor %}
</ul>
@ -21,5 +27,6 @@
{% include 'form/feedback.twig' %}
</div>
<input type="hidden" name="amount_currency_id" value="{{ defaultCurrency.id }}"/>
<input type="hidden" name="amount_currency_id_{{ name }}" value="{{ defaultCurrency.id }}"/>
</div>

View File

@ -4,21 +4,29 @@
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle balanceCurrencyDropdown" data-toggle="dropdown" aria-expanded="false">
<span>{{ defaultCurrency.symbol|raw }}</span> <span class="caret"></span>
<button type="button"
class="btn btn-default dropdown-toggle currency-dropdown" id="currency_dropdown_{{ name }}" data-toggle="dropdown" aria-expanded="false">
<span id="currency_select_symbol_{{ name }}">{{ defaultCurrency.symbol|raw }}</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<ul class="dropdown-menu currency-dropdown-menu" role="menu">
{% for currency in currencies %}
<li><a href="#" class="currencySelect" data-id="{{ currency.id }}" data-field="balance" data-currency="{{ currency.code }}"
data-symbol="{{ currency.symbol }}">{{ currency.name }}</a></li>
<li>
<a href="#"
class="currency-option"
data-id="{{ currency.id }}"
data-name="{{ name }}"
data-currency="{{ currency.code }}"
data-symbol="{{ currency.symbol|raw }}">{{ currency.name }}</a></li>
{% endfor %}
</ul>
</div>
{{ Form.input('number', name, value, options) }}
</div>
{% include 'form/feedback.twig' %}
</div>
<input type="hidden" name="balance_currency_id" value="{{ defaultCurrency.id }}"/>
<input type="hidden" name="amount_currency_id_{{ name }}" value="{{ defaultCurrency.id }}"/>
</div>