使用select2 ajax添加新字段时，前面的字段会消失 [英] Previous fields text disappears when adding new one with select2 ajax

问题描述

我在输入框中使用select2插件，根据用户输入的内容，使用AJAX从数据库中搜索项目。它工作正常，我可以搜索它上的项目，并选择它时，但我的问题是每当我添加新的行在我的桌子上的前面的项目字段文本将消失，我正在一个桌子，你可以动态添加/删除行，这里是我的HTML：

 < td>< input name ='product [0] [ name]'class ='form-control col-lg-5 itemSearch'type ='text'placeholder ='select item'/>< / td> 
  

和我的javascript：

  function addRow（）{
 var toBeAdded = document.getElementById（'toBeAdded'）。value; 
 if（toBeAdded ==''）
 {toBeAdded = 2; } 
 else if（toBeadded> 10）
 {
 toBeAdded = 10; 
} 
 
 for（var i = 0; i  var rowToInsert ='; 
 
 rowToInsert =< tr>< td>< input name ='product [+ rowArrayId +] [name]'class ='form-control col-lg-5 itemSearch'type ='text'placeholder ='select item'/>< / td>; 
 $（＃tblItemList tbody）。append（
 rowToInsert + 
< td>< textarea readonly name ='product [+ rowArrayId +] [description]'class =' form-control description'rows ='1'>< / textarea>< / td>+ 
< input type ='hidden'name ='product [+ rowArrayId +] [itemId ]'id ='itemId'>+ 
< td>< input type ='number'min ='1'max ='9999'name ='product [+ rowArrayId +] [quantity ]'class ='qty form-control'required />+ 
< input id ='poItemId'type ='hidden'name ='product [+ rowArrayId +] [poContentId]'> ;< / td>+ 
< td>< input type ='number'min ='1'step ='any'max ='9999'name ='product [+ rowArrayId +] [price]'class ='price form-control'required />< / td>+ 
< td class ='subtotal'>< center>< h3& h3>< / center>< / td>+ 
< input type ='hidd en'name ='product [+ rowArrayId +] [delete]'class ='hidden-deleted-id'>+ 
< td class ='actions'>< a href =' ＃'class ='btnRemoveRow btn btn-danger'> x< / a>< / td>+ 
< / tr>）; 
 
 rowArrayId = rowArrayId + 1; 
};选择产品'，
 formatResult：productFormatResult，
 formatSelection：productFormatSelection ，
 dropdownClass：'bigdrop'，
 escapeMarkup：function（m）{return m;}，
 minimumInputLength：1，
 ajax：{
 url：'/ api / productSearch'，
 dataType：'json'，
 data：函数（term，page）{
 return {
q：term 
}; 
 }，
 results：function（data，page）{
 return {results：data}; 
} 
} 
}）; 
 
 
函数productFormatResult（product）{
 var html =< table>< tr>; 
 html + =< td>; 
 html + = product.itemName; 
 html + =< / td>< / tr>< / table>; 
返回html; 
} 
 
 function productFormatSelection（product）{
 var selected =< input type ='hidden'name ='itemId'value ='+ product.id +' />中; 
返回selected + product.itemName; 
 
 
 $（。qty，.price）。bind（keyup change，calculate）; 
}; 
  

以下是一些截图：

1st状态：

第二状态：当在输入框中搜索项目时

时

第三种状态：在我的表上添加新行后

有什么可以解决的问题？

解决方案

用于添加行时的输入元素。

最好在页面中使用唯一的ID。

I was using select2 plugin on my input box to search items from the database using AJAX based on what the user type on it. It was working fine, I can search Items on it and select it when its available, but my problem is whenever I add new rows on my table the previous item fields "text" will be gone, I'm making a table where you can add/remove rows dynamically so here is my HTML:

<td><input name='product[0][name]' class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' /></td>

and my javascript:

function addRow(){
var toBeAdded = document.getElementById('toBeAdded').value;
if (toBeAdded=='')
    { toBeAdded = 2; }
else if(toBeAdded>10)
{
  toBeAdded = 10;
}

  for (var i = 0; i < toBeAdded; i++) {
    var rowToInsert = '';

     rowToInsert = "<tr><td><input name='product["+rowArrayId+"][name]' class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' /></td>";
    $("#tblItemList tbody").append(
        rowToInsert+
        "<td><textarea readonly name='product["+rowArrayId+"][description]' class='form-control description' rows='1' ></textarea></td>"+
        "<input type='hidden' name='product[" + rowArrayId + "][itemId]' id='itemId'>"+
        "<td><input type='number' min='1' max='9999' name='product["+rowArrayId+"][quantity]' class='qty form-control' required />"+
        "<input id='poItemId' type='hidden' name='product[" + rowArrayId + "][poContentId]'></td>"+
        "<td><input type='number' min='1' step='any' max='9999' name='product["+rowArrayId+"][price]' class='price form-control' required /></td>"+
        "<td class='subtotal'><center><h3>0.00</h3></center></td>"+
        "<input type='hidden' name='product["+rowArrayId+"][delete]' class='hidden-deleted-id'>"+
        "<td class='actions'><a href='#' class='btnRemoveRow btn btn-danger'>x</a></td>"+
        "</tr>");

        rowArrayId = rowArrayId + 1;
     };


 $(".itemSearch").select2({
    placeholder: 'Select a product',
    formatResult: productFormatResult,
    formatSelection: productFormatSelection,
    dropdownClass: 'bigdrop',
    escapeMarkup: function(m) { return m; },
    minimumInputLength:1,
    ajax: {
        url: '/api/productSearch',
        dataType: 'json',
        data: function(term, page) {
            return {
                q: term
            };  
        },  
        results: function(data, page) {
            return {results:data};
        }   
    }   
});


function productFormatResult(product) {
var html = "<table><tr>";
 html += "<td>";
html += product.itemName ;
html += "</td></tr></table>";
return html;
}

  function productFormatSelection(product) {
  var selected = "<input type='hidden' name='itemId' value='"+product.id+"'/>";
  return selected + product.itemName;
 }

 $(".qty, .price").bind("keyup change", calculate);
 };

here are some screenshots:

1st state:

2nd state: when searching item on the input box

3rd state: after adding new row on my table

What can be the issue?

解决方案

The same id value is used for the input elements as rows get added.

It is best to have unique id within the page.

这篇关于使用select2 ajax添加新字段时，前面的字段会消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！