Discussion :

[sanland]

Bonjour,
J'utilise ajax.autocompleter de script.aculo.us.
J'ai une form :

Code :

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

1
2
3
4
5
6
7
8
9
 
<tr>
   <td>Contact Name:*</td>
   <td>
	<input type="text" id="ContactName1"  
		name="ContactName1"  size="35" /> 
	<div id="ContactName1_propositions" class="autocomplete"></div>
    </td>
</tr>

Je la couple de cette façon avec le javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
	new Ajax.Autocompleter(
		"ContactName1",  
	    "ContactName1_propositions",
	    "Controleur/Partenaire/AideALaSaisie/COlisteInfoPartenaire.php",
	    {
	        paramName: "received_ContactName1",
	        minChars: 1
	    });
</script>

Dans COlisteInfoPartenaire.php, je fais les accès à la BD et resors les réponses via des < ul > < li >.

Pour l'instant, tout fonctionne

Or, je dois aussi mettre un bouton "Ajouter" qui me permet d'ajouter un autre contact sur la même page.

Code :

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

1
2
3
4
 
<table id="tabContactadd" width="600">
</table>
<a href="javascript:generateContactName();" style="margin-left:1%;">Ajouter un autre contact</a>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function generateContactName() {
	var xhr = getXhr();
 
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && xhr.status == 200) {
			unitFonc = xhr.responseText;
			document.getElementById('tabContactadd').innerHTML += unitFonc;
		}
	};
	xhr.open("POST", "./Modele/Ajax/Ajax_generateContactName.php", true);
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}

Dans Ajax_generateContactName.php il y a aussi une form :

Code :

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

1
2
3
4
5
6
7
8
9
 
<tr>
   <td>Contact Name:*</td>
   <td>
	<input type="text" id="ContactName2"  
		name="ContactName2"  size="35" /> 
	<div id="ContactName2_propositions" class="autocomplete"></div>
    </td>
</tr>

et utilisé avec

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
	new Ajax.Autocompleter(
		"ContactName2",  
	    "ContactName2_propositions",
	    "Controleur/Partenaire/AideALaSaisie/COlisteInfoPartenaire.php",
	    {
	        paramName: "received_ContactName1",
	        minChars: 1
	    });
</script>

Cela ne marche pas.
Je comprends bien que PHP executé coté serveur et javascript coté client.
Le problème est que l'autocompleter fonctionne dans le cas normal mais lorsqu'il s'agit de faire apparaitre grace au javascript une textbox, celle-ci n'est pas compatible avec l'autocompleter.
J'ai googlisé tout ça mais je n'obtiens aucun résultat concernant mon problème.

Merci de votre aide

PS : j'ai essayé de rendre le sujet de la question le plus clair possible.

--
SanLand

[gwyohm]

Bonjour et bienvenue sur le forum developpez.com,

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function generateContactName() {
	var xhr = getXhr();
 
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && xhr.status == 200) {
			unitFonc = xhr.responseText;
			document.getElementById('tabContactadd').innerHTML += unitFonc;
		}
	};
	xhr.open("POST", "./Modele/Ajax/Ajax_generateContactName.php", true);
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}

Vu que tu utilises scriptaculous, tu as aussi prototype. Il est dommage de repasser par xhr alors que prototype peux tout te simplifier le code que tu présentes peut s'écrire comme ca en prototype :

Code :

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

1
2
3
4
 
function generateContactName() {
  new Ajax.Updater("tabContactadd", "./Modele/Ajax/Ajax_generateContactName.php");
}

Quant à ton problème, le script pour créer le deuxième autocompleter doit
soit être invoqué une fois que la deuxième textbox est apparue,
soit venir avec l'ajax en passant evalScripts à true: au choix

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function generateContactName() {
  new Ajax.Updater("tabContactadd", "./Modele/Ajax/Ajax_generateContactName.php", {
    onComplete: function() {
       new Ajax.Autocompleter("ContactName2",  "ContactName2_propositions",
	    "Controleur/Partenaire/AideALaSaisie/COlisteInfoPartenaire.php",
	    {
	        paramName: "received_ContactName1",
	        minChars: 1
	    });
    }
  });
}

Soit dans ton script php /Modele/Ajax/Ajax_generateContactName.php tu renvoies le code HTML ET

Code :

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

