Autocomplete sur formulaire généré dynamiquement

Résolu
Korxxx
Messages postés
9
Date d'inscription
jeudi 17 juin 2010
Statut
Membre
Dernière intervention
28 juin 2010
- 28 juin 2010 à 10:16
chino18
Messages postés
82
Date d'inscription
jeudi 22 avril 2004
Statut
Membre
Dernière intervention
1 avril 2011
- 29 juin 2010 à 14:36
Bonjour à tous !

J'utilise l'autocomplete de jquery ui, ça marche très bien sur des formulaire simple :

<script type= "text/javascript">
$(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);
}
        });
});
</script>


avec plus bas :

<label>Marque</label>




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 :)

9 réponses

chino18
Messages postés
82
Date d'inscription
jeudi 22 avril 2004
Statut
Membre
Dernière intervention
1 avril 2011
1
28 juin 2010 à 12:06
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 --
3
Korxxx
Messages postés
9
Date d'inscription
jeudi 17 juin 2010
Statut
Membre
Dernière intervention
28 juin 2010

28 juin 2010 à 15:26
la syntaxe champ.Name ne fonctionnait pas, voila la correction :


<script type="text/javascript">
var i=0;
function ajout()

{	
i++;
var table=document.getElementById("Produits_Fournisseur");
var row = table.insertRow(table.rows.length);

var champ = document.createElement('input');
champ.setAttribute("type", "hidden");
champ.setAttribute("name", "ID_PRODUIT_"+i);
              
$("<td></td>")
.appendTo(row)
.find("input")
.autocomplete({
      source: "jqautocomplete.php?tn=PRODUITS&fn=DESIGNATION_PRODUIT&id=ID_PRODUIT",
      minLength: 2,
      select: function(event, ui) 
{
$(champ).val(ui.item.id);
}
});

var champ2 = document.createElement('input');
                                champ2.setAttribute("type", "text");
                                champ2.setAttribute("name", "PRIX_FOURNISSEUR_"+i);
row.insertCell(row.cells.length).appendChild(champ2);

var champ3 = document.createElement('input');
                                champ3.setAttribute("type", "text");
                                champ3.setAttribute("name", "CONDITIONNEMENT_"+i);
row.insertCell(row.cells.length).appendChild(champ3);

row.insertCell(row.cells.length).appendChild(champ);

}	
</script>
3
chino18
Messages postés
82
Date d'inscription
jeudi 22 avril 2004
Statut
Membre
Dernière intervention
1 avril 2011
1
28 juin 2010 à 10:45
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 --
0
Korxxx
Messages postés
9
Date d'inscription
jeudi 17 juin 2010
Statut
Membre
Dernière intervention
28 juin 2010

28 juin 2010 à 11:11
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) )
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Korxxx
Messages postés
9
Date d'inscription
jeudi 17 juin 2010
Statut
Membre
Dernière intervention
28 juin 2010

28 juin 2010 à 11:14
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);
}
        });
});
0
Korxxx
Messages postés
9
Date d'inscription
jeudi 17 juin 2010
Statut
Membre
Dernière intervention
28 juin 2010

28 juin 2010 à 11:18
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++;
#  $("<td></td>")
#       .appendTo("tr:has(.insert)")
#       .find("input")
#       .autocomplete("getValues.jsp",{ extraParams: {action:"getProducts"} });
#  }); 
0
Korxxx
Messages postés
9
Date d'inscription
jeudi 17 juin 2010
Statut
Membre
Dernière intervention
28 juin 2010

28 juin 2010 à 12:12
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);			
$("<td></td>")
.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 ^^
0
Korxxx
Messages postés
9
Date d'inscription
jeudi 17 juin 2010
Statut
Membre
Dernière intervention
28 juin 2010

28 juin 2010 à 12:18
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 ?
0
chino18
Messages postés
82
Date d'inscription
jeudi 22 avril 2004
Statut
Membre
Dernière intervention
1 avril 2011
1
29 juin 2010 à 14:36
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 --
0