jeudi 24 septembre 2015

Prevent Custom Event from Executing After Another Function

I have a table inside a form that I'm using to make payments on invoices. On each table row there is a checkbox and a text input. When the user clicks the checkbox, it populates the text input with the invoice balance.

In some instances, a user will click the checkbox and populate the text input as noted above. However, the user may then decide that they do not want to pay the full balance on that invoice. So, they can change the value of the text input to any amount less than the balance. When a user does this, the checkbox is unchecked.

When the checkbox is unchecked, the "ifUnchecked" event fires. The problem is, the "ifUnchecked" event clears the text input. So, in practice, this means that when the user manually enters a value into the text input, the checkbox is unchecked, but the value is also cleared - a ux issue.

Question How do I prevent the ifunchecked event from firing in this case, or is there a better approach?

$(function() {
  var payFull = $('input[type="checkbox"].payfull');
  var payNow = $('input[type="text"].paynow');
  var payAmt = $('#amounttopay');

  // Recalc Function
  function reCalc() {
      var sum = 0;
      payNow.each(function() {
        sum += Number($(this).val());
      });
      if (!isNaN(sum) && sum.length !== 0) {
        payAmt.html('$' + sum.toFixed(2));
      } else {
        payAmt.html('$0.00');
      }
    }
    // When Pay in Full Checkbox is Checked fill in Pay This Time Field with Invoice Amount Due Value
  payFull.on('ifChecked', function(event) {
    var val = $(this).val().replace('$', '');
    var price = $(this).closest('tr').find('input[type="text"]').val(val);
    price;
    reCalc;
  });

  // If Pay in Full Unchecked then remove value from respective Pay This Time Input
  payFull.on('ifUnchecked', function(event) {
    var removePrice = $(this).closest('tr').find(payNow).val('');
    removePrice;
    reCalc;
  });

  // If Pay This Time changes recalculate total
  var payFullVal = payFull.val().replace('$', '');
  var payNowVal = payNow.val();
  payNow.keyup(function() {
    reCalc;
    if (payFullVal !== payNowVal) {
      $(this).closest('tr').find('input').iCheck('uncheck');
    } else {}
  });
});
/* iCheck plugin Square skin, blue
----------------------------------- */

.icheckbox_square-blue,
.iradio_square-blue {
  display: inline-block;
  *display: inline;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  width: 22px;
  height: 22px;
  background: url(http://ift.tt/1PyxKwv) no-repeat;
  border: none;
  cursor: pointer;
}
.icheckbox_square-blue {
  background-position: 0 0;
}
.icheckbox_square-blue.hover {
  background-position: -24px 0;
}
.icheckbox_square-blue.checked {
  background-position: -48px 0;
}
.icheckbox_square-blue.disabled {
  background-position: -72px 0;
  cursor: default;
}
.icheckbox_square-blue.checked.disabled {
  background-position: -96px 0;
}
.iradio_square-blue {
  background-position: -120px 0;
}
.iradio_square-blue.hover {
  background-position: -144px 0;
}
.iradio_square-blue.checked {
  background-position: -168px 0;
}
.iradio_square-blue.disabled {
  background-position: -192px 0;
  cursor: default;
}
.iradio_square-blue.checked.disabled {
  background-position: -216px 0;
}
/* Retina support */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icheckbox_square-blue,
  .iradio_square-blue {
    background-image: url(blue@2x.png);
    -webkit-background-size: 240px 24px;
    background-size: 240px 24px;
  }
}
<script src="http://ift.tt/1oMJErh"></script>
<script src="http://ift.tt/1PyxKwx"></script>
<script>
  $(function() {
    $('#datatable input[type=checkbox]').iCheck({
      checkboxClass: 'icheckbox_square-blue',
      increaseArea: '10%' // optional
    });
  });
</script>
<table class="table table-bordered" id="datatable">
  <thead>
    <tr>
      <th class="text-center view">View</th>
      <th class="text-center">Invoice Date</th>
      <th class="text-center">Invoice #</th>
      <th class="text-center">PO #</th>
      <th class="text-center">Invoice Amount</th>
      <th class="text-center">Amount Due</th>
      <th class="text-center">Pay In Full</th>
      <th class="text-center">Pay This Time</th>
    </tr>
  </thead>
  <tfoot>
    <tr class="foot">
      <th class="text-left">
        <h5 class="semibold text-uppercase nm ml5">Pay This Time</h5>
      </th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th class="text-right">
        <h3 class="semibold nm mr5" id="amounttopay">$0.00</h3>
      </th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td class="text-center">
        <label>
          <input class="view-detail" data-contextual="selected" data-target="tr" data-toggle="selectrow" name="SPI_Inv_Select" type="checkbox" value="SPI_Inv_Num">
        </label>
      </td>
      <td class="text-center">SPI_Inv_Date</td>
      <td class="text-center"><a class="uline" href='#'>SPI_Inv_Num</a>
      </td>
      <td class="text-center">SPI_Inv_PONum</td>
      <td class="text-right">SPI_Inv_Amt</td>
      <td class="text-right">SPI_Inv_DueAmt</td>
      <td class="text-center payinfull">
        <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="$109.92">
      </td>
      <td class="text-center paythistime">
        <div class="input-group"> <span class="input-group-addon">$</span>
          <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text">
        </div>
        <span class="one"></span>
      </td>
    </tr>
    <tr>
      <td class="text-center view">
        <label>
          <input class="view-detail" data-contextual="selected" data-target="tr" data-toggle="selectrow" name="SPI_Inv_Select" type="checkbox" value="SPI_Inv_Num">
        </label>
      </td>
      <td class="text-center">SPI_Inv_Date</td>
      <td class="text-center"> <a class="uline" href='#'>SPI_Inv_Num</a>
      </td>
      <td class="text-center">SPI_Inv_PONum</td>
      <td class="text-right">SPI_Inv_Amt</td>
      <td class="text-right">SPI_Inv_DueAmt</td>
      <td class="text-center payinfull">
        <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="$6.65">
      </td>
      <td class="text-center paythistime">
        <div class="input-group"> <span class="input-group-addon">$</span>
          <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text">
        </div>
        <span class="two"></span>
      </td>
    </tr>
  </tbody>
</table>

Explanation of what happens: When I click the checkbox and modify the text input value all checkboxes are unchecked. I want just the checkbox on the same table row as the modified text input to be unchecked.




Aucun commentaire:

Enregistrer un commentaire