begin process at 2012 05 28 19:21:29
  Trouver un code source :
 
dans
 
Accueil > Forum > 

PHP

 > 

Web 2.0

 > 

Ajax

 > 

autocomplete sur formulaire généré dynamiquement


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

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


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,853 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales