2014-01-08 166 views
2

场景: 我有一个下拉列表,用户可以选择一个供应商。基于他们选择的供应商,用户可以使用纸张搜索(使用JQuery Autocomplete)搜索一个项目。选择某个项目时,descriptionpriceper_pack文本框将填充该特定项目的相关信息(此信息从我的数据库中提取)。Jquery自动填充不填充其他字段

这是它目前的样子: enter image description here

问题: 当用户选择从纸张的搜索项目,上述的文本框没有被填入相关信息,我有不知道为什么会发生这种情况。有谁知道这是为什么?

这是纸搜索的代码:

$(function() { 
window.globalVar = 0; 

// Skip the filled description boxes 
for (var i=0; i<10; i++) 
{ 
    if($('#description_'+window.globalVar).val() != "") 
    { 
     window.globalVar++; 
    } 
} 

// Write the paper description and price for the selected paper 
function log(message) { 
    var values = message.split('|'); 
    $('#description_'+window.globalVar).val(values[0]); 
    $('#priceper_'+window.globalVar).val(values[1]); 
$('#per_pack_'+window.globalVar).val(values[2]); 
    window.globalVar++; 
    console.log(window.globalVar); 
} 

// Search the Paper db 
$("#supplier_search").autocomplete({ 
    source: function(request, response) { 
    $.ajax({ 
     url: "http://mpc.vario/mis_pp/common/pp_json", 
     dataType: "jsonp", 
     data: { 
     featureClass: "P", 
     style: "full", 
     maxRows: 25, 
     name_startsWith: request.term, 
     supplier: $('#supplier').val() 
     }, 
     success: function(data) { 
     console.log(data); 
     response($.map(data, function(item) { 
      return { 
      label: item.name, 
      value: item.name + '|' + item.value + '|' + item.pack 
      } 
     })); 
     } 
    }); 
    }, 
    minLength: 2, 
    select: function(event, ui) { 
    log(ui.item.value); 
    $(this).val(''); 
    return false; 
    }, 
    open: function() { 
    $(this).removeClass("ui-corner-all").addClass("ui-corner-stop"); 
    }, 
    close: function() { 
    $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
    } 
}); 
}); 

这是添加/删除行的代码:看作为详细信息字段的人口是