1
2
3
4
5
6
 
function generateContactName() {
  new Ajax.Updater("tabContactadd", "./Modele/Ajax/Ajax_generateContactName.php", {
    evalScripts: true
  });
}

Cependant, tes 2 textbox ne peuvent-elles pas se trouver sur la page dès le début (quitte à ce que la deuxième soit invisible et affichée par le bouton ajouter un contact ?

Ou bien tu peux avoir plus que 2 champs et il faudra faire attention aux IDs !

[sanland]

Merci pour l'accueil gwyohm,
Je ne connaissais effectivement pas "prototype", je vais de ce pas me documenter la-dessus et suivre tes conseils.

Quand au problème de script, il faut bien sur se dire qu'il peut y avoir un maximum de 10 générations possibles. Les id sont bien sur automatique grace à une variable mais le ajax.autocompleter est bien copié collé avec des id allant de 1 à 10 (pas trouvé le moyen de contourner ça).
Je n'ai pas très bien compris

Soit dans ton script php /Modele/Ajax/Ajax_generateContactName.php tu renvoies le code HTML ET

La première méthode que tu proposes me parais être pratique mais je préfère attendre ton explication de la deuxième avant de prendre une quelquonque décision.

Sur ce, je te remercie et attends avec impatience la réponse.


PS : Je remarque que ton post a été soumis à 18h42 (ah, le 42!)

--
SanLand

[gwyohm]

Bonjour,

il manque effectivement un morceau dans ma phrase

Ce que je voulais dire, c'est que ta requete AJAX vers ton script PHP peut renvoyer le code HTML (l'input à transformer en autocomplete, la div de résultat...) ET le code javascript permettant la création de l'autocompleter. Tu prendras alors soin de passer l'option evalScripts à true.

[sanland]

Bonjour,

J'ai finalement opté pour la solution 1.

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
 
function genererContactPartenaire() {
	nbContactPartenaire = document.getElementById('nbContactPartenaire').value;
	nbContactPartenaire = parseInt(nbContactPartenaire) + 1;
	alert('Test ' + nbContactPartenaire);
	document.getElementById('nbContactPartenaire').value = nbContactPartenaire;
 
	  new Ajax.Updater("tabContactPartenaireAjout", "./Modele/Ajax/Ajax_genererContactPartenaire.php", {
	    onComplete: function() {
	       new Ajax.Autocompleter("nomContact2",  "nomContact_propositions",
		    "Controleur/Partenaire/AideALaSaisie/COlisteInfoPartenaire.php",
		    {
		        paramName: "nomContact_recu",
		        minChars: 1,
		        parameters: "nbContactPartenaire=" + $("nbContactPartenaire").value
		    });
	    }
	  });
}

Il faudrait en faite que je donne la variable nbContactPartenaire à COlisteInfoPartenaire.php... Cette variable permet de connaitre le prochain id des textbox et donc de savoir combien il y en a. Avant je faisais ça avec xhr.send("nbContactPartenaire=" + nbContactPartenaire);
Dans le fichier COlisteInfoPartenaire.php j'ai essayé de récupérer en POST, GET... rien!
Sur le net j'ai pas trouvé plus que
To send additional parameters to the server, add them here in the format: 'field=value&another=value'. Errata/bug: The hash format {field: 'value',another: 'value'} was noted in this wiki to work, but it does not, as the Ruby on Rails project has separately documented and fixed in their codebase.

Merci encore

--
SanLand

[gwyohm]

Bonjour,

Je ne comprend pas pourquoi tu veux donner à COlisteInfoPartenaire.php le nombre d'autocompleter présents... à priori, COlisteInfoPartenaire.php ne fait que calculer les possibilités de saisie en fonction de ce que l'utilisateur a saisi.

Par contre, le script PHP Ajax_genererContactPartenaire.php a besoin lui de savoir quel est le prochain ID à générer. Pour celà, il faut faire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function genererContactPartenaire() {
  new Ajax.Updater("tabContactPartenaireAjout",  
     "./Modele/Ajax/Ajax_genererContactPartenaire.php", {
     parameters: {
       next_id: nbContactPartenaire // pour récupérer en POST 
                                               //dans la clé next_id 
                                               // la valeur nbContactPartenaire 
     },
     onComplete: function() {
      // ...
     });
}