Reputation: 327
I am trying to update the following span
<span class="help-block">Your card will automatically reload $<span id="autoAmount">0</span> when your balance is lower than your reload threshold.</span>
with the value taken from code below,
<div class="controls">
<div class="btn-group radioButtons amountButtons" data-toggle="buttons-radio">
@if (Model.PresetValues.Count > 0){
foreach (int value in Model.PresetValues) {
<button type="button" data-value="@value" class="btn amtButtons @(Model.chargeViewModel.ChargeAmount == value ? "active" : "")">$@value</button>
}
}
<button type="button" data-value="other" class="btn toggleDiv toggleOnce amtButtons" data-toggle-id="#manualAmount">Other</button>
</div>
<input type="hidden" class="radioHidden validate required validateAmount" value="" id="amount" name="ChargeAmount">
</div>
After I click the 'yes' button from this
<li class="control-group">
<label for="autoReload" class="control-label">Auto Reload</label>
<div class="controls">
<div class="btn-group radioButtons radioToggleCollapse" data-toggle-id="#autoReloadExtra" data-toggle="buttons-radio">
<button type="button" data-value="no" class="btn active">No</button>
<button type="button" data-value="yes" class="btn">Yes</button>
</div>
<input type="hidden" class="radioHidden" value="@(Model.IsAutoReload ? "True" : "False")" id="autoReload" name="IsAutoReload">
</div>
</li>
I have the following script,
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$.ajax({
type: "POST"
}).success(function() {
var callAjax = $('.amtButtons').click(function () {
$("#autoAmount").html($('#amount').val());
});
});
</script>
This works relatively well, however I am encountering two issues.
1) I have to click the value twice for it to update
2) If I click 'other' twice, it shows $other, whereas I'd like it to display whatever is in the 'manualAmounts' value when it is clicked.
I tried making a fiddle... but don't really know how to use it properly. This at least can show a general layout of what I'm trying to do though
EDIT:
Everything works except for the span displaying $other if I click it twice still, does anyone know a workaround for this?
Upvotes: 2
Views: 1035
Reputation: 2417
Have a look at this Fiddle and here's the Javascript:
$( document ).ready(function() {
//Cache the selections
var autoReloadCheck = $(".autoReloaded"),
autoAmmount = $("#autoAmount"),
ammount = $('#amount');
//Replaced your two buttons with a simple checkbox
autoReloadCheck.on('click', function(){
if(!autoReloadCheck.is(':checked'))
autoAmmount.html("0");
});
$('.amtButtons').click(function () {
var $this = $(this); //Capture which button was clicked
if($this.data("toggle-id") === "#manualAmount"){
$this.data("value", $("#manualAmountInput").val()); //If the "other" was clicked, set the value according to what is in the input box
}
if(autoReloadCheck.is(':checked')){ //Is autoReload checked?
autoAmmount.html($this.data("value"));
}
});
});
Update based on comment
New fiddle
var autoReloadCheck = $(".autoReloaded"),
autoAmmount = $("#autoAmount"),
ammount = $('#amount'),
plusMinus = $(".plusminus"),
otherValue = $('*[data-toggle-id="#manualAmount"]');
function updateOthervalue(newValue){
otherValue.data("value", newValue);
plusMinus.data("value", newValue);
plusMinus.val(plusMinus.data("value"));
updateReloadSpan(newValue);
}
function updateReloadSpan(newAmount){
if(autoReloadCheck.is(':checked')){
ammount.val(newAmount);
autoAmmount.html(newAmount);
}
}
autoReloadCheck.on('click', function(){
if(!autoReloadCheck.is(':checked'))
autoAmmount.html("0");
});
$(".minus").on('click', function() {
if(plusMinus.data("value") >= 15){
var newValue = otherValue.data("value") - plusMinus.data("increment");
updateOthervalue(newValue);
}
});
$(".plus").on('click', function() {
if(plusMinus.data("value") < plusMinus.data("max")){
var newValue = otherValue.data("value") + plusMinus.data("increment");
updateOthervalue(newValue);
}
});
$('.amtButtons').on('click', function() {
var $this = $(this);
if($this.data("toggle-id") === "#manualAmount"){
$this.data("value", plusMinus.data("value"));
}
updateReloadSpan($this.data("value"));
});
Upvotes: 2