Ajax suggest : affichage du CS javascript

Eléphant du PHP | 88 Messages

27 juil. 2006, 13:33

Bonjour,
je souhaiterai avoir un zone de texte où lorsque je saisie du texte, on m'affiche les clients correspondants à ce que j'ai saisie:

Pour être plus clair, si dans ma table j'ai un client qui s'appelle société 1 et un client qui s'appelle société 2, je veux que lorsque je tape "s" il me donne les deux clients.

J'ai trouvé sur internet un sricpt qui le fait, mais lorsque je tape quelque chose il me donne bien les clients correspondants, mais ensuite il affiche tout le javascript.

Je ne sais pas d'où ca vient:

Voici ma page php :
<?
...
///Make sure that a value was sent.
if (isset($_GET['search']) && $_GET['search'] != '') {
	//Add slashes to any quotes to avoid SQL problems.
	$search = addslashes($_GET['search']);
	//Get every page title for the site.
	list ($qh , $num) = dbQuery("SELECT distinct(organisation) as suggest FROM $CLIENT_TABLE WHERE organisation like('" .
		$search . "%') ORDER BY organisation");
	while($suggest = dbResult($qh)) {
		//Return each page title seperated by a newline.
		echo $suggest['suggest'] . "\n";
	}
}
?>

<html>
<head>
	<title>Tâches</title>
<?php
include ("header.inc");
?>

<script language="javascript">
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
	}
	else if(window.ActiveXObject){
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
	else {
	alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?");
	}
}

//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();

//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
	var str = escape(document.getElementById('txtSearch').value);
	searchReq.open("GET", 'tmp.php?search=' + str, true);
	searchReq.onreadystatechange = handleSearchSuggest;
	searchReq.send(null);	
	}
}

//Called when the AJAX response is returned.
function handleSearchSuggest() {
	if (searchReq.readyState == 4) {
		var ss = document.getElementById('search_suggest')
		ss.innerHTML = '';
		var str = searchReq.responseText.split("\n");
		for(i=0; i < str.length - 1; i++) {
			//Build our element string.  This is cleaner using the DOM, but
			//IE doesn't support dynamically added attributes.
			var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
			suggest += 'onmouseout="javascript:suggestOut(this);" ';
			suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
			suggest += 'class="suggest_link">' + str[i] + '</div>';
			ss.innerHTML += suggest;
		}
	}
}

//Mouse over function
function suggestOver(div_value) {
	div_value.className = 'suggest_link_over';
}

//Mouse out function
function suggestOut(div_value) {
	div_value.className = 'suggest_link';
}

//Click function
function setSearch(value) {
	document.getElementById('txtSearch').value = value;
	document.getElementById('search_suggest').innerHTML = '';
}
</script>
</head>
<body <? include ("body.inc"); ?> >
<?
include ("banner.inc");
?>

<form id="frmSearch" action="<? echo $_SERVER["PHP_SELF"]; ?>" method="get">

<input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria"
		onkeyup="searchSuggest();" autocomplete="off" />
	<input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" />
	<div id="search_suggest"></div>

</form>		
<?
include ("footer.inc");
?>
</BODY>
</HTML>
Merci

Eléphant du PHP | 88 Messages

27 juil. 2006, 13:37

Ah oui j'allais oublié, voilà le site où j'ai utilisé la source:
http://www.dynamicajax.com/fr/AJAX_Sugg ... 0_312.html
Vous pouvez la télécharger et l'essayer pour voir si chez vous y'a un problème.

Merci

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

27 juil. 2006, 14:21

Salut,

C'est quoi "tout le javascript" ?

Tu appelles la même page pour l'affichage et le traitement ajax.... :idea:

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 88 Messages

27 juil. 2006, 14:31

Ben il m'affiche tout le code source JS.

depuis :

Code : Tout sélectionner

//Gets the browser specific XmlHttpRequest Object function getXmlHttpRequestObject() { if (window.XMLHttpRequest) {
jusque

Code : Tout sélectionner

function setSearch(value) { document.getElementById('txtSearch').value = value; //document.getElementById('search_suggest').innerHTML = ''; }
.

Et pour répondre à ta question je n'ai qu'une seul fichier php qui s'occupe du traitement et de l'affichage avec
<? echo $_SERVER["PHP_SELF"]; ?> 
dans l'action de mon form.

Ca pose un problème?

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

27 juil. 2006, 14:37

Je parlais surtout de ce bout:
///Make sure that a value was sent.
if (isset($_GET['search']) && $_GET['search'] != '') {
    //Add slashes to any quotes to avoid SQL problems.
  
//(...)
        //Return each page title seperated by a newline.
        echo $suggest['suggest'] . "\n";
    }
} 
s'il se trouve dans la même page que le formulaire

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

