jQuery UI autocomplete sur plusieurs lignes créées avec la méthode .clone()

Question

Je suis presque nouveau à jQuery ... J'ai trouvé quelques tutoriels/posts expliquant 1. comment cloner une ligne de table (utile pour insérer les détails de la facture): http://forum.jquery.com/topic/validate-will-not-submit-to-server 2. comment utiliser la saisie semi-automatique jQuery UI avec PHP et MySQL (utile pour la récupération des produits à partir d'une table db et éviter tout frappe): http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/

Eh bien, jusqu'à maintenant, je peux cloner des lignes de table et je peux obtenir autocmplete travailler sur la première ligne, mais des problèmes surviennent lorsque j'ajoute une autre ligne et je m'attends à ce que le travail de saisie semi-automatique là aussi, trop J'ai trouvé un fil ici dans StackOverflow (http://stackoverflow.com/questions/1492198/jquery-auto-complete- pour-dynami Généré ment-textboxes), mais n'a pas eu la chance d'appliquer à mon cas ...

Et maintenant, le code:

La partie 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> 

La partie 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); 
    } 
    }) 

J'ai aussi essayé ceci (et quelques autres idées), mais pas de chance

$("#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); 
    } 
}) 
}); 

S'il vous plaît, pouvez-vous m'aider? Merci ...

Answer 1

trouvé la solution, je devais mettre la saisie semi-automatique dans la fonction addRow et de supprimer le mot « vrai » du .clone (true) selon (et merci) à cette : JQuery: How to clone autocomplete fields?

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

Je fais quelque chose de similaire où j'ai un div qui contient toutes les lignes, et eact champ d'entrée dans une rangée a une étiquette rel avec la partie de base de son nom et ID, puis sur le clic pour ajouter une ligne que j'appelle les éléments suivants:

$("#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

Créer un bouton avec h nom de classe de addmore, puis sur le bouton, cliquez sur la méthode suivante. S'il vous plaît former votre ligne de tableau comme ci-dessous et enfin ajouter que html formé à votre table. Le script suivant effectuera la partie de suppression ... Pour supprimer créer un bouton avec le nom de la classe de suppression.

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

j'avais fait tutoriel simple pour le système de facturation de l'échantillon avec toutes les fonctionnalités que vous avez mentionné dès

1. multiple ligne de table ajouter et supprimer
2. multiples autocomplete et beaucoup

Invoice System Using jQuery AutoComplete