I have a recipe app in django. I now want to be able to switch between ML and OZ by clicking a button.
I have this working just fine with one exception: I also added the ability to change the amount of serves a drink has. To make this work I added a data-toggle
variable to the html that changes from false to true when I click the button.
I now have an if statement that should see this change and respond accordingly. The data-toggle
changes when I click the switch button. The jquery however does not seem to read the change in data-toggle
.
Can you see what I've done wrong?
Jquery that changes the recipe from ML to OZ. This works well:
$(document).ready(function() {
var divideVolume = 29.574
$('#oz').on('click', function() {
var serves = $('#serves').val();
var toggle =$('#oz').data('toggle');
if (toggle = 'false'){
$('#oz').attr('data-toggle', 'true');
$('#ml').attr('data-toggle','false');
$('.amount').each(function() {
var amount = parseInt($(this).data('original'));//get data-*
new_amount = (amount * serves)/divideVolume;
$(this).text(new_amount.toFixed(1))//add value to td
});
};
})
});
Jquery code that should change the recipe based on the amount of serves selected. It should read if the oz data-toggle
is set to true and if so, work with those. Unfortunately it does not.
$(document).ready(function() {
var divideVolume = 29.574
$('#serves').on('change', function() {
var oz = $('#oz').data('toggle');
var serves = $('#serves').val();
if (oz = 'false') {
console.log('toggle is false')
$('.amount').each(function() {
var amount = parseInt($(this).data('original'));//get data-*
new_amount = amount * serves
$(this).text(new_amount.toFixed(1))//add value to td
});
} else {
console.log('toggle is true')
$('.amount').each(function() {
var amount = parseInt($(this).data('original'));//get data-*
new_amount = (amount * serves)/divideVolume;
$(this).text(new_amount.toFixed(1))//add value to td
});
}
});
});
and HTML code:
<table class="cocktail_ingredients my-5">
<thead>
<tr>
<th>
<h2>
INGREDIENTS
</h2>
</th>
<th>
<h2> <a data-toggle="true" id="ml">ML</a> / <a id="oz" data-toggle="false">OZ</a></h2>
</th>
</tr>
</thead>
<tbody>
<tr>
<td> Lime </td>
<td class="amount" data-original="25.0"> 25.0</td>
</tr>
<tr>
<td> Simple Syrup </td>
<td class="amount" data-original="15.0"> 15.0</td>
</tr>
<tr>
<td> Original </td>
<td class="amount" data-original="60.0"> 60.0</td>
</tr>
</tbody>
</table>