Un pense bête comme un autre
Posts tagged JQuery
Utilisez JQuery pour ouvrir / fermer un div
031 jours
by Arnaud
in Programmation
Nous avons vu dans l’article « Utilisation de JQuery pour soumettre un formulaire » comment utiliser le framework javascript JQuery pour soumettre un formulaire en utilisant l’ajax. Dans ce nouvel article on va voir comment ouvrir un div.
Pour ce nouvel exemple nous reprenons l’exemple précédent.
Inventaire des fichiers
L’exemple sera composé de 3 fichiers:
- Le formulaire (index.php)
- Traitement javascript (ajax.js)
- Le fichier PHP de traitement (action.php)
Syntaxe HTML
Voici les lignes ajoutées après le bouton connexion du fichier index.php.
</pre> <h3 class="collapse">Besoin d'aide cliquez-ici</h3> <div class="content"> <ul> <li>Saisissez votre identifiant dans la première zone</li> <li>Saisissez votre mot de passe dans la deuxième zone</li> <li>Cliquez sur le bouton connexion</li> </ul> </div> <pre>
Ce qui est important dans ces quelques lignes sont les classes collapse et content. On va mieux le comprendre en regardant le code javascript qu’il faut ajouter dans le fichier _js/ajax.js.
Syntaxe Javascript
Après les lignes suivantes après la fonction Ready
jQuery(".content").hide();
jQuery(".collapse").click(function()
{
jQuery(this).next(".content").slideToggle(500);
});
Ces deux indiquent que par défaut l’élément html ayant la classe content est caché. Et lors du clique du l’élément html ayant la classe collpase, affiche l’élement suivant ayant la classe content.
Syntaxe CSS
Et juste quelque ligne de présentation ajoutée dans le fichier exemple.css
.content {
border:2px solid #DDDDDD;
margin-bottom:1em;
padding:0.8em;
background:none repeat scroll 0 0 #E6EFC2;
border-color:#C6D880;
color:#264409;
}
Visuels
Le formulaire avant le clique sur l’aide
Le formulaire après avoir cliqué sur le div
En cliquant de nouveau sur l’aide le texte se ferme.
Fichiers et liens
Vous trouverez un zip de l’exemple
Voici la liste des différents liens qui peuvent aider à approfondir le sujet:
Utilisation de JQuery pour soumettre un formulaire
4783 jours
by Arnaud
in Programmation
Voilà un petit tutoriel pour utiliser l’API JQuery et la soumission de formulaire via l’Ajax.
Tout d’abord : le principe. Nous somme sur un formulaire en PHP (le langage importe peu pour comprendre le principe). Lors de la soumission de ce formulaire, nous ne voulons pas que la page soit rechargée. C’est la raison pour laquelle nous allons utiliser la technologie AJAX.
Mais avant tout voici un petit exemple.
Inventaire des fichiers
L’exemple sera composé de 3 fichiers:
- Le formulaire (index.php)
- Traitement javascript (ajax.js)
- Le fichier PHP de traitement (action.php)
Le formulaire
Nous allons faire simple : un petit formulaire de connexion avec un identifiant et un mot de passe.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Soumettre un formulaire en ajax via JQuery</title>
<script type="text/javascript" src="./_js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="./_js/ajax.js"></script>
<link rel="stylesheet" type="text/css" href="./_css/exemple.css" media="screen" />
</head>
<body>
<div id="root">
<form id="auth" method="post" name="auth" action="">
<fieldset>
<legend>Authentification</legend>
<label for="iden">Identifiant:</label>
<br />
<input type="text" name="iden" id="iden" class="text" size="20" />
<br />
<label for="mdp">Mot de Passe:</label>
<br />
<input type="text" name="mdp" id="mdp" class="text" size="20" />
<br /><br />
<button type="submit" class="button positive"> Connexion</button>
</fieldset>
</form>
<div id="success" class="success" style="display:none;"></div>
</div>
</body>
</html>
On inclut 2 fichiers javascript :
- jquery-1.3.2.js : API JQuery à télécharger ici
- ajax.js : notre fichier qui va faire le lien entre notre formulaire et notre traitement php
Le Javascript
Il est composé de 2 fonctions importantes :
- ready : fonction à exécuter lorsque le document sera prêt.
- ajax : fonction qui charge une page externe en utilisant une requête HTTP
Les Options
On doit fournir à la fonction « ajax » plusieurs options plus ou moins évidentes. C’est pourquoi je m’attarderai sur dataTypes.
dataType (string) : correspond au format des données qui seront renvoyées du serveur. Si aucun type n’est spécifié, jQuery utilisera le type MIME pour déterminer le format adéquat : responseXMl ou ResponseText. Voici la liste des types disponibles:
- « xml » : retourne un document XML qui pourra être traité par jQuery.
- « html » : retourne du code HTML au format texte, inclus l’évaluation des script tags.
- « script » : évalue la réponse en Javascript et retourne cette dernière au format texte.
- « json » : évalue la réponse en JSON et retourne un objet Javascript.
Dans notre exemple le fichier action.php retourne des données structurées, c’est pourquoi nous choisissons comme type de données JSON.
$(document).ready(function () {
$("form#auth").submit(function() {
var identifiant = $('#iden').attr('value');
var mdp = $('#mdp').attr('value');
$.ajax({
type: "POST",
url: "action.php",
data: "&iden="+ identifiant + "&mdp=" + mdp,
success: result,
dataType: "json"
});
return false;
});
});
function result(data){
var resultat = '<p>Résultat: <b>'+data.identifiant+'</b> vous êtes connecté avec le mot de passe suivant <b>'+
data.mdp+"</b><br />n L'exemple est finit retourné sur le site <a class='positive' href='"+data.url+"'>Dollois Connection</a></p>";
$('form#auth').hide();
$('div#success').fadeIn("slow");
$('div#success').append(resultat);
}
Le PHP
Le contenu de ce fichier n’a aucun intérêt, vous l’aurez bien compris, si ce n’est, par exemple, de vous permettre d’interroger une base de données pour vérifier si l’identifiant et le mot de passe correspondent bien à un utilisateur du site.
Le seul point à noter est json_encode qui retourne la représentation JSON d’une valeur.
<?php
$result = array(
'url' => 'http://www.dollois.com',
'identifiant' => $_POST['iden'],
'mdp' => $_POST['mdp'],
);
echo json_encode($result);
?>
Fichiers et liens
Vous trouverez un zip de l’exemple
Voici la liste des différents liens qui peuvent aider à approfondir le sujet: