计算ajax调用的产品价格 [英] Calculate product price on ajax call

问题描述

想知道为什么在对ajax调用json后页面加载时我的价格列不呈现.我有两个jsfiddle示例，其中第一个 https://jsfiddle.net/ujaet94z/45 不会加载价格，第二个 https://jsfiddle.net/ujaet94z/35 可以吗?

Want to know why my price column is not rendering on page load after an ajax call to json. I have two jsfiddle examples where the first https://jsfiddle.net/ujaet94z/45 does not load price, and the second one https://jsfiddle.net/ujaet94z/35 does?

唯一的更改是删除一行中的<a>标签和<div>. -我需要将这些元素保留在DOM中，但无法弄清楚为什么是问题所在?他们需要留在<td>内进行样式设置，但导致价格总计未更新.

Only change is to remove <a> tags and a <div> within one row. - I need to keep these elements in the DOM but can't figure why they are the problem? They need to stay within the <td> for styling but cause the price totals to not update.

出于某些原因，在<tr><td>中包含<div>似乎破坏了在价格栏中显示结果的功能吗?删除<div>-价格显示了想要的结果，但是样式却被破坏

Having the <div> inside the <tr><td> seems to break the ability to render results in the price column for some reason? With the <div> removed - price shows desired results, but styling is then broken

45:

$(".item-row:last").after(
                  '<tr class="item-row">'+
                  '<td class="item-name">'+
                  '<div class="delete-wpr">'+
                  '<textarea form ="testinsert" name="item_name['+i+']">Item Name</textarea>'+
                  '<a class="delete" href="javascript:;" title="Remove row">X</a>'+
                  '<a class="add-product" href="javascript:;" title="Add Product">A</a></div></td>'+
                  '<td class="description"><textarea form ="testinsert" name="item_desc['+i+']">Description</textarea></td>'+
                  '<td><textarea class="cost" form ="testinsert" name="item_cost['+i+']">$0</textarea></td>'+
                  '<td><textarea class="qty" form ="testinsert" name="item_qty['+i+']" autofocus>0</textarea></td>'+
                  '<td><span class="price" form ="testinsert" name="item_price['+i+']">$0</span></td></tr>');

35:

$(".item-row:last").after(
                  '<tr class="item-row">'+
                  '<td class="item-name">'+
                  '<textarea form ="testinsert" name="item_name['+i+']">Item Name</textarea></td>'+
                  '<td class="description"><textarea form ="testinsert" name="item_desc['+i+']">Description</textarea></td>'+
                  '<td><textarea class="cost" form ="testinsert" name="item_cost['+i+']">$0</textarea></td>'+
                  '<td><textarea class="qty" form ="testinsert" name="item_qty['+i+']" autofocus>0</textarea></td>'+
                  '<td><span class="price" form ="testinsert" name="item_price['+i+']">$0</span></td></tr>');

JS:

function update_price() {
  var row = $(this).parents('.item-row');
  var price = row.find('.cost').val().replace("$", "") * row.find('.qty').val();
  price = roundNumber(price, 2);
  isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html("$" + price);

  update_total();
}

function bind() {
  $(".cost").focus(update_price);
  $(".qty").focus(update_price);
}

