jquery ui explete على صفوف متعددة تم إنشاؤها باستخدام .clone ()

Question

أنا جديد تقريبًا على jQuery ... لقد وجدت بعض البرامج التعليمية/المنشورات التي تشرح 1. كيفية استنساخ صف الجدول (مفيد لإدراج تفاصيل الفاتورة): http://forum.jquery.com/topic/validate-will-not-submit-to-server2. كيفية استخدام الإكمال التلقائي JQuery UI مع PHP و MySQL (مفيد لاسترداد المنتجات من جدول DB وتجنب كتابة كل شيء): http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-mysql/

حسنًا ، "حتى يمكنني الآن استنساخ صفوف الجدول ويمكنني الحصول على عمل AutoCmplete في الصف الأول ، لكن المشكلات تنشأ عند إضافة صف آخر وأتوقع العمل التلقائي هناك ، أيضًا وجدت موضوعًا هنا في Stackoverflow (http: // stackoverflow.com/questions/1492198/jquery-auto-complete-for-dynamially-textboxes) ، ولكن لم يكن محظوظًا في التقدم إلى حالتي ...

والآن ، الرمز:

الجزء HTML

<table border="0" cellspacing="0" cellpadding="4" class="grid" id="details">
 <thead>
  <tr>
   <th scope="col">Codice</th>
   <th scope="col">Nome</th>
   <th scope="col">Quantità</th>
   <th scope="col">Unità di misura</th>
   <th scope="col">Costo U.</th>
   <th scope="col">Totale</th>
  </tr>
 </thead>
 <tbody>
  <tr id="row_0" class="iterable">
   <td><input type="text" name="det_sku_0" id="det_sku_0" class="sku required" /></td>
   <td><input type="text" name="det_name_0" id="det_name_0" class="name required" /></td>
   <td><input name="det_quantity_0" id="det_quantity_0" type="text" class="required" /></td>
   <td>&nbsp;</td>
   <td><input name="det_price_0" id="det_price_0" type="text" class="required" />€</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<ul>
 <li><a href="javascript:void(0);" id="remove" class="icons icon-0">Rimuovi ultima riga</a></li>
 <li><a href="javascript:void(0);" id="add" class="icons icon-new">Aggiungi riga</a></li>
 <li><input type="submit" name="button" id="button" value="Salva tutto" /></li>
</ul>

جزء jQuery

    function addrow(destination) {
     rowcount = parseInt(parent_row.attr('id').replace('row_',''))+1;
     clonecopy = destination.clone(true);
     clonecopy.attr("class","iterable");
     // update numerical suffixes
     clonecopy.attr("id","row_"+rowcount);
     clonecopy.find('.sku, .name').val('');
     clonecopy.find("input[name^='det_sku']").attr({
      "name": "det_sku_"+rowcount,
      "id": "det_sku_"+rowcount
     });
     clonecopy.find("input[name^='det_name']").attr({
      "name": "det_name_"+rowcount,
      "id": "det_name_"+rowcount
     });
     clonecopy.find("select[name^='det_quantity']").attr({
      "name": "det_quantity_"+rowcount,
      "id": "det_quantity_"+rowcount
     });
     clonecopy.find("select[name^='det_price']").attr({
      "name": "det_price"+rowcount,
      "id": "det_price"+rowcount
     });
     clonecopy.insertAfter(destination);
     $('#det_arrayitems').val(rowcount);
    }

$("#add").click(function() {
        parent_row = $('#details tbody>tr:last');
        addrow(parent_row);
    });    

$('input.sku').autocomplete({
     source: "../json/products.php",
     minLength: 2,
     select: function(event, ui) {
      $(this).parent().siblings().children('input.name').val(ui.item.name);
     }
    })

لقد جربت هذا أيضًا (واثنين من الأفكار الأخرى) ، لكن لا حظ

$("#add").live("click", function() {
 parent_row = $('#details tbody>tr:last');
 addrow(parent_row);
 $('input.sku').autocomplete({
  source: "../json/products.php",
  minLength: 2,
  select: function(event, ui) {
   $('input.sku').parent().siblings().children('input.name').val(ui.item.name);
  }
 })
});

