Discussion :

[Finaler]

Bonjour !

Si le problème suivant a été traité, pourriez-vous me rediriger sur le post ? J'ai survolé le forum mais rien ne répond à mon problème. (Dites moi également si je l'ai mal posté ou au mauvais endroit)



Le problème est le suivant :

Je souhaite appliquer l'autocomplétion ajax sur différents champs input (exemple : Un sur les noms, un autre sur les prénoms, etc).

Jusque là tout va bien, mais je voudrais le faire avec un minimum de fichiers possibles pour que cela soit très pratique à utiliser.

Voici ici un bout concerné du formulaire :

----------------------

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
 
def_label("Principales compétences");
 
def_input_text("competence1", "text", $_POST['competence1'], "id=\"competence1_complete\" onkeyup=\"suggest_input(this.value, '#competence1_complete', '#suggestions_competence1', '#suggestions_liste_competence1', 'autocompletion_lists/get_liste_competence.php');\"");
 
echo "<br />";
 
?>
 
<div class="suggestionsBox" id="suggestions_competence1" style="display: none;"> <img src="autocompletion_ajax/arrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
 
	<div class="suggestionList" id="suggestions_liste_competence1"></div>
 
</div>

def_label() est une fonction php. On saisit le string et le label est fait.

def_input_text("name", "type", "valeur par défaut", "autres options de la balise") est une fonction php aussi. Dans les autres options, on met ce que l'on veut : id, class, onchange, onkeyup, onblur, etc.

Les deux div en html servent pour voir les choix de l'autocomplétion.



On remarque dans le def_input_text() qu'il y a un onkeyup="...". C'est la fonction d'autocomplétion.

La voici ci-dessous:

----------------------

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
function suggest_input(text, input_id, div_id, subdiv_id, file_dir){
	if(text.length == 0){
		$(div_id).fadeOut();
	}
	else{
		$(input_id).addClass('load');
		$.post(	file_dir,
		{queryString: ""+text+""}, 
		function(data){
			if(data.length >0){
				$(div_id).fadeIn();
				$(subdiv_id).html(data);
				$(input_id).removeClass('load');
			}
		});
	}
}

----------------------

Comme vous le voyez, j'ai mis plein d'arguments en paramètre pour que tout soit très souple. Je ne voudrais pas avoir 2 fonctions avec que l'ID qui change pour 2 champs d'autocomplétion.

Pour comprendre tout cela, vous avez aussi besoin de savoir que contient un fichier de type "file_dir". Voici alors un exemple :

----------------------

Code php :

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
if(isset($_POST['queryString'])) {
	$queryString = $_POST['queryString'];
	if(strlen($queryString) >0) {
		$query = "SELECT nom FROM liste_competence WHERE nom LIKE '%$queryString%' order by nom";
		$result = mysql_query($query) or die("Problème de connexion à la base de données ! Merci de nous en informer !");
		if($query) {
			echo'<ul>';
			while ($row = mysql_fetch_array($result)) {
       			echo '<li onClick="fill(\''.$row['nom'].'\');">'.$row['nom']."\n".'</li>';
       		}
			echo'</ul>';
		} 
		else {
			echo 'Problème de connexion à la base de données ! Merci de nous en informer !';
		}
	} 
}
else {
	echo 'Il ne devrait y avoir aucun accès direct à ce script !';
}

----------------------

Je vous assure ici que la connexion est faite, qu'elle marche, etc, etc. Rien de bien spécial.

Ma première question commence ici : Y aurait-il un moyen d'avoir une fonction a la place de ce "file_dir". En effet, j'ai plusieurs fichiers comme ci-dessus avec comme SEULE différence le nom de la table. N'aimant pas avoir plein de fichiers quasi identiques, je voudrais vous demander si vous avez une solution pour ce problème.

Bon ceci n'est que le premier problème. Poursuivons dans le code. Il y a un appel de la fonction fill() dans la balise <li>.

Voici le code de cette fonction :

----------------------

Code :

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

1
2
3
4
function fill(thisValue) {
	$('#competence1_complete').val(thisValue);
	setTimeout("$('#suggestions_competence1').fadeOut();", 0);
}

----------------------

Vous remarquerez ici, que cette fonction marche que pour le champ "compétence1_complete".

Ce que je souhaiterai, ca serait plus une fonction du style :

----------------------

Code :

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

1
2
3
4
function fill_input(thisValue, input_id, div_id){
	$(input_id).val(thisValue);
	setTimeout("$(div_id).fadeOut();", 0);
}

----------------------

Comment faire pour que cela se rapproche plus de la fonction fill_input() au lieu de fill() ?

(Si vous pouviez me donner une solution pour remplacer le "file_dir" plus haut en une fonction, cela résoudrait également mon problème).



Je vous remercie d'avance.

[Invité]

Bonjour,
C'est un vrais cours que tu demandes, mais avant de se fatiguer a te répondre,
ou préfères-tu ouvrir le débat ? chez nous ou ailleurs ?

[Finaler]

Heu ... Que ca soit sur developpez ou ailleurs, ca ne me dérange pas. Disons sur developpez comme on y est déjà.

