Discussion :

[flyoman]

Bonjour à tous,

je viens solliciter votre aide car je debute en Jquery et je suis un peu (beaucoup) perdu

j'ai téléchargé l'autocomplete de uiquery et donc j'ai un champ input texte qui contient par defaut la valeur "Paris"

j'ai trouvé un code sur le net qui mêle ajax et jquery pour faire de l'autocomplete que voici :

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
$.ajax({ // Requete ajax  
 
 
 
 type: "POST", // envoie en POST  
 
 url: "http://www.monsite.com/base.php", // url cible du script PHP  
 
async: true, // mode asynchrone  
 
 data: "debut=" + this.val(), // données envoyées  
 
 
 
 success: function(xml){ // Lorsque le PHP à renovyé une réponse  
 
var elementsArray = new Array();  
 
 
 
 $(xml).find('option').each(function(){ // pour chaque "element"  
 
 elementsArray.push($(this).text()); // ajout dans le tableau  
 
 });  
 
 
 
 $("input#ad").autocomplete({source: elementsArray}, { minLength: 3 }); // activation de l'autocompletion  
 
 }  // fin success
 
 
 
});  // requete ajax

donc comme je debute je ne suis meme pas sur que ça corresponde à l'autocomplete ui car dans les demos apparement on peut directement intégrer ajax dans l'autocomplete, enfin...

donc j'interoge mon script php qui me renvoit un resultat xml. le truc qui m'embete avec ça c'est que tout le monde peut accéder à mon fichier base.php et accéder à la liste complete. du coup je me suis dit de passer les informations en POST avec la variable debut qui récupère le texte que je suis entrain de taper dans mon input.

en gros j'ai deux questions :
- je n'arrive pas à récupérer la valeur de mon input que je suis entrain de taper, j'ai essayé $("input#ad").val() ça ne marche pas non plus mais ça vient apparement du fait que jquery ne prend les infos qu'au chargement de la page. auriez vous une idée pour faire ça proprement s'il vous plait ?

- comment protéger mon fichier base.php ? y a t'il une technique pour protéger le code ? j'avoue que je ne connais quasiment que le coté serveur et pas du tout habitué à javascript et j'aimerai bien cacher tout ça.

comme vous voyez je suis un peu perdu et pour résumer je veux juste un script tout con qui interroge mon .php en passant une variable du type debut="mot que je tape dans mon input" et qui me retourne un xml

merci d'avance

[Atomya Rise]

Code javascript :

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
 
$.ajax({ // Requete ajax  
	type: "POST", // envoie en POST  
	url: "http://www.monsite.com/base.php", // url cible du script PHP  
	async: true, // mode asynchrone  
	data: { 
		"debut=" + this.val(), // données envoyées  
		ValeurInput: $('input[type=text][name=NAME_DE_INPUT]').val(),
	}
	success: function(xml){ // Lorsque le PHP à renovyé une réponse  
		var elementsArray = new Array();  
 
		$(xml).find('option').each(function(){ // pour chaque "element"  
			elementsArray.push($(this).text()); // ajout dans le tableau  
		});  
 
	$("input#ad").autocomplete({source: elementsArray}, { minLength: 3 }); // activation de l'autocompletion  
	}  // fin success
});  // requete ajax

J'ai indenté ton code, je ne sais pas si c'est parfait, mais toujours mieux..

Pour récupérer la valeur de ton input il faut que tu procède ainsi :

Code javascript :

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

ValeurInput: $('input[type=text][name=NAME_DE_INPUT]').val(),

Et dans ton php tu récupère ta valeur comme ceci :

Code php :

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

$_POST['ValeurInput']

Ensuite pour que ton code soit pris en compte dès le démarrage il faut mettre ceci :

Code javascript :

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

1
2
3
4
 
$(document).ready( function () {
TA REQUETE AJAX
});

Sinon, le mettre en fonction et appeler cette fonction au bon moment...

