0

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>

0 Answers0