fouilli
1 message
18/03/2007 |
Bonjour, j'ai suivi le tuto de cette page :
http://www.j0k3r.net/ajax-une-autocompletion-avancee-en-ajax-6.html
et ça marche parfaitement, j'ai donc voulu l'adapter à mes besoins c'est à dire à un formulaire avec plusieurs champs. Mais là c'est le casse tête je n'ai pas réussi à faire ce que je voulais.
Je m'explique, imaginons un formulaire de recherche avec une liste de lieux et on a donc :
Pays
Département
Ville
Si je me met sur ville, et que je commence à taper des lettres, pas de problème : je met PA , ça me propose PARIS, PALERME, par exemple.
(Il en va de même pour les départements et les pays, il marche bien séparément)
Par contre, imaginons, que dans le pays je choisisse ITALIE, et bien je ne souhaite pas avoir PARIS comme choix quand je vais commencer à taper mon PA dans la ville. D'où ma question, comment peut-on lier plusieurs champs avec la librairie script.aculo.us ??
Quelqu'un aurait un petit exemple à me montrer ?
Merci d'avance et bonne continuation
|
|
TiPunK
12 messages
02/05/2007 |
Bonjour, Je me permets de faire un petit up sur ce message, étant donné que me voilà confronté à un problème identique...
Je suis en stage et établis un classement d'espèces végétales Famille->Genre->Espece...
Lorsque je choisis une famille, j'aimerais que l'autosuggestion proposée dans le genre soit limitée uniquement aux valeurs correspondant à la famille choisie avant.
Pour le moment, l'individualisation des recherches est possible par la parametrage "afterUpdateElement: null" dans l'appel de la fonction "Ajax.Autocompleter()" et un if par champ à remplir, mais il faudrait que le $autoCompletion_famille['Famille'] puisse être transmis au second champ. Et c'est là que ça bloque... Je vous glisse un bout le code, la page autocompletion.php :
**Code **
``<?php
if(isset($_POST['famille'])){
header('Content-type: text/html; charset=iso-8859-1');
// on inclut la connexion
mysql_connect('localhost', 'root', '');
mysql_select_db('pollen_nextgen');
// on fait la requête
$sql_famille = "SELECT distinct `Famille` FROM `taxons` WHERE `Famille` LIKE CONVERT( _utf8 '%".$_POST['famille']."%' USING latin1 ) COLLATE latin1_swedish_ci ORDER BY `Famille`";
$req_famille = mysql_query($sql_famille);
$i = 0;
echo '<ul class="contacts">';
// on boucle sur tous les éléments
while($autoCompletion_famille = mysql_fetch_assoc($req_famille)){
echo '
<li class="contact"><div class="nom">'.$autoCompletion_famille['Famille'].'</div>
</li>';
// on s'arrête s’il y en a trop
if (++$i >= 10)
die('<li>...</li></ul>');
}
echo '</ul>';
die();
}
if(isset($_POST['genre'])){
header('Content-type: text/html; charset=iso-8859-1');
// on inclut la connexion
mysql_connect('localhost', 'root', '');
mysql_select_db('pollen_nextgen');
// on fait la requête
$sql_genre = "SELECT distinct `Genre` FROM `taxons` WHERE `Famille` = ".$autoCompletion_famille['Famille']." AND `Genre` LIKE CONVERT( _utf8 '%".$_POST['genre']."%' USING latin1 ) COLLATE latin1_swedish_ci ORDER BY `Genre`";
//$sql_genre = "SELECT distinct Genre FROM taxons WHERE Genre LIKE '%".$_POST['genre']."%' ORDER BY Genre";
// Celle fonctionne bien !!!!
$req_genre = mysql_query($sql_genre);
$i = 0;
echo '<ul class="contacts">';
// on boucle sur tous les éléments
while($autoCompletion = mysql_fetch_assoc($req_genre)){
echo '
<li class="contact"><div class="nom">'.$autoCompletion['Genre'].'</div>
</li>';
// on s'arrête s’il y en a trop
if (++$i >= 10)
die('<li>...</li></ul>');
}
echo '</ul>';
die();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Une autocompletion avancée en AJAX</title>
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="lib/scriptaculous.js"></script>
<script type="text/javascript" src="lib/autocompletion.js"></script>
<style type="text/css">
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: justify;
font-size: 12px;
color: #565656;
}
img {
border: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Autocompletion */
.update{
position:absolute;
width:250px;
background-color:white;
border:1px solid #888;
margin:0px;
padding:0px;
}
ul.contacts {
list-style-type: none;
margin:0px;
padding:0px;
text-align: left;
}
ul.contacts li.selected { background-color: #ffb; cursor: pointer; }
li.contact {
list-style-type: none;
display:block;
margin:0;
padding:2px;
height:32px;
}
li.contact div.image {
float:left;
width:32px;
height:32px;
margin-right:8px;
}
li.contact div.nom {
font-weight:bold;
font-size:12px;
line-height:1.2em;
}
</style>
</head>
<body>
<br/>
<form action="?" method="post" onsubmit="return false;">
<label for="famille">Yeah tape ta famille : </label>
<input type="input" name="famille" id="famille" value="" />
<div class="update" id="famille_update"></div>
<br />
<label for="genre">Yeah tape ton genre : </label>
<input type="input" name="genre" id="genre" value="" />
<div class="update" id="genre_update"></div>
</form>
<br/>
<script type="text/javascript">
new Ajax.Autocompleter ('famille',
'famille_update',
'autocompletion.php',
{
method: 'post',
paramName: 'famille',
afterUpdateElement: null
});
new Ajax.Autocompleter ('genre',
'genre_update',
'autocompletion.php',
{
method: 'post',
paramName: 'genre',
afterUpdateElement: null
});
</script>
</body>
</html>``
Merci d'avance pour vos précieuses réponses...
|
|
j0k3r_n0ir
1007 messages
03/05/2007 |
Salut tous les deux, Je pense avoir la réponse à vos questions. Ou du moins pour lier deux champs en autocompletion. C'un ami qui m'avait posé le problème et en fait j'attendais d'avoir le temps pour faire une article directement dessus (étant donné qu'il n'est pas le seul à se poser la question !).
Si j'ai pas fait l'article d'ici ce week end, je vous dirais comment faire ;)
|
|
TiPunK
12 messages
03/05/2007 |
Ok, merci patron ! ;) J'aurai ensuite une autre petite question sur le sujet, est-ce que l'intégration dans des pseudo-frames d'un site ne pose pas de problème ? Je te demande ça par rapport aux inclusions : je navigue sur l'index de mon site en permanence, donc l'intégration du DOCTYPE est assez délicate je pense, vu qu'elle doit se trouver en dehors de la balise <ashteumeuleu>. Dois-je alors faire une intégration pré-document une bonne fois pour toutes, dans l'index ?
H.S. total (désolé) : Je viens de voir que tu as suivi la formation de M.I.W. à Gap.
Je suis de Gap à la base, bien que je sois parti depuis 8 ans déjà...
Actuellement je suis en Master de Bioinformatique sur Montpellier, et je trouve ta formation super intéressante. Ca peut être un sacré complément en plus de mon Master. Pis un petit retour au pays ça serait cool ! :p
|
|
j0k3r_n0ir
1007 messages
03/05/2007 |
**TiPunK** : > est-ce que l'intégration dans des pseudo-frames d'un site ne pose pas de problème ?Détailles un peu.
Déjà un site en frame ... hum c'un peu has been !!
**TiPunK** :
> H.S. total (désolé) : Je viens de voir que tu as suivi la formation de M.I.W. à Gap.
Je suis de Gap à la base, bien que je sois parti depuis 8 ans déjà...
Actuellement je suis en Master de Bioinformatique sur Montpellier, et je trouve ta formation super intéressante. Ca peut être un sacré complément en plus de mon Master. Pis un petit retour au pays ça serait cool ! :pC'est de l'informatique orienté internet mais pas de bio :)
|
|
TiPunK
12 messages
04/05/2007 |
**j0k3r_n0ir** : > Détailles un peu.
Déjà un site en frame ... hum c'un peu has been !!!
En fait c'est toujours l'index qui est rafraichi, en fonction du contenu d'une variable passée en GET, il n'y a pas de cadre réel. Il est totalement valide XHTML 1.0 strict d'ailleurs.
Ca donne ça :
**Code **
``<?php
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<!-- Titre de la page -->
<title>PDB</title>
</head>
<!-- Fin Haut de page -->
<!-- Corps de page -->
<body>
<!------------------------------------>
<!-- Premier "Bloc": Entête et Menu -->
<!------------------------------------>
<?php
// Préparation de la connexion a phpMyAdmin
include('./config/config_access.inc.php');
include('entete.html'); // Nous appelons l'entete du site
?>
<!-- Fin du premier Bloc -->
<!------------------------------------------>
<!-- Deuxième "Bloc": Affichage Dynamique -->
<!------------------------------------------>
<table style="border: 1px solid #000; width: 100%; background-color: #FFF;">
<tr>
<td>
<?php
/*********************************************************************************/
/* Le bloc de code php ci-dessous est utilisé ici afin de sécuriser le site web: */
/* Seul un nombre limité de page peut ainsi être affiché. */
/* Une URL incorrecte renvoit à l'accueil du site */
/*********************************************************************************/
// Liste des pages autorisées
$valid_page = array( 'menu_ajout' => './menu_ajout.html',
'menu_MAJ' => './menu_MAJ.html',
'taxon' => './Insertion/Nouveau_taxon.html',
'ajout_taxon' => './Insertion/Ajout_table_taxon.php',
'MAJ_taxon' => './MAJ/MAJ_taxon.php',
'MAJ_table_taxon' => './MAJ/MAJ_table_taxon.php'
);
// La page appartient t'elle à la liste des pages autorisées ?
if ( (isset($_GET['page'])) && (isset($valid_page[$_GET['page']])) ) {
include($valid_page[$_GET['page']]); // Pages principales
}else{
include('test.html'); // Page par défaut ( Se charge à la place d'une page non autorisée )
}
?>
</td>
</tr>
</table>
<!-- Fin du deuxième Bloc -->
<!-- Pied de page -->
<div class="pied_page"><p class="ppp"><a href="http://www.php.net/" target="_blank"><img border="0" src="./img/icone_php.png" title="Built with PHP!"></a><a href="" target="_blank"><img border="0" src="./img/css.gif" title="Valid CSS"></a></p></div>
</body>
<!-- Fin du Corps de page -->
</html>``
|
|
j0k3r_n0ir
1007 messages
04/05/2007 |
Ok j'ai compris. Lis bien le tutoriel tout récemment mis à jour sur AlscreationS :
> http://css.alsacreations.com/Tutoriels-PHP/Inclure-un-fichier-dans-un-autre-grace-a-PHP
;)
|
|
TiPunK
12 messages
04/05/2007 |
Je suis d'autant plus content, après avoir lu le tutoriel, de savoir que ma structure est bien conforme. ;) (à la différence près que le global est dans un tableau, *non mea culpa*, mon binôme veut pas changer)
|
|
TiPunK
12 messages
07/05/2007 |
**j0k3r_n0ir** : > Si j'ai pas fait l'article d'ici ce week end, je vous dirais comment faire ;)
:P Je t'attends...
|
|
j0k3r_n0ir
1007 messages
07/05/2007 |
Il reçoit quelques corrections et il arrive ;)
|
|