Pour essayer de protéger ton code javascript tu peux l'encoder, mais toujours garder le fichier propre car pour le décoder, c'est le bordel
Voici un site qui te le fera : http://javascriptcompressor.com/

Après, je suis débutante en jQuery, et très sincèrement, je n'ai pas réellement comprise l'histoire du xml...
Que souhaites tu faire exactement, une auto-complétion ?

Voilà, en espérant que cela t'aide un peu...

[flyoman]

salut

et merci pour ta réponse

pour l'input ça marche pas malheureusement, apparement faut essayer de chopper un truc en .term pour avoir la saisie et non la valeur de l'input au chargement de la page mais bon le .term j'arrive pas à le faire pour l'instant non plus...
là le seul truc qui marche, c'est quand je re-tape le champ value qui est déjà présent au chargement de la page avec ce code :

Code :

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

"debut="+ $('input[type=text][name=name de mon input]').val(),

, signe que c'est la valeur de mon input que j'arrive pas à chopper.

merci pour le reste et le lien notamment, j'irai voir ça quand j'arriverai à faire un truc fonctionnel

sinon oui je veux faire de l'auto completion, en fait le xml est renvoyé par le script php, mais j'ai vu des scripts qui renvoient du JSON, apparement c'est pas mal non plus...

je continue mes recherches ! mais si jamais quelqu'un à la réponse je prends aussi lol

thanks!

[Atomya Rise]

Code javascript :

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

1
2
3
4
5
6
7
8
9
 
$.ajax({ // Requete ajax  
	type: "POST", // envoie en POST  
	url: "http://www.monsite.com/base.php", // url cible du script PHP  
	async: true, // mode asynchrone  
	data: { 
		"debut=" + this.val(), // données envoyées  
		ValeurInput: $('input[type=text][name=NAME_DE_INPUT]').val(),
	}

Procédons par étapes...

async étant par défaut "true" tu n'a pas besoin de le mettre.
Ensuite, dans ton data, il y a quelque chose qui me perturbe... je ne sais pas à quoi se rapporte ton this, mais moi, je verrais plutôt ceci :

Code javascript :

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

debut: $(this).val(),

En ce qui concerne le Json, cela permet de pouvoir renvoyé depuis le codes php des structures de données complexe comme des tableaux qui pourront directement être exploité côté javascript.

Voici un exemple d'utilisation :

Code php :

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

1
2
3
 
$tableau = array("premier" => $premier, "deuxieme" => $deuxieme);
echo json_encode($tableau);

Code javascript :

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

1
2
3
4
5
6
7
8
 
var MonPremierResultat;
var MonDeuxiemeResultat;
 
function testJson(data) {
     MonPremierResultat = data.premier;
     MonDeuxiemeResultat = data.deuxieme;
}

Et dans ton .ajax, il suffit d'ajouter

Code javascript :

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

1
2
 
dataType: "json",

Voilà, j'espère être clair et ne pas t'avoir perdu

[flyoman]

hello !

et merci pour la réponse

je crois que le this ne se rapporte à rien

ok pour le json, je comprends à peu près le concept par contre ce que je comprends un peu moins c'est toutes ces histoires de fonctions imbriquées. j'ai trouvé un exemple ici :

http://blog.seanja.com/2010/03/using...mplete-widget/

qui m'a l'air pas mal du tout mais franchement les fonctions appelées avec les paramètres qui sont dedans là je suis paumé !

notamment le

Code :

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

source: function(request, response) {

je suppose que le request fait reference au .ajax et le response à la fonction response dans success ?

j'arrive pas à voir ce que pourrai retourner le data dans la partie ajax aussi ?

enfin la fonction response se sert de data pour faire un "explode" de l'array json apparement.

bref c'est un peu confu mais je vais regarder ça plus en détail quand j'aurai le temps !

en tout cas merci

[scourjean]

Tu n'as pas trouvé ton bonheur sur
http://jqueryui.com/demos/autocomplete/
Il y a plusieurs démos dont une pour récupérer une source Json