Il est vrai que je ne connais pas très bien ajax ou même javascript mais je me débrouille un peu comme je peux avec les bases de développement que j'ai (et en regardant les docs pour mieux comprendre l'utilité des fonctions).

Mais ce que je demande, ce n'est pas vraiment un cours. Après si tu as de bons sites qui donnent de bons cours, je serai preneur ;p Je voulais surtout savoir s'il existait des fonctions / méthodes qui pouvaient répondre à mes attentes pour que mon code soit plus souple et facile d'utilisation. Après, me citer juste des pistes/liens/prototypes de fonction pourraient me suffire (si c'est la "bonne" voie pour réussir ce que je veux). Puis ca sera à moi de faire le travail de recherche et de tests.

Par exemple : Si on pouvait mettre une fonction au lieu d'un fichier / URL dans $.post() le problème serait régler. On mettrait une fonction en php qui prend en argument le "input_id" et "div_id", que l'on mettrait ensuite dans la fonction fill_input() (qui est utilisée ici dans le fichier .php).
Ici l'exemple ne marche pas (je précise) et à l'air plutot simple à faire (si cela marchait). Mais je ne demande pas forcement quelquechose de très simple à faire.

Bien sûr, actuellement, j'ai une méthode qui peut faire de l'autocomplétion avec plusieurs champs mais j'ai x fois la fonction fill() et x fichiers .php (x correspondant au nombre de champs avec autocomplétion), ce que je n'aime pas trop.

[Invité]

Il te suffit d'un sel et unique PHP appelé par ton AJAX,
juste lui envoyer un paramétre en POST supplémentaire
par exemple action 1 2 3 4 5 etc...
Dans ton PHP tu auras
1) la reception des POST
2) autant de

Code :

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

 if ($action==xx) //======== alors on fait ceci

Pour terminer saches que
def_label("Principales compétences"); et def_input_text("etc...
ne sont pas des fonctions (verbes) de PHP !
Peut-être d'un fichier de fonctions que tu aurais eu je ne sais ou.

[Finaler]

Oui en effet ! Ce sont les fonctions que j'ai écrite pour éviter de taper les balises avec les options, etc (étant un flemmard). Quand je disais fonction php, je voulais dire une fonction faite en php.
Partageons ce bout de code ;p C'est un peu au feeling, donc ces fonctions ne sont pas parfaites non plus mais bon, voici le bout de code :

Code php :

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
<?php
function def_label($label, $options=""){
	print("<label $options>$label</label>");
}
 
/*---------------*/
 
function def_select($select_name, $option_code_value, $selected="", $select_options="", $option_options=""){
	print("<select name=$select_name $select_options>\n");
	foreach($option_code_value as $value => $name){
		if($selected!=$value)
			print("<option value=\"$value\" $option_options>$name</option>\n");
		else
			print("<option value=$value selected $option_options>$name</option>\n");
	}
	print("</select>");
}
 
/*---------------*/
 
function def_input_text($name, $type, $value="", $options=""){
	print("<input name=$name type=$type $options value=\"$value\" >");
}
 
/*---------------*/
 
function def_textarea($name, $rows, $cols, $value, $options=""){
	print("<textarea  name=$name rows=$rows cols=$cols $options>$value</textarea>");
}
 
/*---------------*/
 
function def_radio($name, $class, $radio_value_text, $checked='', $fixed_options='', $tab_options='', $vertical=''){
	if($tab_options == ''){
		foreach($radio_value_text as $value => $text){
		if($value == $checked)
			print("<input class=$class name=$name type='radio' value=\"$value\" checked $fixed_options> $text $vertical");
		else
			print("<input class=$class name=$name type='radio' value=\"$value\" $fixed_options> $text $vertical");
		}
	}
	else{
		$i=0;
		foreach($radio_value_text as $value => $text){
			$tmp = $tab_options[$i];
			if($value == $checked)
				print("<input class=$class name=$name type='radio' value=\"$value\" checked $fixed_options $tmp> $text $vertical");
			else
				print("<input class=$class name=$name type='radio' value=\"$value\" $fixed_options $tmp> $text $vertical");
			$i++;
		}
	}
}
 
/*---------------*/
 
function def_checkbox($name, $options=""){
	print("<input name=$name type='checkbox' $options checked>");
}
?>

Ok ok ! Merci ! Je vais voir ca.

[Invité]

A bientôt,
Et n'oublies pas de cliquer en bas de ton écran sur RESOLU (merci)
nous n'avons pas ce boutons en bas du sujet, seul l'auteur du sujet le possède !

Donc à la prochaine si tu ré ouvres un sujet,même s'il s'agit d'une suite de celui-ci.

[Finaler]

A bientot !
Heu ... ca ne te dérange pas que je clique sur résolu dès que j'y arrive ? (ca ne devrait pas trop tarder normalement :p)

Encore merci !

---------------------------

Impec ! Ca marche sans probleme (tu m'as permis de comprendre réellement comment ca marche le $.post()) !!

RESOLU !