Autocomplete sur formulaire généré dynamiquement [Résolu]

Korxxx 9 Messages postés jeudi 17 juin 2010Date d'inscription 28 juin 2010 Dernière intervention - 28 juin 2010 à 10:16 - Dernière réponse : chino18 82 Messages postés jeudi 22 avril 2004Date d'inscription 1 avril 2011 Dernière intervention
- 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 :)
Afficher la suite 

9 réponses

Répondre au sujet
chino18 82 Messages postés jeudi 22 avril 2004Date d'inscription 1 avril 2011 Dernière intervention - 28 juin 2010 à 12:06
+3
Utile
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 --
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de chino18
Korxxx 9 Messages postés jeudi 17 juin 2010Date d'inscription 28 juin 2010 Dernière intervention - 28 juin 2010 à 15:26
+3
Utile
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>
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de Korxxx
chino18 82 Messages postés jeudi 22 avril 2004Date d'inscription 1 avril 2011 Dernière intervention - 28 juin 2010 à 10:45
0
Utile
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 --
Commenter la réponse de chino18
Korxxx 9 Messages postés jeudi 17 juin 2010Date d'inscription 28 juin 2010 Dernière intervention - 28 juin 2010 à 11:11
0
Utile
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) )
Commenter la réponse de Korxxx
Korxxx 9 Messages postés jeudi 17 juin 2010Date d'inscription 28 juin 2010 Dernière intervention - 28 juin 2010 à 11:14
0
Utile
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);
}
        });
});
Commenter la réponse de Korxxx
Korxxx 9 Messages postés jeudi 17 juin 2010Date d'inscription 28 juin 2010 Dernière intervention - 28 juin 2010 à 11:18
0
Utile
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"} });
#  }); 
Commenter la réponse de Korxxx
Korxxx 9 Messages postés jeudi 17 juin 2010Date d'inscription 28 juin 2010 Dernière intervention - 28 juin 2010 à 12:12
0
Utile
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 ^^
Commenter la réponse de Korxxx
Korxxx 9 Messages postés jeudi 17 juin 2010Date d'inscription 28 juin 2010 Dernière intervention - 28 juin 2010 à 12:18
0
Utile
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 ?
Commenter la réponse de Korxxx
chino18 82 Messages postés jeudi 22 avril 2004Date d'inscription 1 avril 2011 Dernière intervention - 29 juin 2010 à 14:36
0
Utile
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 --
Commenter la réponse de chino18

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.