27 juil. 2006, 14:55

Apparement vi, c'est dans la même page. Du coup c'est normal en effet que lorsque tu interroges ta pages tu récupères non seulement les données générées par php, mais aussi tout ce qui suit ...

En fait "ajax" récupère le contenu renvoyé par l'url que tu appelle.. et vu que cette page renvoi également ton html il récupère tout. A mon avis, il vaut mieux sortir la partie dédiée à la réponse ajax dans un autre script, mais si tu souhaites le conserver dans la même page, il te suffit de mettre un exit() une fois sorti du while :)

Comme ça, dès qu'il a généré la liste des réponses, il s'arrête et du coup ne retournera pas la suite du code...

Eléphant du PHP | 88 Messages

27 juil. 2006, 15:52

Merci pour votre aide.

Au final, j'ai laissé un seul fichier en ajoutant exit().

Pour le moment, il me retourne bien ce que je veux lorsque je rentre quelque chose, mais si je supprime ce qui est entré dans la barre de recherche, il lance la recherche et m'affiche le code source JS.

Comment puis je éviter cela?

Merci

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

27 juil. 2006, 16:13

Comment puis je éviter cela?
2 fichiers séparés :o

En effet tu dois avoir quielque chose comme ça:
if (isset($_GET['search']) && $_GET['search'] != '') {
    //...
    while($suggest = dbResult($qh)) {
       //...
    }
     exit();
} 
mais si la 1ère condition n'est pas remplie tu passe le exit() donc le reste du code est affiché.

Ce n'est pas bien difficile de travailler avec deux fichiers. Cette fonction doit se trouver seule dans un fichier (ajax.php, par exemple)et cette ligne doit l'appeler:
 searchReq.open("GET", 'ajax.php?search=' + str, true);

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 88 Messages

27 juil. 2006, 16:15

C'est bon ça marche!
J'ai rajouté après le
if (isset($_GET["search"]) && $_GET["search"] != '' && !empty($_GET["search"])) {...}
un autre if :
if (isset($_GET["search"])){
	exit();
}
Mon dernier problème et après j'arrête de vous embeter :lol: ... c'est que si c'est entré "Société 1" dans la base, il m'affiche "Soci? 1". D'où peut venir le problème des accents?

Merci

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

27 juil. 2006, 16:55

C'est quand même un peu du bidouillage tout ces exit() :wink:

Pour ton dernier souci... un problème d'encodage renvoyé par "ajax":
traite le retour avec utf8_encode()
echo utf8_encode($suggest['suggest']). "\n";

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

27 juil. 2006, 16:57

Tu peux aussi diviser ton if en deux. Le isSet permet de savoir qu'une recherche est demandée
if (isset($_GET['search'])) { // effectue une recherche 
   if ($_GET['search'] != '') { // on interroge la base que si $_GET['search'] n'est pas vide
     //... 
     while($suggest = dbResult($qh)) { 
       //... 
     } 
  }
  exit(); // arrête la recherche
} 
A noter que !empty($xxx) et $xxx != "", c'est la même chose ;)

Pour ton problème d'accent (et autre caractères spéciaux) c'est parce que la requête et la réponse en ajax sont encodés par défaut en UTF-8. Il te faudrait juste rajouter un header() dans ta partie php pour dire que ce que tu renvois est de l'iso (y a déjà quelques topic qui en causent dans le forum :))

Edit : A la limite pour le coup du if(), ce serait même mieux de modifier ta fonction js pour qu'elle n'interroge pas le serveur lorsque le champ est vide, ca sera toujours ça de moins :)

Eléphant du PHP | 88 Messages

27 juil. 2006, 17:43

C'est bon ça marche!
Merci pour votre aide Ryle et Truc!

J'avais juste ajouter le deuxième if par feignantise de retoucher au premier :oops: !

Mais là j'ai remodifié mon if pour que ça fasse tout dans le même if!
if (isset($_GET["search"])){
	if (!empty($_GET["search"])) {
	//Add slashes to any quotes to avoid SQL problems.
	$search = addslashes($_GET["search"]);
	//Get every page title for the site.
	list ($qh , $num) = dbQuery("SELECT distinct(organisation) as suggest FROM $CLIENT_TABLE WHERE organisation like('" .
		$search . "%') ORDER BY organisation");
	while($suggest = dbResult($qh)) {
		//Return each page title seperated by a newline.
		print utf8_encode($suggest["suggest"])."\n";
	}
	}
	exit();
}
et avec la fonction utf8_encode ça marche bien!

Encore merci