Autocomplétion sur un champ input qui vient d'être généré [Résolu]

chewing-gum · 01/02/2012, 14h45

Bonjour,

dans le cadre d'un projet, je dois réaliser un formulaire avec tout un tas de fonctions dynamiques / ergonomiques, avec JQuery.

Problème : J'ai créé une fonction pour ajouter des champs <input type="text" ... /> dynamiquement. il suffit que l'utilisateur clique sur un bouton pour que le <input> soit généré. Voila mon morceau de code (celui-ci fonctionne) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
            // Ajoute une ligne
            $('p#addLine').live('click', function() {
                var myElement = $('<tr id=' + i + '> <td>' + i + '<td> <input class="articles" type="text" name="idArticle-' + i + '" /> </td> <td> <input type="text" name="qte-' + i + '" /> </td> <td id="delete-' + i + '" class="delete">Supprimer ' + i + '</td> </tr>').appendTo('table');
            });

Note : la variable "i" est définie un peu plus tôt dans mon code.

Mais... Les <input> possèdent aussi une fonction d'autocomplétion. Cette dernière fonctionnalité ne marche pas pour les <input> qui sont ajoutés dynamiquement. Voila mon code d'autocomplétion :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
            // Autocomplétion idArticle
            $('.articles').autocomplete ({
                source: '<%= Url.Action("GetArticles") %>',
                datatype: 'json',
                minLength: 2,
                select: function(event, ui) {
                    // Traitement à effectuer
                },
                scroll: true
            });

Les champs "non générés dynamiquement" par JQuery n'ont pas d'autocomplétion.
J'imagine peut-être qu'il faut effectuer une sorte de "refresh" pour que mes <input> générés soient pris en compte ?

Benjamin Delespierre · 01/02/2012, 17h40

La meilleure chose à faire serait sans doute s'équiper d'une fonction d'initialisation capable de prendre un contexte en paramètre de façon a pouvoir initialiser les éléments ajoutés dynamiquement.

Ex:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function _init () {
  var context = arguments[0] || document;
 
  $('.autocomplete', context).autocomplete(...);
}
 
$(function () {
 
  $('#add').live('click', function() {
     var html = $('<div>...</div>');
     _init( $('anything').after(html) );
  });
 
  _init();
});

SpaceFrog · 01/02/2012, 19h29

voir aussi on() et delegate() ...
live() est deprecié depuis jQuery 1.7

BlindeKinder · 02/02/2012, 14h12

bonjour,
je suis en apprentissage de jQuery, que j'apprécie beaucoup!
Et j'ai le même souci (je crois)...
J'ai des <span class="toto"> générés au chargement, qui déclenchent des fonctions lorsqu'ils sont cliqués:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.toto').click(function...

pas de souci, tout fonctionne... Mais je génère ensuite d'autres span.toto (.append), qui eux ne sont évidemment pas 'parsés' au chargement, et donc l'action ne se déclenche pas au clic!?!
Je ne suis pas sûr de comprendre la fonction _init(). Il n'y a pas plus simple?

SpaceFrog · 02/02/2012, 14h21

toutes les reponses sont au dessus ...

Benjamin Delespierre · 02/02/2012, 15h09

Citation:

Je ne suis pas sûr de comprendre la fonction _init(). Il n'y a pas plus simple?

Tu veux dire plus simple que réunir toutes les instructions d’initialisation dans une même fonction ? Non.

danielhagnoul · 02/02/2012, 23h42

Bonsoir