ارجوك، هل يمكنك مساعدتي؟ شكرًا...

Answer 1

وجدت الحل ، اضطررت إلى وضع الإكمال التلقائي داخل وظيفة AddRow وإزالة كلمة "صواب" من .clone (صحيح) وفقًا (وشكر) لهذا: jQuery: كيف تستنسخ الحقول الإكمال التلقائي؟

function addrow(destination) {
 rowcount = parseInt(parent_row.attr('id').replace('row_',''))+1;
 clonecopy = destination.clone();
 clonecopy.attr("class","iterable");
 // update numerical suffixes
 clonecopy.attr("id","row_"+rowcount);
 clonecopy.find('.sku, .name').val('');
 clonecopy.find("input[name^='det_sku']").attr({
  "name": "det_sku_"+rowcount,
  "id": "det_sku_"+rowcount
 }).autocomplete({       
  source: "../json/products.php",       
  minLength: 2,
  select: function(event, ui) {
   $(this).parent().siblings().children('input.name').val(ui.item.name);       
  }
 });
 clonecopy.find("input[name^='det_name']").attr({
  "name": "det_name_"+rowcount,
  "id": "det_name_"+rowcount
 });

 clonecopy.find("select[name^='det_quantity']").attr({
  "name": "det_quantity_"+rowcount,
  "id": "det_quantity_"+rowcount
 });
 clonecopy.find("select[name^='det_price']").attr({
  "name": "det_price"+rowcount,
  "id": "det_price"+rowcount
 });
 clonecopy.insertAfter(destination);
 $('#det_arrayitems').val(rowcount);

}

Answer 2

أفعل شيئًا مشابهًا حيث لدي DIV يحمل جميع الصفوف ، ويحتوي حقل الإدخال EACT في صف على علامة REL مع الجزء الأساسي من اسمه ومعرفه ثم على النقر لإضافة صف أدعو ما يلي:

 $("#addChain").click(function() {  
         var index = $("#chainHolder").children().length + 1;  
        $("#chainHolder").children(":first").clone().each(function() {  
       $(this).find(":input").each(function() {  
                $(this).attr("id", $(this).attr("rel")+"["+index+"]");  
                $(this).attr("name", $(this).attr("rel")+"["+index+"]");  
            });  
             $(this).children(":first").val(index);  
        }).appendTo("#chainHolder");  
    });  

Answer 3

قم بإنشاء زر مع اسم فئة Addmore ، ثم على الزر انقر فوق استدعاء الطريقة التالية. يرجى تكوين صف الجدول الخاص بك مثل هذا أدناه وأخيرا إلحاق أن تشكل HTML إلى الجدول الخاص بك.

//adds extra table rows
var i=$('table tr').length;
$(".addmore").on('click',function(){
     html = '<tr>';
     html += '<td><input class="case" type="checkbox"/></td>';
     html += '<td><input type="text" data-type="productCode" name="itemNo[]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
     html += '<td><input type="text" data-type="productName" name="itemName[]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
     html += '<td><input type="text" name="price[]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
     html += '<td><input type="text" name="quantity[]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
     html += '<td><input type="text" name="total[]" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
     html += '</tr>';
     $('table').append(html);
     i++;
 });

سيقوم البرنامج النصي التالي بإجراء جزء الحذف ... لحذف زر إنشاء مع اسم فئة الحذف.

//deletes the selected table rows
$(".delete").on('click', function() {
   $('.case:checkbox:checked').parents("tr").remove();
   $('#check_all').prop("checked", false); 
});

لقد صنعت تعليميًا بسيطًا لنظام فاتورة عينة مع جميع الوظائف التي ذكرتها من قبل

1. إضافة صف متعدد الجدول إضافة وحذف
2. الإكمال التلقائي المتعدد والكثير

نظام الفاتورة باستخدام الإكمال التلقائي jQuery