$(document).ready(function() {

  $("#paid").blur(update_balance);

  $('.add-invoice').on('click', function() {
    $("#invoice_div").css("display", "block");
    $.ajax({
      url: '/echo/json/',
      type: 'POST',
      contentType: 'application/json; charset=utf-8',
      dataType: 'json',
      data: {
        json: JSON.stringify(myjson)
      },
      success: function(data) {

        var result = [];
        $.each(data, function(i, e) {
          var matchingItems = $.grep(result, function(item) {
            return item.customer === e.customer && item.cust_id === e.cust_id;
          });

          if (matchingItems.length === 0) {
            result.push(e);
          }
        });

        populateSelectBoxes($('#invoice_div #ddinvoice'), result);

        function populateSelectBoxes($select, result) {
          var invoices = [];
          $.each(result, function() {
            invoices.push('<li data-value="' + this.cust_id + '">' + this.customer + ' : ' + this.invoice + '</li>');
          });
          $select.append(invoices.join(''));
        }

        function populateTableRow(data, selectedProductAutonum) {
          var invoices; //fill with JSON
          var lastRow = $(".item-row:last");
          $.each(data, function(i, e) {
            if (this.cust_id == selectedProductAutonum) {
              invoices = this;
              custProducts = data.filter(({
                cust_id
              }) => cust_id === selectedProductAutonum);

                $(".item-row:last").after(
                  '<tr class="item-row"><td class="item-name">'+
                  '<textarea form ="testinsert" name="item_name['+i+']">Item Name</textarea>'+
                  '<a class="delete" href="javascript:;" title="Remove row">X</a>'+
                  '<a class="add-product" href="javascript:;" title="Add Product">A</a></div></td>'+
                  '<td class="description"><textarea form ="testinsert" name="item_desc['+i+']">Description</textarea></td>'+
                  '<td><textarea class="cost" form ="testinsert" name="item_cost['+i+']">$0</textarea></td><td><textarea class="qty" form ="testinsert" name="item_qty['+i+']" autofocus>0</textarea></td>'+
                  '<td><span class="price" form ="testinsert" name="item_price['+i+']">$0</span></td></tr>');

            if ($(".delete").length > 0) $(".delete").show();
            bind();

                    $('#address-title').val(invoices.customer);
                    $('#address-one').val(invoices.address);
                    $('#invoice_num').val(invoices.invoice);
                    $('#paid').val(invoices.paid);
                    $('#owed').val(invoices.sales);
                    $('#auto_num').val(invoices.autonum);
                    $('[name="item_name['+i+']"]').val(invoices.product);
                    $('[name="item_desc['+i+']"]').val(invoices.description);
                    $('[name="item_cost['+i+']"]').val(invoices.cost);
                    $('[name="item_qty['+i+']"]').val(invoices.quantity);
                    $('[name="item_price['+i+']"]').val(invoices.price);
            }
          });
          lastRow.remove();

        }

        $('#invoice_div #ddinvoice li').click(function(e) {
          var selection = $(this).attr("data-value");
          $(this).parent().parent().parent().hide();
          populateTableRow(data, selection);
          $('ul').empty();

推荐答案

感谢@Teemu对.html与.val的澄清，以及需要同时使用两者来解决此问题:

Thanks to @Teemu for the clarification on .html vs .val and the need to use both to solve the issue:

$.each(data, function(i, e) {
        if (this.cust_id == selectedProductAutonum) {
          invoices = this;
          custProducts = data.filter(({
            cust_id
          }) => cust_id === selectedProductAutonum);

            $(".item-row:last").after(
              '<tr class="item-row">'+
              '<td class="item-name">'+
                '<div class="delete-wpr">'+
                    '<textarea form ="testinsert" name="item_name[]">' + invoices.product + '</textarea>'+
                    '<a class="delete" href="javascript:;" title="Remove row">X</a>'+
                    '<a class="add-product" href="javascript:;" title="Add Product">A</a>'+
                '</div>'+
              '</td>'+
              '<td class="description"><textarea form ="testinsert" name="item_desc[]">' + invoices.description + '</textarea></td>'+
              '<td><textarea class="cost" form ="testinsert" name="item_cost[]">' + '$' + invoices.cost + '</textarea></td>'+
              '<td><textarea class="qty" form ="testinsert" name="item_qty[]">' + invoices.quantity + '</textarea></td>'+
              '<td><span class="price" form ="testinsert" name="item_price[]">' + '$' + invoices.price + '</span></td></tr>');

            if ($(".delete").length > 0) $(".delete").show();
            bind();

            $('#address-title').val(invoices.customer);
            $('#address-one').val(invoices.address);
            $('#invoice_num').val(invoices.invoice);
            $('#paid').val(invoices.paid);
            $('#owed').val(invoices.sales);
            $('#auto_num').val(invoices.autonum);

            //console.log($('.item-row:last').html());
        }
      });
      lastRow.remove();
      update_total();
}

这篇关于计算ajax调用的产品价格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！