Accueil > Forum > > > > autocomplete sur formulaire généré dynamiquement
autocomplete sur formulaire généré dynamiquement
lundi 28 juin 2010 à 10:16:18 |
autocomplete sur formulaire généré dynamiquement

Korxxx
|
Bonjour à tous !
J'utilise l'autocomplete de jquery ui, ça marche très bien sur des formulaire simple :
Code Javascript : <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 :
Code HTML : <label>Marque</label><input type="text" id="DESIGNATION_MARQUE" name="DESIGNATION_MARQUE" />
<input type="hidden" id="ID_MARQUE" name="ID_MARQUE" /> Code HTML :
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 ) :
Code Javascript : function ajout()
{ var table=document.getElementById("Produits_Fournisseur");
var row = table.insertRow(table.rows.length);
row.insertCell(row.cells.length).innerHTML=
"<input type='text' name='DESIGNATION_PRODUIT' />";
}
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 :
Code Javascript : function ajout()
{ var table=document.getElementById("Produits_Fournisseur");
var row = table.insertRow(table.rows.length);
row.insertCell(row.cells.length).innerHTML=
"<input type='text' name='DESIGNATION_PRODUIT[]' />";
}
Voila, je suis vraiment perdu, merci d'avance si vous pouvez m'aider :)
|
|
lundi 28 juin 2010 à 10:45:53 |
Re : autocomplete sur formulaire généré dynamiquement

chino18
|
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.
Code Javascript : 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 --
|
|
lundi 28 juin 2010 à 11:11:19 |
Re : autocomplete sur formulaire généré dynamiquement

Korxxx
|
Merci pour ta réponse.
Avec les changements que tu as proposé ca me donne :
Code Javascript : 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) )
|
|
lundi 28 juin 2010 à 11:14:45 |
Re : autocomplete sur formulaire généré dynamiquement

Korxxx
|
on peut pas editer les messages ?
Des erreurs dans le message d'avant, c'est bien sur :
Code Javascript : 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);
}
});
});
|
|
lundi 28 juin 2010 à 11:18:07 |
Re : autocomplete sur formulaire généré dynamiquement

Korxxx
|
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 :
Code Javascript : # $(document).ready(function(){
# var inputs = 0;
# $(".insert").live("click", function(){
# inputs++;
# $("<td><input type='text' name='product_id_"+inputs+"' /></td>")
# .appendTo("tr:has(.insert)")
# .find("input")
# .autocomplete("getValues.jsp",{ extraParams: {action:"getProducts"} });
# });
|
|
lundi 28 juin 2010 à 12:06:08 |
Re : autocomplete sur formulaire généré dynamiquement

chino18
|
Réponse acceptée !
Dans ton premier bout de code, celui qui fonctionne tu as:
Code Javascript : $("#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:
Code Javascript : 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 --
|
|
lundi 28 juin 2010 à 12:12:05 |
Re : autocomplete sur formulaire généré dynamiquement

Korxxx
|
Bon, j'ai réussi à l'adapter :
Code Javascript : var inputs = 0;
function ajout()
{
inputs++;
var table=document.getElementById("Produits_Fournisseur");
var row = table.insertRow(table.rows.length);
$("<td><input type='text' name='product_id_"+inputs+"' /></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 ^^
|
|
lundi 28 juin 2010 à 12:18:22 |
Re : autocomplete sur formulaire généré dynamiquement

Korxxx
|
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 ?
|
|
lundi 28 juin 2010 à 15:26:58 |
Re : autocomplete sur formulaire généré dynamiquement

Korxxx
|
Réponse acceptée !
la syntaxe champ.Name ne fonctionnait pas, voila la correction :
Code Javascript :
<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><input type='text' name='DESIGNATION_PRODUIT_"+i+"' /></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>
|
|
mardi 29 juin 2010 à 14:36:06 |
Re : autocomplete sur formulaire généré dynamiquement

chino18
|
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:
Code Javascript :
$("input[name='DESIGNATION_PRODUIT']")
je crois même que ça aussi ça passerait:
Code Javascript :
$("[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 --
|
|
Cette discussion est classée dans : table, code, produit, row, autocomplete
Répondre à ce message
Sujets en rapport avec ce message
TABLE BDD [ par begueradj ]
Azul, J'ai à ajouter un produit à l'une des 4 catégories prédéfinies à partir d'un [code=html]...[/code] Et lorsque je posete le [code=html]....[/cod
ajout d'une ligne dynamiquement dans une table [ par bobkorn ]
Bonjour je souhaiterais savoir comment je pourrais résoudre le problème suivant j'ai une table comme suit : [code=php] Version Date Change <inp
Comment donnée un type à cet attribut d'une table?? [ par djibidl ]
Bjr, J'ai besoin de créer une base de donnée relationnelle dans laquelle il y a beaucoup de tables. Lors de la création de ces dernières avec la co
serveur [ par eva4 ]
Bonjour, Je viens de creer un petit serveur local. Apache, mysql, phpmyadmin etc.... quand je tape dans mon navigateur localhost/document/zezette.ph
Affichage d'une table en PHP [ par begueradj ]
Bonjour; J'aimerais afficher les données de ma table dans un tableau HTML [color=red]multi-colonnes[/color] or lorsque j'utilise le code qui suit j'o
La copie est -elle possible?? [ par djibidl ]
Bonsoir, je voudrai savoir s'il est possible de copier une table relationnel dans une autre de même structure. Pas comme un renommage mais en réalité
Passage de variables d'une page à une autre [ par calypso78 ]
Bonjour, Je dois envoyer une variable à une autre page, mais je ne vois pas du tout comment faire... Voici mon code pour l'instant : [code=php]
Impossible d'obtenir un champ dans une table [ par SpaceHam ]
J'avais envoyé une question à ce sujet mais je vais être un peu plus clair. exemple de mon code ------------ $all_pc = new ArrayObject; $req = "SELE
code client [ par buryohe ]
Bonjour, J'ai un problème dans ma programmation.En effet, je suis débutant mais j'aime la programmation. je voulais demander un conseil et une aide. A
si valeur de variable pas dans table alors..... [ par herve911 ]
bonsoir tout le monde ! j'ai besoin d'aide svp j'ai écrit un script qui dois lire dans une table et afficher certaines valeurs mais si la valeur de la
Livres en rapport
|
Derniers Blogs
IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
Forum
XML ET PHPXML ET PHP par karouani
Cliquez pour lire la suite par karouani
Logiciels
sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|