On peut utiliser la méthode "destroy" et reconstruire l'UI Autocomplete avec ses options. Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/humanity/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<style>
		/* Base */
		html {font-size:62.5%; } /* Pour 62.5% 1rem =~ 10px */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgb(122, 79, 79); color:#000000; font-family:sans-serif; font-size:1.4rem; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:0.6rem; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2.4rem; text-shadow: 0.4rem 0.4rem 0.4rem #bbbbbb; text-align:center; }
		p {padding:0.6rem; }
		.conteneur {width:95%; min-width:80rem; min-height:30rem; margin:1.2rem auto; background-color:#ffffff; color:#000000; border:0.1rem solid #666666; }
		footer {margin-left:3.6rem; }
 
		/* -- */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<button id="btn">Nouveau input pour UI Autocomplete</button>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2012-02-02T22:37:51.000+01:00" pubdate>2012-02-02</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>	
		"use strict";
 
		// Date ISO format long US
		Date.prototype.formatISO = function(){
			this._nowFormat = 'aaaa-mm-jjThh:ii:ss.000Szz:00';
			this._toLen2 = function(_nowStr){
				_nowStr = _nowStr.toString();
				return ('0'+_nowStr).substr(-2,2);
			};
			this._nowFormat = this._nowFormat.replace(/j+/, this._toLen2(this.getDate()));
			this._nowFormat = this._nowFormat.replace(/m+/, this._toLen2(this.getMonth()+1));
			this._nowFormat = this._nowFormat.replace(/a+/, this.getFullYear());
			this._nowFormat = this._nowFormat.replace(/h+/, this._toLen2(this.getHours()));
			this._nowFormat = this._nowFormat.replace(/i+/, this._toLen2(this.getMinutes()));
			this._nowFormat = this._nowFormat.replace(/s+/, this._toLen2(this.getSeconds()));
			this._nowFormat = this._nowFormat.replace(/S+/, (this.getTimezoneOffset() < 0) ? ("+") : ("-"));
			this._nowFormat = this._nowFormat.replace(/z+/, this._toLen2(Math.abs(this.getTimezoneOffset()/60)));
			return this._nowFormat;
		};
 
		$(function(){
			/* Base */
			console.log(new Date().formatISO());
 
			/* -- */
 
			var availableTags = [
				"ActionScript",
				"AppleScript",
				"Asp",
				"BASIC",
				"C",
				"C++",
				"Clojure",
				"COBOL",
				"ColdFusion",
				"Erlang",
				"Fortran",
				"Groovy",
				"Haskell",
				"Java",
				"JavaScript",
				"Lisp",
				"Perl",
				"PHP",
				"Python",
				"Ruby",
				"Scala",
				"Scheme"
			];
 
			var objOptions = {
				source: availableTags
			};
 
			$( "input.articles" ).autocomplete( objOptions );
 
			var i = 1;
 
            // Ajoute une ligne
            $('#btn').on( 'click', function() {
                $('<tr id="trID' + i + '"> <td>' + i + '<td> <input class="articles" type="text" name="idArticle-' + i + 
				'" /> </td> <td> <input type="text" name="qte-' + i + '" /> </td> <td id="delete-' + i + '" class="delete">Supprimer ' + 
				i++ + '</td> </tr>').appendTo('section.conteneur');
 
				$( "input.articles" ).autocomplete( "destroy" ).autocomplete( objOptions );
            });
 
			/*
			 * jPicker : http://www.digitalmagicpro.com/jPicker/,
			 * est un outil pour choisir rapidement une couleur
			 *
			 * Sue Firefox, avec Web Developper, cette version
			 * de jPicker provoque des avertissements CSS !
			 *
			 * Mais il est très pratique !
			 */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
 
			$(".conteneur").jPicker({
				window: {
					expandable : true,
					title : "jPicker : choissisez une couleur :",
					alphaSupport : true,
					position : {
						x : 'screenCenter',
						y : 'top'
					}
				},
				color : {
					active : new $.jPicker.Color({
						r : 210,
						g : 214,
						b : 98,
						a : 128
					})
				}
			}, function( color, context ){
				var c = color.val("all");
				if ( c ){
					$( "body" ).css( "background-color", "rgba(" + c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")" );
				}
			});
		});
 
		$(window).load(function(){
		});
	</script>
</body>  
</html>

chewing-gum · 04/02/2012, 16h15

Merci pour vos réponses.
N'étant pas au boulot le week-end (encore heureux), je testerai ça Lundi.
J'ai quand même trouvé une solution en attendant, mais je n'ai actuellement pas accès au code de l'appli.

Bref, je ferai un "report" lundi.

BlindeKinder · 14/02/2012, 12h08

finalement, je réécris le jquery qui ajoute un action au click dans la fonction qui ajoute des ligne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
function newEntry(url) {
	$("#playlist").append(
		'<a href="' + url + '">' +
		<span class="rem_entry">X</span>' +
		'</a>'
	);
	$('span.rem_entry').click(function(){
		$(this).parent('span').parent('a').remove();
		return false ;
	});
}

ça fonctionne, s'il n'y a pas de contre indication je laisse comme ça...

01/02/2012, 19h29	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 079 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 079 Points : 45 213 Points : 45 213	voir aussi on() et delegate() ... live() est deprecié depuis jQuery 1.7 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

02/02/2012, 14h21	#5
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 079 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 079 Points : 45 213 Points : 45 213	toutes les reponses sont au dessus ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

02/02/2012, 14h12	#4
BlindeKinder Membre du Club Inscription : mars 2007 Messages : 116 Détails du profil Informations forums : Inscription : mars 2007 Messages : 116 Points : 52 Points : 52	bonjour, je suis en apprentissage de jQuery, que j'apprécie beaucoup! Et j'ai le même souci (je crois)... J'ai des <span class="toto"> générés au chargement, qui déclenchent des fonctions lorsqu'ils sont cliqués: Code : Sélectionner tout - Visualiser dans une fenêtre à part $('.toto').click(function... pas de souci, tout fonctionne... Mais je génère ensuite d'autres span.toto (.append), qui eux ne sont évidemment pas 'parsés' au chargement, et donc l'action ne se déclenche pas au clic!?! Je ne suis pas sûr de comprendre la fonction _init(). Il n'y a pas plus simple?
	00

04/02/2012, 16h15	#8
chewing-gum Membre régulier Christophe Inscription : novembre 2009 Messages : 78 Détails du profil Informations personnelles : Nom : Christophe Informations forums : Inscription : novembre 2009 Messages : 78 Points : 73 Points : 73	Merci pour vos réponses. N'étant pas au boulot le week-end (encore heureux), je testerai ça Lundi. J'ai quand même trouvé une solution en attendant, mais je n'ai actuellement pas accès au code de l'appli. Bref, je ferai un "report" lundi.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email