Jquery'on change'事件处理程序正在进行多个意外的ajax调用

时间:2014-12-23 00:17:14

标签: javascript jquery ajax

我正在创建一个表单,在选择了两个输入(公司值和日期值)后进行AJAX调用,返回的数据填充表中输入选择的可用选项。

这是我的代码:

var _cateringCo = $('#catering-company-id')
var _orderDate = $("#order_date")

    $("#order_date, #catering-company-id").on('change', function(){

          // clear out all products in table first
          $('#sample_order_products tr').remove()

          //only make call if both fields do not have null values
          if(_cateringCo.val() !== "" && _orderDate.val() !== ""){

            var data = {catering_company_id: _cateringCo.val(), order_date: _orderDate.val()};

            $.ajax({
              type: 'GET',
              data: data,
              url: '<%= get_main_products_for_day_admin_sample_orders_path%>',
              dataType: 'json',
              success: function(data){
                var products = data.products

                //append new input item to table
                if(products.length > 0){
                  $('#sample_order_products').append(addProducts(products));
                }

              }
            })

          }

以下是在回调完成后用于填充表的另外两种方法:

var addOptions = function(products){
      string = "";
      for (var i = 0; products.length > i; i++){
        var product = products[i]
        var name = product.display_name
        var product_id = product.product_id

        string += "<option value='"+product_id+"'>"+name+"</option>"
      }
      return string
    }

    var addProducts = function(products){
      return "<tr>" +
                "<td>" +
                  "<select name='sample_order[sample_order_meals_attributes][][product_id]' class='validate[required]'>" + addOptions(products) +
                "</td>" +
                "<td>" +
                  "<input name='sample_order[sample_order_meals_attributes][][quantity]' type='number' class='validate[required]'>" +
                "</td>"
              "</tr>"
    }

我的问题是当我为'date'值进行更改事件(从datepicker中选择一个新日期)时,我正在进行3次调用(最后将3行添加到我的表)。

然而,当我为'company'值进行更改事件时,它只进行一次调用,从而在表中追加1行(这就是我想要的)。

我不知道这个日期的更改事件有什么不同。

0 个答案:

没有答案