autocomplete sur formulaire généré dynamiquementRésolu

Question

Bonjour à tous ! J'utilise l'autocomplete de jquery ui, ça marche très bien sur des formulaire simple : avec plus bas : Marque là où ça se corse c'est si le input est rajouté grace à un script java... tel que (extrait de la fonction ajout, qui rajoute normalement beaucoup d'autres champs ) : function ajout() { var table =document.getElementById("Produits_Fournisseur"); var row = table.insertRow(table.rows.length); row.insertCell(row.cells.length).innerHTML= ""; } Donc déjà la ca ne fonctionne pas, l'autocomplete sur le champ "designation_produit" ne marche pas... et en plus je voudrai pouvoir faire en sorte qu'il s'applique sur tous les champs similaire avec un fonction ajout générant un array : function ajout() { var table=document.getElementById("Produits_Fournisseur"); var row = table.insertRow(table.rows.length); row.insertCell(row.cells.length).innerHTML= ""; } Voila, je suis vraiment perdu, merci d'avance si vous pouvez m'aider :)

chino18 · Accepted Answer

Dans ton premier bout de code, celui qui fonctionne tu as:

$("#DESIGNATION_PRODUIT").autocomplete({ 

Concrètement, tu appliques l'auto-complète sur l'élément dont l'Id est "DESIGNATION_PRODUIT".

Il faut donc donner un Id à ton champ:


function ajout()

{	var table= document.getElementById("Produits_Fournisseur");

var row = table.insertRow(table.rows.length);

                        // création du champ
                        var champ = document.createElement('input');
                        champ.Type = 'text';
                        champ.Name = 'DESIGNATION_PRODUIT';
                        champ.Id = 'DESIGNATION_PRODUIT';
    
                        // affectation du champ dans la cellule
row.insertCell(row.cells.length).appendChild(champ);

}


Mais attention, tu ne dois pas avoir plusieurs champs avec le même Id.

Si tu as plusieurs champs DESIGNATION_PRODUIT qui sont générés dans un boucle, il faudra que adapte ta fonction autocomplete.
Dans ce cas mieux vaut utiliser une classe css unique pour chaque input, et ensuite tu applique ta fonction autocomplete sur tous les éléments qui ont cette classe.

Je ne sais pas si j'ai été assez clair... 


Pour le $("#Produits_Fournisseur"), tu as raison.
Dans ce cas tu utilises "table" comme un élément classique, j'ai pas fait attention.
Alors que $("#Produits_Fournisseur") te renvoie un objet jQuery. Mea culpa 



-- message approuvé par Jean-Claude Van Damme --

chino18 · Answer

Salut.

Ton "innerHTML", pour moi, est une solution un peu crado.

Je serais toi j'ajouterais ton champ en utilisant le DOM, qui est plus propre.

function ajout()

{	var table=$("#Produits_Fournisseur"); // tu utilises jQuery, donc autant remplacer document.getElementById

var row = table.insertRow(table.rows.length);

                        // création du champ
                        var champ = document.createElement('input');
                        champ.Type = 'text';
                        champ.Name = 'DESIGNATION_PRODUIT';
    
                        // affectation du champ dans la cellule
row.insertCell(row.cells.length).appendChild(champ);

}

J'ai pas testé à vrai dire. Mais ca devrait marcher.

A+

-- message approuvé par Jean-Claude Van Damme --

Korxxx · Answer

Merci pour ta réponse.
Avec les changements que tu as proposé ca me donne :

		function ajout()

{	
var table=document.getElementById("Produits_Fournisseur");

var row = table.insertRow(table.rows.length);

                        var champ1 = document.createElement('input');
                        champ1.Type = 'text';
                        champ1.Name = 'DESIGNATION_PRODUIT';

var champ2 = document.createElement('input');
                        champ1.Type = 'text';
                        champ1.Name = 'PRIX_FOURNISSEUR';

var champ3 = document.createElement('input');
                        champ1.Type = 'text';
                        champ1.Name = 'CONDITIONNEMENT';
    
row.insertCell(row.cells.length).appendChild(champ1);
row.insertCell(row.cells.length).appendChild(champ2);
row.insertCell(row.cells.length).appendChild(champ3);
}
$(function() {	 
 $("#DESIGNATION_PRODUIT").autocomplete({
    source: "jqautocomplete.php?tn=PRODUITS&fn=DESIGNATION_PRODUIT&id=ID_PRODUIT",
        minLength: 2,
    select: function(event, ui) 
{
$('#ID_PRODUIT').val(ui.item.id);
}
        });
});



Mais l'autocomplete ne fonctionne toujours pas :(


(en revanche quand j'ai voulu remplacer document.getElementById j'ai eu une erreur (table.rows not defined) )

Korxxx · Answer

on peut pas editer les messages ?

Des erreurs dans le message d'avant, c'est bien sur :

function ajout()

{	
var table=document.getElementById("Produits_Fournisseur");

var row = table.insertRow(table.rows.length);

                        var champ1 = document.createElement('input');
                        champ1.Type = 'text';
                        champ1.Name = 'DESIGNATION_PRODUIT';

var champ2 = document.createElement('input');
                        champ2.Type = 'text';
                        champ2.Name = 'PRIX_FOURNISSEUR';

var champ3 = document.createElement('input');
                        champ3.Type = 'text';
                        champ3.Name = 'CONDITIONNEMENT';
    
row.insertCell(row.cells.length).appendChild(champ1);
row.insertCell(row.cells.length).appendChild(champ2);
row.insertCell(row.cells.length).appendChild(champ3);
}
$(function() {	 
 $("#DESIGNATION_PRODUIT").autocomplete({
    source: "jqautocomplete.php?tn=PRODUITS&fn=DESIGNATION_PRODUIT&id=ID_PRODUIT",
        minLength: 2,
    select: function(event, ui) 
{
$('#ID_PRODUIT').val(ui.item.id);
}
        });
});

Korxxx · Answer

Je connais pas Jquery, j'ai juste utilisé le widget de jquery ui ;) Je pense avoir sur un forum une solution, mais je comprends rien au code et comment l'adapter :/ Il me semble que ce code rajoute des input avec autocomplete : # $(document).ready(function(){ # var inputs = 0; # $(".insert").live("click", function(){ # inputs++; # $("") # .appendTo("tr:has(.insert)") # .find("input") # .autocomplete("getValues.jsp",{ extraParams: {action:"getProducts"} }); # });

Korxxx · Answer

Bon, j'ai réussi à l'adapter : var inputs = 0; function ajout() { inputs++; var table=document.getElementById("Produits_Fournisseur"); var row = table.insertRow(table.rows.length); $("") .appendTo(row) .find("input") .autocomplete({ source: "jqautocomplete.php?tn=PRODUITS&fn=DESIGNATION_PRODUIT&id=ID_PRODUIT", minLength: 2, select: function(event, ui) { $('#ID_PRODUIT').val(ui.item.id); } }); var champ2 = document.createElement('input'); champ2.Type = 'text'; champ2.Name = 'PRIX_FOURNISSEUR_'+inputs; var champ3 = document.createElement('input'); champ3.Type = 'text'; champ3.Name = 'CONDITIONNEMENT_'+inputs; row.insertCell(row.cells.length).appendChild(champ2); row.insertCell(row.cells.length).appendChild(champ3); } Ça marche Plus qu'à récupérer les données du formulaire en espérant que mes nommages soient bon ^^

Korxxx · Answer

Merci pour ta réponse, je vois le concept de la classe, c'est élégant... 

(plus que ce que j'ai fait au dessus... ) Mais je vais perdre du temps avant d'y arriver et je suis déjà en retard !

Ceci dit si tu trouves que c'est vraiment crade je me repenche dessus un peu plus tard... 


Pour $("#DESIGNATION_PRODUIT") je pensais que ca s'appliquerait vu que j'avais name=DESIGNATION_PRODUIT, je pensais pas qu'il fallait spécifiquement un id=DESIGNATION_PRODUIT en plus.

Pour le moment j'ai appliqué une boucle pour avoir DESIGNATION_PRODUIT_1, DESIGNATION_PRODUIT_2 etc... 
Après je sais pas si c'est bien, ce serait peut être mieux d'avoir un Array ?

Korxxx · Answer

la syntaxe champ.Name ne fonctionnait pas, voila la correction :

chino18 · Answer

Pour $("#DESIGNATION_PRODUIT") je pensais que ca s'appliquerait vu que j'avais name=DESIGNATION_PRODUIT, je pensais pas qu'il fallait spécifiquement un id=DESIGNATION_PRODUIT en plus.

Si tu voulais sélectionner tous les input qui ont comme attribut name "DESIGNATION_PRODUIT", il faudrait écrire:

$("input[name='DESIGNATION_PRODUIT']")

je crois même que ça aussi ça passerait:

$("[name='DESIGNATION_PRODUIT']")

Vas voir la doc jQuery pour plus d'infos.

Mais de toute manière, sur ton formulaire, tu ne peux pas avoir plusieurs champs texte avec le même attribut name.
Il me semble que si tu récupère la valeur de tes champs après soumission, $_POST['DESIGNATION_PRODUIT'] contiendra la valeur du dernier champ texte auquel tu as donné l'attribut name.

-- message approuvé par Jean-Claude Van Damme --

Autocomplete sur formulaire généré dynamiquement

9 réponses

Votre réponse

Discussions similaires