Posts tagged jQuery
Autocompletion en jQuery
7/02/09
Voici un plugin jQuery facilitant l’autocompletion : Autocomplete. Il est très simple d’utilisation et il est facilement customisable. Comme d’habitude, rien de mieux qu’un exemple concret d’utilisation pour comprendre. Le fonctionnement de cet exemple est très simple et cumule des notions abordées auparavant. Au chargement de la page, l’ajax interroge un script PHP qui retourne un flux XML contenant plusieurs éléments (pouvant être issus d’une requête SQL). Il ne reste alors plus qu’a appeler la fonction pour déclencher l’autocompletion.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.pack.js"></script>
<style type="text/css">
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/*
if width will be 100% horizontal scrollbar will apear
when scroll mode will be used
*/
/*width: 100%;*/
font: menu;
font-size: 12px;
/*
it is very important, if line-height not setted or setted
in relative units scroll will be broken in firefox
*/
line-height: 16px;
overflow: hidden;
}
.ac_loading {
/*background: white url('indicator.gif') right center no-repeat;*/
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #0A246A;
color: white;
}
</style>
<script type="text/javascript">
// Lorsque la totalité de la page est chargée
$(document).ready(function() {
$.ajax({ // Requete ajax
type: "POST", // envoie en POST
url: "test.php", // url cible du script PHP
async: true, // mode asynchrone
data: "", // données envoyées
success: function(xml){ // Lorsque le PHP à renovyé une réponse
var elementsArray = new Array();
$(xml).find('element').each(function(){ // pour chaque "element"
elementsArray.push($(this).text()); // ajout dans le tableau
});
$("#example").autocomplete(elementsArray); // activation de l'autocompletion
}
});
});
</script>
</head>
<body>
Autocompletion : <input id="example" />
</body>
</html>
header ("content-type: text/xml");
echo "
<root>
<element>element 1</element>
<element>element 2</element>
<element>element 3</element>
<element>element 4</element>
<element>element 5</element>
<element>element 6</element>
<element>element 7</element>
<element>element 8</element>
<element>element 9</element>
<element>element 10</element>
<element>element 11</element>
</root>";
Tout ca pour donner :
Appels ajax avec jQuery
5/02/09
Etant un grand fan du Framework jQuery, je ferais de temps en temps quelques petits écarts avec des tutoriaux à son sujet.
Aujourd’hui, on va débuter très très light avec un bout de code expliquant comment envoyer des données en POST à un serveur PHP et récupérer une réponse au format XML (pour le traitement avec JSON je vous laisse parcourir la documentation très bien faite). L’exemple ci dessous envoie une requête au chargement de la page, puis, récupère et parse la réponse au format XML renvoyé epar le serveur. Apres, libre à vous d’effectuer les traitements que vous voulez.
Voici le code Javascript :
<script src="jquery.js"></script>
<script type="text/javascript">
// Lorsque la totalité de la page est chargée
$(document).ready(function() {
$.ajax({ // Requete ajax
type: "POST", // envoie en POST
url: "test.php", // url cible du script PHP
async: true, // mode asynchrone
data: "param1=test1¶m2=test2", // données envoyées
success: function(xml){ // Lorsque le PHP à renovyé une réponse
alert("Retour du PHP : " + $(xml).find('message').text());
}
});
});
</script>
Et le code PHP correspondant :
header ("content-type: text/xml");
echo "<root><message>Bonjour de PHP</message></root>";
Voila, c’est tout ce qu’il y a à faire. A partir d’un bout de code simple comme celui là, on peut facilement imaginer énormement de fonctionnalités. Par exemple, des requêtes synchrones qui effectuent des requêtes en base permettant d’afficher un champ d’autocompletion (style google suggest). Ce tutorial, c’est vraiment la base et la vision la plus simple d’un appel ajax.