$(document).ready(function() { 
    $counter = 1; 
    $('#buttonadd').click(function() { 
     $counter++; 
     $('#invoiceitems > tbody:last').append('<tr><td><input type="button" class="buttondelete" value="Delete"/></td>\ 
     <td><input type="text" name="item[' + $counter + '][description]" id="description_" class="description" size="85" maxlength="70" value="" /></td>\ 
     <td><input type="text" name="item[' + $counter + '][priceper]" id="description_" class="priceper" size="10" maxlength="9" value="" /></td>\ 
     <td><input type="text" name="item[' + $counter + '][per_pack]" id="per_pack_" class="per_pack" size="10" maxlength="9" value="" /></td>\ 
     <td><input type="text" name="item[' + $counter + '][quantity]" id="quantity_" class="quantity" size="10" maxlength="9" value="" /></td>\ 
     <td><label class="subtotal"></label></td></tr>'); 

    }); 
    $('table#invoiceitems').on('keyup', '.quantity , .priceper',function() { 
     UpdateTotals(this); 
    }); 

    $counter = 1; 
     $('table#invoiceitems').on('click','.buttondelete',function() { 
     $counter++; 
     if($('table#invoiceitems tbody tr').length==1){ 
      alert('Cant delete single row'); 
      return false; 
     } 
     $(this).closest('tr').remove(); 

    }); 
    CalculateSubTotals(); 
    CalculateTotal(); 
    }); 
+0

你说的问题是,删除项目后,该值不增加项目时进入文本框?还是你说删除一个项目后,这些值会被搞砸了? – ovaherenow

+1

我觉得我没有很好地解释自己:在集成了添加和删除功能之前,我可以从纸张搜索中选择一个项目,并且这些值将轻松地显示在文本框中。但是,修改我的代码后,我可以使用户删除并添加更多项目,这些值不再出现在文本框中。如果我从我的搜索中选择一个项目,什么都不会发生@ovaherenow –

+0

@rache_r请添加您的javascript用于添加和删除行 – CSL

回答

0

取决于“行号”(通过window.globalVar)

请确保每当您删除并添加新的订单项时,您都会重新计算“有效”行。

被设置字段的值的代码本节:

$('#description_'+window.globalVar).val(values[0]); 
$('#priceper_'+window.globalVar).val(values[1]); 
$('#per_pack_'+window.globalVar).val(values[2]); 

调试JavaScript和在从下拉列表中选择的时间和项目检查window.globalVar值。您很可能会发现该值不正确,并且您试图设置文档中不存在的控件的值。

+0

是这样的,以便在添加和删除新的订单项? @CSL –

+0

@rache_r请参阅编辑我的答案 – CSL

+0

@rache_r Firefox有一个名为Firebug的优秀插件,但我倾向于使用谷歌浏览器 - 只需在页面上按F12,它就会打开一个窗口,其中包含脚本调试器。你可以设置断点,手表等 – CSL

0

window.globalVar确实试图将其值设置为不存在的控件。

的作品更新的代码:

$(function() { 
    window.globalVar = 1; 

    // Write the paper description and price for the selected paper 
    function log(message) { 
     var values = message.split('|'); 
     $('#description_'+window.globalVar).val(values[0]); 
     $('#priceper_'+window.globalVar).val(values[1]); 
    $('#per_pack_'+window.globalVar).val(values[2]); 
     console.log(window.globalVar); 
    } 

    // Search the Paper db 
    $("#supplier_search").autocomplete({ 
     source: function(request, response) { 
     $.ajax({ 
      url: "http://mpc.vario/mis_pp/common/pp_json", 
      dataType: "jsonp", 
      data: { 
      featureClass: "P", 
      style: "full", 
      maxRows: 25, 
      name_startsWith: request.term, 
      supplier: $('#supplier').val() 
      }, 
      success: function(data) { 
      console.log(data); 
      response($.map(data, function(item) { 
       return { 
       label: item.name, 
       value: item.name + '|' + item.value + '|' + item.pack 
       } 
      })); 
      } 
     }); 
     }, 
     minLength: 2, 
     select: function(event, ui) { 
     log(ui.item.value); 
     $(this).val(''); 
     return false; 
     }, 
     open: function() { 
     $(this).removeClass("ui-corner-all").addClass("ui-corner-stop"); 
     }, 
     close: function() { 
     $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
     } 
    }); 
    }); 

$(document).ready(function() { 
    $counter = 1; 
    $('#buttonadd').click(function() { 
     $counter++; 
     $('#invoiceitems > tbody:last').append('<tr><td><input type="button" class="buttondelete" value="Delete"/></td>\ 
     <td><input type="text" name="item[' + $counter + '][description]" id="description_' + $counter + '" class="description" size="85" maxlength="70" value="" /></td>\ 
     <td><input type="text" name="item[' + $counter + '][priceper]" id="priceper_' + $counter + '" class="priceper" size="10" maxlength="9" value="" /></td>\ 
     <td><input type="text" name="item[' + $counter + '][per_pack]" id="per_pack_' + $counter + '" class="per_pack" size="10" maxlength="9" value="" /></td>\ 
     <td><input type="text" name="item[' + $counter + '][quantity]" id="quantity_' + $counter + '" class="quantity" size="10" maxlength="9" value="" /></td>\ 
     <td><label class="subtotal"></label></td></tr>'); 
    window.globalVar = $counter; 

    }); 
    $('table#invoiceitems').on('keyup', '.quantity , .priceper',function() { 
     UpdateTotals(this); 
    }); 

    $counter = 1; 
     $('table#invoiceitems').on('click','.buttondelete',function() { 
     $counter++; 
     if($('table#invoiceitems tbody tr').length==1){ 
      alert('Cant delete single row'); 
      return false; 
     } 
     $(this).closest('tr').remove(); 
    UpdateTotals(this); 

    }); 
    CalculateSubTotals(); 
    CalculateTotal(); 
    });