【发布时间】:2014-01-10 21:16:09
【问题描述】:
场景:
我有一个下拉列表,用户可以在其中选择供应商。根据他们选择的供应商,用户可以使用纸张搜索(使用 JQuery 自动完成)搜索项目。选择一个项目后,description、price 和 per_pack 文本框将填充该特定项目的相关信息(此信息来自我的数据库)。
这是它目前的样子:
问题: 当用户从纸质搜索中选择一个项目时,上述文本框没有填充相关信息,我不知道为什么会发生这种情况。有谁知道这是为什么?
这是论文搜索的代码:
$(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();
});
【问题讨论】:
-
您是说问题是删除项目后,添加项目时值不会进入文本框吗?或者你是说删除一个项目后,值搞砸了?
-
我想我没有很好地解释自己:S 在我集成添加和删除功能之前,我能够从论文搜索中选择一个项目,并且值会轻松地出现在文本框中。但是,在修改我的代码以便我能够让用户删除和添加更多项目之后,这些值不再出现在文本框中。如果我从搜索中选择一个项目,则不会发生任何事情@ovaherenow
-
@rache_r 请添加您的 javascript 以添加和删除行
-
请在@CSL上方找到添加和删除行的代码
标签: javascript jquery html autocomplete