Ouvrir une popup avec appel AJAX

7 avril 2011 | javascript/jQuery, Tutoriels | 4 commentaires

Je ne sais pas si vous connaissez déjà Fancybox, une alternative à Lightbox, pour créer facilement des galeries de photos avec jQuery, mais dans ce tutoriel, je vais plutôt vous présenter la méthode pour ouvrir des fausses popup en JavaScript à l’aide de ce sympathique plugin.

Prérequis

D’abord, rendez-vous sur le site de Fancybox pour télécharger les fichiers nécessaires au bon fonctionnement de ce plugin.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

Le code

Créez ensuite 2 fichiers : test.html et test.php par exemple.

Voici le code pour le fichier test.html (dans le head)

<script type="text/javascript">
$(document).ready(function () { // quand la page est chargée
  $('a.fancybox').fancybox({ // pour les liens avec la classe fancybox
    ajax : { type : "POST", data : 'var=Artcompix à votre service' } // exemple d'envoi de valeur
  });
});
</script>

Ensuite, créez un lien quelque part dans le body de votre page pour pouvoir appeler votre fichier php

<a class="fancybox" href="test.php">Je teste AJAX !</a>

Le fichier php

Créez ensuite un fichier php chargé de traiter les données au niveau du serveur. Notre fichier à nous ne fait pas grand-chose, mais vous avez maintenant le principe pour faire des requêtes à une base de données par exemple…

<?php
  if( isset($_POST['var']) && !empty($_POST['var']) ) {
    $retour = $_POST['var'];
  } else {
    $retour = 'Une erreur est survenue.';
  }
  echo $retour;
?>

Voilà ! Si ça ne fonctionne pas, vérifiez d’abord que jQuery est bien chargé, ainsi que les différents fichiers JavaScript nécessaires au bon fonctionnement de Fancybox. Vérifiez ensuite les chemins, source d’erreur très fréquente…

Si rien ne marche, utilisez les commentaires ci-dessous, nous vous aiderons.

Les fichiers de l’exemple à télécharger

<< Retour